学成在线页面设计案例

news2024/11/24 16:24:02

html结构

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线教育平台-不是每个网站都叫学成在线</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 1.头部区域开始啦 -->
<div class="header w">
<!-- logo部分 -->
<div class="logo">
<img src="./img/logo.png" alt="">
</div>
<!-- 链接模块 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 搜索模块 -->
<div class="search">
<input type="text" value="请输入关键词">
<button></button>
</div>
<!-- 用户模块 -->
<div class="user">
<img src="./img/user.png" alt="">qq-leishui
</div>
</div>
<!-- 1.头部区域结束了 -->
<!--2. banner部分start -->
<div class="banner">
<!-- 放一个版心 -->
<div class="w">
<!-- 侧导航栏 -->
<div class="subnav">
<ul>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
<li><a href="#">前端开发<span>&gt;</span></a></li>
</ul>
</div>
<!-- 课程模块 -->
<div class="course">
<h2>我的课程表</h2>
<div class="bd">
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p> 正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p> 正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p> 正在学习-使用对象</p>
</li>
</ul>
<a href="#" class="more">全部课程</a>
</div>
</div>
</div>
</div>
<!-- banner部分end -->
<!-- 3.精品推荐模块 开始-->
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
</ul>
<a href="#" class="mod">修改兴趣</a>
</div>
<!-- 3.精品推荐模块 结束-->
<!-- 4.box核心内容区 开始-->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<!-- 清除浮动 
给浮动的li的父元素添加clearfix
-->
<ul class="clearfix">
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 🤡 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 🤢 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 🐢 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 🏍️ 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 👹 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 😱 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 🥁 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 🤓 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> 🥶 1125人在学习
</div>
</li>
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span> ⚽ 1125人在学习
</div>
</li>
</ul>
</div>
</div>
<!-- 4.box核心内容区 结束-->
<!--5. footer 模块制作开始 -->
<div class="footer">
<div class="w">
<div class="copyright">
<img src="./img/logo.png" alt="">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
2022年 架构狮 👻ttc 保留所有权利。</p>
<a href="#" class="app">下载app</a>
</div>
<div class="links">
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
</div>
</div>
</div>
<!--5. footer 模块制作结束 -->
</body>
</html>

css样式

* {
margin: 0;
padding: 0;
}

/* 清除浮动 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
*zoom: 1;
}

body {
background-color: #f3f5f7;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

/* 版心 */
.w {
width: 1200px;
margin: auto;
}

/* 1.头部区域 */
.header {
height: 42px;
/* background-color: pink; */
/* 此地层叠w的margin */
margin: 30px auto;
}

.logo {
float: left;
width: 198px;
height: 42px;
/* background-color: aquamarine; */
}

.nav {
float: left;
margin-left: 60px;
}

.nav ul li {
float: left;
margin: 0 15px;
}

.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505
}

.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}

.search {
float: left;
width: 412px;
height: 42px;
/* background-color: skyblue; */
margin-left: 70px;
}

.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0;
color: #d5d6d6;
font-size: 14px;
padding-left: 15px;
}

.search button {
float: left;
width: 50px;
height: 42px;
background-color: crimson;
/* 按钮默认边框需要手动去除 */
border: 0px;
background: url(../img/btn.png);
}

.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}

/* 2.banner区域*/
.banner {
height: 421px;
background-color: #1c036c;
}

.banner .w {
height: 421px;
background: url(../img/banner2.png) no-repeat top center;
}

.subnav {
float: left;
width: 190px;
height: 421px;
background-color: rgba(0, 0, 0, .3);
}

.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}

.subnav ul li a {
font-size: 14px;
color: #fff;
}

.subnav ul li a span {
float: right;
}

.subnav ul li a:hover {
color: #00a4ff;
}

.course {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
/* 浮动的盒子不会有外边距塌陷 */
margin-top: 50px;
}

.course h2 {
height: 48px;
line-height: 48px;
text-align: center;
font-size: 18px;
color: #fff;
background-color: #9bceea;
}

