整个网页布局划分为四部分: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;
}
top代码运行图
nav部分
html代码
/* 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;
}
nav代码运行图
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;
}
menu代码运行图
- 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-top代码运行图
- 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 ">
© 版权声明
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究,不得用于商业或者非法用途,否则,一切后果请用户自负;本站信息来自网络收集整理,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除相应的内容;如果您喜欢该内容,请支持正版,得到更好的服务;我们非常重视版权问题,如有侵权请与我们联系,敬请谅解!
邮箱:sanshi@sanshi.link
相关文章
暂无评论...