#头条创作挑战赛#
#大有学问#
整个网页布局划分为四部分：top、nav、main、footer。
确定公共CSS部分
/* 清除浏览器默认设置 */
* {
margin:
0;
padding:
0;
}
/* 背景颜色 */
body {
font-family:
Microsoft YaHei;
background-color:
#f3f6f6;
}
.bGw {
background-color:
#ffffff;
}
/* li标签 */
dl,
li {
list-style: none;
float: left;
}
/* 标题标签 */
h3 {
font-weight:
400;
}
/* a标签 */
a {
text-decoration: none;
color:
#050505;
}
img {
/* 消除图片与其他盒子之间的缝隙 */
display: block
!important;
}
/* 版心宽度 */
.boxBX {
width:
1200px;
margin:
0 auto;
}
/* 浮动 */
.fL {
float: left;
}
.fR {
float: right;
}
/* 清除浮动 */
.clearF {
overflow: hidden;
}
/* 字体大小 */
.fS12 {
font-size:
12px;
}
.fS14 {
font-size:
14px;
}
.fS16 {
font-size:
16px;
}
.fS18 {
font-size:
18px;
}
.fS20 {
font-size:
20px;
}
/* 字体颜色 */
.fCfff {
color:
#ffffff;
}
.fC050505 {
color:
#050505;;
}
/* 鼠标悬停效果 */
.main-center a:hover,
.main-bottom a:hover,
.fC00a4ff {
color:
#00a4ff;
}
.fC494949 {
color:
#494949;
}
.fCa5a5a5 {
color:
#a5a5a5;
}
.fCff7c2d {
color:
#ff7c2d;
}
.fC999999 {
color:
#999999;
}
.fC868686 {
color:
#868686;
}
.fC666666 {
color:
#666666;
}
.fC333333 {
color:
#333333;
}
/* margin值 */
.mR0 {
margin-right:
0px !important;
}
.mL0 {
margin-left:
0px !important;
}
.mB21 {
margin-bottom:
21px;
}
.mB15 {
margin-bottom:
15px;
}
.mB22 {
margin-bottom:
22px;
}
.mB41 {
margin-bottom:
41px;
}
/* padding值 */
.pT0 {
padding-top:
0 !important;
}
top部分
<div class="top boxBX clearF">
<img src="./images/logo.png" alt="" class="logo fL">
<ul class="fL fS18">
<li><a href="#">首页
</a></li>
<li><a href="#">课程
</a></li>
<li><a href="#">职业规划
</a></li>
</ul>
<div class="search fS14 fL">
<input type="search" value="输入关键词" class="fL">
<img src="./images/search_03.png" alt="" class="fR">
</div>
<div class="user fL">
<img src="./images/头像.png" alt="" class="fL">
<span href="#" class="fS14 fL">qq-leishui
</span>
</div>
</div>/* top部分 */
.top {
height:
42px;
padding:
30px 0;
}
.top .logo {
width:
190px;
}
.top ul {
line-height:
38px;
margin-left:
75px;
}
.top a {
color:
#050505;
padding:
10px;
margin-right:
25px;
}
.top a:hover {
border-bottom:
2px solid
#00a5fe;
}
.search {
width:
410px;
height:
40px;
margin-left:
60px;
border:
1px solid
#00a4fe;
}
.search input {
width:
360px;
height:
38px;
background-color:
#f3f6f6;
border: none;
color:
#bfbfbf;
padding-left:
19px;
/* 去除search标签在获取焦点时出现的黑色外边框 */
outline: none;
}
.user {
width:
120px;
color:
#666666;
margin-left:
30px;
line-height:
42px;
}
.user img {
padding:
6px 5px;
}
nav部分
/* nav */
.nav {
height:
420px;
background-color:
#1c056c;
}
.nav-bgimg {
height:
420px;
background-image:
url(../images/banner2.png);
}
.nav-left {
width:
150px;
padding:
24px 20px 0px;
background:
rgba(
0,
0,
0,
0.3);
}
.nav-left li {
width:
150px;
height:
44px;
}
.nav-left a,
.nav-left span {
color:
#ffffff;
}
.nav-left a.liTs,
.nav-left span.liTs {
color:
#00b4ff;
}
.nav-center {
width:
170px;
margin:
373px 0 34px 298px;
}
.nav-center li {
width:
13px;
height:
13px;
border-radius:
13px;
margin-right:
15px;
background:
rgba(
255,
255,
255,
0.4);
}
.nav-center .liW21 {
width:
21px;
background-color:
#ffffff;
}
.nav-right {
width:
228px;
height:
300px;
margin:
50px 0 70px;
}
.nav-right h3 {
height:
48px;
font-weight:
600;
background-color:
#9acfea;
text-align: center;
line-height:
48px;
}
.nav-right-bottom {
padding:
11px 14px;
}
.nav-right-bottom li {
width:
200px;
height:
40px;
padding:
10px 0;
border-bottom:
1px solid
#efefef;
}
.nav-right-bottom p {
color:
#4e4e4e;
}
.nav-right-bottom .mL {
margin-left:
8px;
}
.nav-right-bottom .fCa5 {
color:
#a5a5a5;
}
.nav-right-bottom .but {
width:
198px;
height:
38px;
color:
#00a4ff;
font-weight:
600;
text-align: center;
line-height:
38px;
border:
1px solid
#23b1fe;
margin-top:
5px;
}
main部分
所有main的内容都包含在main总盒子中。
main内容太多无法完全在一个代码块里写，提前把总盒子摘出来。逐个写各部分的代码。
<div
class=
"main boxBX">
</div>menu部分<div
class=
"menu bGw">
<ul class="menu-left fS16 fL">
<li><a href="#" class="fC00a4ff liTsOne">精品推荐</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">Spark</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">JavaWeb</a></li>
<li><a href="#">MySQL</a></li>
<li class="liBorN"><a href="#">JavaWeb</a></li>
</ul>
<a href="#" class="menu-right fS14 fC00a4ff fR">修改兴趣</a>
</div>.menu {
height:
16px;
box-shadow:
2px 2px 2px rgba(
0,
0,
0,
0.2);
padding:
22px 0;
margin:
8px 0 35px;
}
.menu-left {
width:
895px;
}
.menu-left li {
padding:
0 34px;
border-right:
1px solid
#bfbfbf;
}
.menu-left .liTsOne {
font-weight:
600;
}
.menu-left .liBorN {
border-right: none;
}
.menu-right,
.footer-right {
margin-right:
27px;
}
main-top<!-- main-top模块 -->
<div class="main-top">
<!-- 精品推荐标题 -->
<div class="mB21 clearF">
<h3 class="fL fS20 fC494949">精品推荐
</h3>
<a href="#" class="fR pB fS12 fCa5a5a5">查看全部
</a>
</div>
<!-- 精品推荐内容第一行 -->
<ul class="liHover mB15 clearF">
<li>
<img src="./images/Jp1.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Jp2.png" alt="">
<a href="#">
<p class="fS14 fC050505">Android 网络图片加载框架详解
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Jp3.png" alt="">
<a href="#">
<p class="fS14 fC050505">Angular 2 最新框架+主流技术+项目实战
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Jp4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li class="mL0 mR0">
<img src="./images/Jp4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
</ul>
<!-- 精品推荐内容第二行 -->
<ul class="liHover clearF">
<li>
<img src="./images/Jp1.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Jp2.png" alt="">
<a href="#">
<p class="fS14 fC050505">Android 网络图片加载框架详解
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Jp3.png" alt="">
<a href="#">
<p class="fS14 fC050505">Angular 2 最新框架+主流技术+项目实战
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Jp4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
<li class="mR0">
<img src="./images/Jp4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 pT0">
<span class="fCff7c2d">高级
</span>
·
<span class="fC999999">1125人在学习
</span>
</p>
</a>
</li>
</ul>
</div>.main-top {
margin-bottom:
38px;
}
.pB {
line-height:
26px;
padding-right:
27px;
}
/* 课程nav */
.liHover {
height:
282px;
}
.liHover li {
width:
228px;
background-color: white;
margin-right:
12px;
margin-left:
2px;
}
.liHover li:hover {
box-shadow:
0 0 2px 2px #c0c3c3;
}
.liHover img {
width:
228px;
height:
155px;
}
.liHover p {
height:
30px;
padding:
20px 24px 20px;
}
main-center部分<!-- main-center模块 -->
<div class="main-center">
<!-- 编程入门标题 -->
<div class="mB21 clearF">
<h3 class="fL fS20 fC494949">编程入门
</h3>
<ul class="main-center-nav">
<li><a href="#" class="fS16 fC868686">热门
</a></li>
<li><a href="#" class="fS16 fC868686">初级
</a></li>
<li><a href="#" class="fS16 fC868686">中级
</a></li>
<li class="mR0"><a href="#" class="fS16 fC868686">高级
</a></li>
</ul>
<a href="#" class="fR pB fS12 fCa5a5a5">查看全部
</a>
</div>
<!-- 编程入门内容 -->
<div class="mB41 clearF">
<img src="./images/Bc1.png" alt="" class="bC1 fL">
<div class="main-center-main fR">
<img src="./images/Bc2.png" alt="" class="bC2 mB22 ">
<ul class="liHover clearF">
<li>
<img src="./images/Bc4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">中级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Bc5.png" alt="">
<a href="#">
<p class="fS14 fC050505">Android 网络图片加载框架详解
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">中级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Bc6.psb.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">中级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li class="mL0 mR0">
<img src="./images/bc7.png" alt="">
<a href="#">
<p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">中级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 数据分析师标题 -->
<div class="mB21 clearF">
<h3 class="fL fS20 fC494949">数据分析师
</h3>
<ul class="main-center-nav">
<li><a href="#" class="fS16 fC868686">热门
</a></li>
<li><a href="#" class="fS16 fC868686">初级
</a></li>
<li><a href="#" class="fS16 fC868686">中级
</a></li>
<li class="mR0"><a href="#" class="fS16 fC868686">高级
</a></li>
</ul>
<a href="#" class="fR pB fS12 fCa5a5a5">查看全部
</a>
</div>
<!-- 数据分析师内容 -->
<div class="mB41 clearF">
<img src="./images/SJ1.png" alt="" class="bC1 fL">
<div class="main-center-main fR">
<img src="./images/Sj2.png" alt="" class="bC2 mB22 ">
<ul class="liHover clearF">
<li>
<img src="./images/Bc5.png" alt="">
<a href="#">
<p class="fS14 fC050505">Kami2首页界面切换效果
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/bc4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Android Hybrid APP 开发实战 H5+原生 ！
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/bc7.png" alt="">
<a href="#">
<p class="fS14 fC050505">Cocos2d-x 引擎源码中的纹理优化
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li class="mL0 mR0">
<img src="./images/Bc6.psb.png" alt="">
<a href="#">
<p class="fS14 fC050505">Unity Profiler入门
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">中级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>.main-center-nav {
width:
340px;
margin:
0 auto;
}
.main-center-nav li {
line-height:
26px;
margin-right:
50px;
}
.main-center .bC1 {
width:
228px;
height:
392px;
}
.main-center .bC2 {
width:
956px;
height:
100px;
}
.main-center-main {
width:
956px;
}
main-bottom部分<!-- main-bottom模块 -->
<div class="main-bottom">
<!-- 机器学习工程师标题 -->
<div class="mB21 clearF">
<h3 class="fL fS20 fC494949">机器学习工程师
</h3>
<ul class="main-center-nav">
<li><a href="#" class="fS16 fC868686">热门
</a></li>
<li><a href="#" class="fS16 fC868686">初级
</a></li>
<li><a href="#" class="fS16 fC868686">中级
</a></li>
<li class="mR0"><a href="#" class="fS16 fC868686">高级
</a></li>
</ul>
<a href="#" class="fR pB fS12 fCa5a5a5">查看全部
</a>
</div>
<!-- 机器学习工程师内容 -->
<ul class="liHover mB41 clearF">
<li>
<img src="./images/bc4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Android Hybrid APP 开发实战 H5+原生 ！
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">初级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/bc7.png" alt="">
<a href="#">
<p class="fS14 fC050505">Cocos2d-x 引擎源码中的纹理优化
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Bc6.psb.png" alt="">
<a href="#">
<p class="fS14 fC050505">Unity Profiler入门
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">中级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Sj3.png" alt="">
<a href="#">
<p class="fS14 fC050505">微软人工只能-数据分析平台
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li class="mL0 mR0">
<img src="./images/Bc5.png" alt="">
<a href="#">
<p class="fS14 fC050505">Kami2首页界面切换效果
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
</ul>
<!-- 前端开发工程师标题 -->
<div class="mB21 clearF">
<h3 class="fL fS20 fC494949">前端开发工程师
</h3>
<ul class="main-center-nav">
<li><a href="#" class="fS16 fC868686">热门
</a></li>
<li><a href="#" class="fS16 fC868686">初级
</a></li>
<li><a href="#" class="fS16 fC868686">中级
</a></li>
<li class="mR0"><a href="#" class="fS16 fC868686">高级
</a></li>
</ul>
<a href="#" class="fR pB fS12 fCa5a5a5">查看全部
</a>
</div>
<!-- 前端开发工程师内容 -->
<ul class="liHover mB41 clearF">
<li>
<img src="./images/Sj3.png" alt="">
<a href="#">
<p class="fS14 fC050505">微软人工只能-数据分析平台
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Bc6.psb.png" alt="">
<a href="#">
<p class="fS14 fC050505">Unity Profiler入门
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/bc7.png" alt="">
<a href="#">
<p class="fS14 fC050505">Cocos2d-x 引擎源码中的纹理优化
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li>
<img src="./images/Bc5.png" alt="">
<a href="#">
<p class="fS14 fC050505">Kami2首页界面切换效果
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
<li class="mL0 mR0">
<img src="./images/bc4.png" alt="">
<a href="#">
<p class="fS14 fC050505">Android Hybrid APP 开发实战 H5+原生 ！
</p>
<p class="fS12 fC999999 pT0">
<span class="fCff7c2d">高级
</span>
<span class="fS16"> ·
</span>
<span>1125人在学习
</span>
</p>
</a>
</li>
</ul>
</div>
这部分是直接调用的现有选择器，没有添加新的css代码。
footer部分
<div
class=
"footer bGw">
<div class="boxBX">
<div class="footer-left fS12 fC666666 fL">
<img src="./images/logo.png" alt="" class="mB22">
<p>
学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
</p>
<p class="mB15">
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
</p>
<a href="#" class="aBlock fS16 fC00a4ff">下载APP</a>
</div>
<div class="footer-right fR">
<dl>
<dt class="fS16 fC333333 mB15">关于学成网</dt>
<dd><a href="#" class="fS12 fC333333">关于</a></dd>
<dd><a href="#" class="fS12 fC333333">管理团队</a></dd>
<dd><a href="#" class="fS12 fC333333">工作机会</a></dd>
<dd><a href="#" class="fS12 fC333333">客户服务</a></dd>
<dd><a href="#" class="fS12 fC333333">帮助</a></dd>
</dl>
<dl>
<dt class="fS16 fC333333 mB15">新手指南</dt>
<dd><a href="#" class="fS12 fC333333">如何注册</a></dd>
<dd><a href="#" class="fS12 fC333333">如何选课</a></dd>
<dd><a href="#" class="fS12 fC333333">如何拿到毕业证</a></dd>
<dd><a href="#" class="fS12 fC333333">学分是什么</a></dd>
<dd><a href="#" class="fS12 fC333333">考试未通过怎么办</a></dd>
</dl>
<dl class="mR0">
<dt class="fS16 fC333333 mB15">合作伙伴</dt>
<dd><a href="#" class="fS12 fC333333">合作机构</a></dd>
<dd><a href="#" class="fS12 fC333333">合作导师</a></dd>
</dl>
</div>
</div>
</div>.footer {
height:
384px;
padding-top:
33px;
}
.footer-left {
width:
450px;
}
.aBlock {
display: block;
width:
118px;
height:
34px;
border:
1px solid
#23b1fe;
text-align: center;
line-height:
34px;
}
.footer dl {
margin-right:
150px;
}
小总结：
img元素在实际使用中，与周围元素会产生空白间隙。
解决方法：将img元素变为块元素即可。
好了，以上就是这几天的学习成果，虽然做的慢，但是能做出来还是有些成就感的，哈哈。
这个页面上有两个定位没有去做，等学习定位之后再补上吧。
下次准备开始学习定位。
以上就是小编为大家整理的HTML+CSS小案例学成在线之实战代码，想要了解更多优质的相关资讯，请大家多多关注"大世界日记"。