.course .bd {
padding: 0 20px;
}

.course .bd ul li {
padding: 14px 0;
border-bottom: 1px solid #ccc;
}

.course .bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}

.course .bd ul li p {
font-size: 12px;
color: #a5a5a5;
}

.course .bd .more {
display: block;
height: 38px;
line-height: 38px;
text-align: center;
margin-top: 5px;
border: 1px solid #22b0ff;
color: #00a4ff;
font-size: 16px;
font-weight: 700;
}

/* 3.精品推荐模块 */
.goods {
height: 60px;
background-color: #fff;
margin-top: 10px;
box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .1);
/* 行高会继承给三个孩子 */
line-height: 60px;
}

.goods h3 {
float: left;
margin-left: 30px;
font-size: 16px;
color: #00a4ff;
}

.goods ul {
float: left;
margin-left: 30px;
}

.goods ul li {
float: left;
}

.goods ul li a {
padding: 0 30px;
border-left: 1px solid #ccc;
font-size: 16px;
color: #050505;
}

.goods .mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}

/* 4.box 核心内容区 */
.box {
margin-top: 30px;
}

.box .box-hd {
height: 45px;
}

.box .box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}

.box .box-hd a {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}

/* 
把li的父亲ul修改的足够宽
 一行能装开5个盒子，就不会换行了
 */
.box .box-bd ul {
width: 1225px;
}

.box .box-bd ul li {
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}

.box .box-bd ul li img {
width: 100%;
}

.box .box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
font-weight: 400;
color: #050505;
}

.box .box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}

.box .box-bd .info span {
color: #ff7c2d;
}

/* 5.footer 区域 */
.footer {
height: 415px;
background-color: #fff;
}

.footer .w {
/* 外边距塌陷 margin-top: 35px; */
padding-top: 35px;
}

.footer .copyright {
float: left;
}

.footer .copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0px;
}

.footer .copyright .app {
display: block;
width: 118px;
height: 33px;
line-height: 33px;
text-align: center;
border: 1px solid #00a4ff;
font-size: 16px;
color: #00a4ff;
}

.footer .links {
float: right;
}

.footer .links dl {
float: left;
margin-left: 100px;
}

.footer .links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}

.links dl dd a {
font-size: 12px;
color: #333;
}

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/53437.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

沉睡者IT - Web3采用现状：哪些企业采用了Web3，效果如何？

沉睡者IT - Web3采用现状：哪些企业采用了Web3，效果如何？

欢迎关注沉睡者IT&#xff0c;点上面关注我 ↑ ↑ 作为 Web 3 世界的“原住民”&#xff0c;我们已经能够看到个人和企业越来越多地尝试 Web 3 机制&#xff0c;推出 NFT、加密资产和数字商品。 了解他们为什么这样做、他们追求什么目标、哪些机制的效果最好和最差对我们来说…
阅读更多...
python主题建模可视化LDA和T-SNE交互式可视化

python主题建模可视化LDA和T-SNE交互式可视化

我尝试使用Latent Dirichlet分配LDA来提取一些主题。 最近我们被客户要求撰写关于主题建模的研究报告&#xff0c;包括一些图形和统计输出。 本教程以自然语言处理流程为特色&#xff0c;从原始数据开始&#xff0c;准备&#xff0c;建模&#xff0c;可视化论文。 我们将涉及…
阅读更多...
142.创建序列化类、序列化测试、反序列化测试

142.创建序列化类、序列化测试、反序列化测试

1.创建序列化类 什么是序列化&#xff0c;为什么要序列化&#xff1f; 当前web api应用中&#xff0c;前端要用到从后台返回的数据来渲染页面的时候&#xff0c;一般都是使用的json类型的数据&#xff0c;因为json类型简单直观便于理解&#xff0c;那么就需要在django框架中&am…
阅读更多...
openEuler 通过 手工方式 安装 ceph 步骤

openEuler 通过 手工方式 安装 ceph 步骤

ceph集群在openEuler手工安装过程openEuler手工安装ceph 安装步骤前置要求1.openEuler版本2. Python 33. Systemd4. Time synchronization (such as chrony or NTP)5. LVM2 for provisioning storage devices安装1. 创建用户ceph2. 安装 ceph3. 生成配置项3.1 机器及组件规划列…
阅读更多...
【Confluence】预览中文附件出现乱码，离线Linux下安装字体

【Confluence】预览中文附件出现乱码，离线Linux下安装字体

what: confluence页面预览含有中文的附件时乱码 why&#xff1a;Linux服务器上 缺少中文字体 how&#xff1a; 一、安装字体 1、拷贝字体&#xff1a;linux上/usr/share/fonts/路径下新建目录msttcore&#xff0c;将windows的C:\Windows\Fonts的字体文件拷贝到/usr/share/fonts…
阅读更多...
Mac Typora + PicGo + Github配置图床

Mac Typora + PicGo + Github配置图床

Mac Typora PicGo Github配置图床 为了能把自己整理的博客发到CSDN上集集赞又介于一张张贴图很麻烦&#xff0c;所以搞了搞图床试试效果 下载PicGo 会魔法的建议直接爬长城&#xff1a;PicGo 不会魔法的用山大的镜像&#xff1a;PicGo Github图床设置 新建项目 随便起个…
阅读更多...
详解：进程程序替换

详解：进程程序替换

目录一、前言二、什么是进程程序替换&#xff1f;三、进程程序替换的原理四、为什么要进行进程程序替换&#xff1f;五、如何进行进程程序替换&#xff1f;(常见进程程序替换系统调用接口)六、利用所学综合知识实现一个shell总结一、前言 一般情况下&#xff0c;对应的语言写的…
阅读更多...
ELMO语言模型

ELMO语言模型

ELMOELMO提出背景&#xff1a;解决一词多义问题。模型结构&#xff1a;双层双向的LSTM&#xff0c;字符卷积&#xff0c;第一层lstm表示更多的句法特征&#xff0c;第二层lstm表示更多的语义特征从ELMO开始以后学的语言模型都是预训练语言模型。预训练模型&#xff1a;1.预训练…
阅读更多...
微机-------输入/输出接口（第六章）

微机-------输入/输出接口（第六章）

目录 输入/输出接口概述输入/输出接口的功能CPU与输入/输出接口之间的信息⭐⭐输入/输出端口的编址方式统一编址独立编址输入/输出接口概述 CPU与外部设备进行信息交换时的困难： ①CPU和外设的速度差异非常大 ②CPU不能和外设直接通过引脚连接 注意： CPU和外设之间必须要设置…
阅读更多...
5G LDPC polar 3GPP 定案过程

5G LDPC polar 3GPP 定案过程

前言 看到中科大袁老师一段关于3GPP 组织 在 5G LDPC, polar 编解码定案过程&#xff0c;简单分享一下 一 简介 整个方案上百家公司整整争论了一年,最终定下来 其里碑阶段分3段如下&#xff1a; 二 主要争论点 当初主要有两大纠纷&#xff1a; 1&#xff1a; 数字信道 和控制…
阅读更多...
基于thinkphp校园二手交易网站#毕业设计

基于thinkphp校园二手交易网站#毕业设计

随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 东方二手交易网站设计管理系统网站主要的功能模块包括首页、个人中心、卖家管理、买家信息管理、商品信息管理、订单信息管理、商品分类管理、系统管理…
阅读更多...
基于51单片机电子微波炉控制系统（源程序+仿真+原理图+全套资料）

基于51单片机电子微波炉控制系统（源程序+仿真+原理图+全套资料）

资料编号&#xff1a;203 功能介绍&#xff1a; 该电子微波炉采用51单片机制作&#xff0c;有基本的加热、冷却、启动、停止等功能&#xff0c;并通过MCU 控制其加热、冷却时间&#xff0c;LED 数码管显示时间。程序采用C语言编写&#xff0c;仿真使用Proteus&#xff0c;程序…
阅读更多...
Redis的分布式锁问题（十）最强分布式锁工具：Redisson

Redis的分布式锁问题（十）最强分布式锁工具：Redisson

Redisson的引入 我们先来看看之前的基于setnx实现的分布式锁存在的问题&#xff1a; 我们之前实现的分布式锁是基于redis的setnx命令的特性的&#xff01; 但是&#xff0c;这样子实现起来会有很多弊端&#xff01; 不可重入 简单的来说就是一旦setnx [key] [value]后&…
阅读更多...
这才是图扑数字孪生污水处理厂该有的样子

这才是图扑数字孪生污水处理厂该有的样子

近年来&#xff0c;智慧水务、数字水务成为水务行业的热点领域。对于污水处理领域&#xff0c;如何贯彻落实双碳战略&#xff0c;积极推进智慧水厂建设&#xff0c;显得尤为关键。 图扑软件依托自主研发的 HT for Web 产品&#xff0c;并结合视频融合、BIM、5G、物联网、云计算…
阅读更多...
matplotlib 中子图subplot 绘图时标题重叠解决办法

matplotlib 中子图subplot 绘图时标题重叠解决办法

引言 使用Python的matplotlib库绘制子图发现标题发生了重叠。 原来的代码&#xff1a; plt.rcParams[font.family][SimHei] datayear_genfor i in range(1,11):plt.subplot(5,2,i)typetype_df.index[:][i-1]setplot_TypeTime(i,data,type)plt.show()上网上寻找解决办法。 按照…
阅读更多...
Allegro添加渐近线操作指导

Allegro添加渐近线操作指导

Allegro添加渐近线操作指导 Allegro支持添加渐近线，让线宽变化的地方进行圆环的过渡，对于射频信号优化有很大帮助，类似下图 具体操作如下 首先设置参数，route-Gloss-Parameters 点击Fillet and Taper Trace前面的方框 勾选Allowed DRC， Unused Nets 勾选Tapered Trac…
阅读更多...
BLUElegend传奇引擎不使用路由器架设单传奇的办法

BLUElegend传奇引擎不使用路由器架设单传奇的办法

使用BLUE LEGEND架设传奇私发服单机的朋友&#xff0c;是不是因为找不到路由器而无法架设单机服务端呢&#xff0c;这里介绍一种方法不需要买路由器来架设。 为什么LEG引擎需要路由器才能架设呢&#xff1f; 网上找了很多教程都得不到答案&#xff0c;有些人说是为了固定ip地址…
阅读更多...
[附源码]计算机毕业设计SpringBoot网上鲜花购物系统

[附源码]计算机毕业设计SpringBoot网上鲜花购物系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
leetcode-每日一题-1779-找到最近的有相同 X 或 Y 坐标的点(简单，数学思想)

leetcode-每日一题-1779-找到最近的有相同 X 或 Y 坐标的点(简单，数学思想)

今天这道每日一题很简单&#xff0c;没啥可说的&#xff0c;细心点即可 1779. 找到最近的有相同 X 或 Y 坐标的点 难度简单73收藏分享切换为英文接收动态反馈 给你两个整数 x 和 y &#xff0c;表示你在一个笛卡尔坐标系下的 (x, y) 处。同时&#xff0c;在同一个坐标系下给你一…
阅读更多...
基于verdaccio工具搭建npm私服vue组件库

基于verdaccio工具搭建npm私服vue组件库

大纲 搭建npm私服的必要性搭建npm私服操作步骤发布私有包的过程 一、搭建npm私服的必要性 下载速度更快便于管理&#xff0c;可以分配权限可以修改第三方包&#xff0c;放入我们得私服可以只在公司局域网中用&#xff0c;不公开 二、搭建npm私服的主要操作 环境准备 确保服…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023