文章目录
一、css属性书写顺序
1.布局定位属性
display/position/float/clear/visibility/overflow
2.自身属性
width/height/margin/padding/border/background
3.文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性（CSS5）
content/cursor/border-radius/box-shadow/text-shadow
示例
二、页面布局整体思路
- 确定页面版心
- 分析页面中的行模块，以及每个行模块中的列模块
- 一行中的列模块经常用浮动布局，先确定每个列的大小，再确定列的位置
- 制作HTML结构，遵循先有结构，后有样式的原则，结构最重要
- 先理清布局结构，再去写代码
三、header区域制作
<!-- header部分start -->
<div class="header w">
<!-- 用了两个类名，同时拥有两个的样式 -->
<!-- logo部分 -->
<!-- 先确定每个列盒子大小，再确定位置 -->
<div class="logo">
<img src="images/logo.png">
</div>
<!-- 导航栏部分 .nav -->
<!-- 导航栏不会直接用a,而是用(li+a)的做法 -->
<!-- 每个列都是一个盒子 -->
<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="images/usre.png" alt="">
qq-lilei
</div>
</div>
<!-- header部分end -->
* {
/* 页面内外边距清零 */
margin: 0;
padding: 0;
}
.w
{
/* 公共类，设施版心宽度以及居中 */
width: 1200px;
margin: auto;
}
body
{
/* 整个页面背景有一个底色 */
background-color: #f3f5f7;
}
li{
list-style: none;
}
a{
/* 去除所有链接下划线 */
text-decoration: none;
}
.header
{
height: 42px;
/* 上下边距为30px,居中 同时注意层叠性 .header的margin会层叠.w的margin*/
margin: 30px auto;
/* background-color: pink; */
}
.logo{
/* 一行里遵循一浮全浮 */
float: left;
width: 198px;
height: 42px;
/* background-color: #fff; */
}
.nav{
/* 导航栏不用给宽度，任何一个盒子，加了浮动之后，自动转为行内块元素 */
/* 将来可以继续加其他文字 */
/* 设置盒子浮动 */
float:left;
margin-left: 60px;
}
.nav ul li{
/* 想让导航栏里的文字一行显示，将li浮动，因为li是块级元素 */
float:left;
margin:0 15px;
}
.nav ul li a{
/* 转化为行内元素 */
display: inline;
/* 转化为块级元素 display: block; */
/* 转化为行内块元素 display: inline-block */
height: 42px;
/* 内边距上下为0，左右为10px */
/* 因为导航栏里的文字不一样多 */
/* 用同一宽度不合适，用padding撑开盒子更美观 */
padding: 0 10px;
/* 文字垂直居中 */
line-height: 42px;
font-style: 18px;
color: #050505;
}
.nav ul li a:hover{
/* 下边框 */
border-bottom: 2px solid #00a4ff;
color:#00a4ff;
}
/* search搜索框 */
.search {
float:left;
height: 42px;
width: 411px;
/* background-color: blue; */
margin-left: 70px;
}
.search input{
float: left;
/* 360-15 不然会覆盖按钮区*/
width: 345px;
/* 注意边框会撑大上下边距 */
height: 40px;
border: 1px solid #00a4ff;
/* 去掉右边框 */
border-right: 0;
font-size: 14px;
color: #bfbfbf;
/* 盒子本身有宽度 会撑大盒子 */
padding-left: 15px;
}
.search button{
float: left;
/* 行内块元素之间有个空隙，给两个行内块元素加浮动去除空隙 */
width: 50px;
height: 42px;
/* 按钮button默认有个边框需要我们收到去掉 */
border: 0;
/* 背景图 */
background: url(images/btn.png);
}
.user{
float: right;
line-height: 42px;
margin-right: 30px;;
font-size: 14px;
color: #666666;
}
四、banner制作
1.整体结构
2.代码
结构
<!-- banner部分start -->
<div class="banner">
<!-- 版心部分 -->
<div class="w">
<!-- 侧导航栏 -->
<div class="subnav">
<ul>
<!-- a盒子里放了一个span盒子，让右浮动 -->
<li><a href="#">前端开发<span>></span></a></li>
<!-- >是> <是< -->
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
</ul>
</div>
<!-- course课程部分 -->
<div class="course">
<!-- course部分标题 -->
<h2>我的课程表</h2>
<!-- course部分内容 -->
<!-- 上面三个很对称，用li -->
<!-- 下面全部课程用链接a -->
<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 -->
样式
/* banner部分 */
.banner{
height: 421px;
background-color: #13014b;
}
.banner .w{
height: 421px;
/* background-color: pink; */
/* 背景图片 无需重复 垂直向上 水平居中 */
background: url(images/banner2.png) no-repeat top center;
}
.subnav
{
/* 一行内一浮全浮 */
float:left;
height: 421px;
width: 190px;
/* 半透明背景 */
background: rgba(0,0, 0, 0.3);
}
.subnav ul li{
height: 45px;
/* 文字行高 */
line-height: 45px;
/* 上下 左右 */
/* 只给了高度没给宽度，padding不会撑开宽度 */
padding: 0 20px;
}
.subnav ul li a{
font-size: 14px;
color: #fff;
}
.subnav ul li a span{
/* 箭头不会到阴影框最右边，因为padding 给的是li */
/* 而span是在a中的，是在a的最右侧 */
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;
/* 标题标签给背景颜色也是一个盒子 */
background-color: #9bceea;
/* 文字水平居中 */
text-align: center;
/* 文字垂直居中 */
line-height: 48px;
font-size: 18px;
color: #ffffff;
}
.course .bd{
padding: 0 20px;
}
.course .bd ul li{
/* height: 66px; */
padding: 14px 0;
/* 下边框 */
border-bottom: 1px solid #ccc;
}
.course .bd ul h4{
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p{
font-size: 12px;
color: #a5a5a5;
}
.bd .more{
/* a本身属于行内元素，没有大小，所以转成块元素 */
display: block;
height: 38px;
/* 矩形边框 */
border: 1px solid #00a4ff;
margin-top: 5px;
line-height: 38px;
text-align: center;
color: blue;
font-size: 16px;
font-weight: 700;
}
五、精品推荐小模块
1.整体结构
2.代码
<!-- 3.精品推荐部分start -->
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<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> <a href="#"> JavaWeb</a></li>
</ul>
<a href="#" class="mod">修改兴趣</a>
</div>
<!-- 精品推荐部分end -->
/* 3.精品推荐部分 */
.goods{
height: 60px;
background-color: #fff;
margin-top: 10px;
/* 盒子阴影 水平：0 垂直：4 模糊距离：3 3 颜色为半透明效果*/
box-shadow: 0 2px 3px 3px rgba(0,0, 0, 0.1);
/* 父盒子的行高会继承 */
line-height: 60px;
}
.goods h3{
float: left;
margin-left: 35px;
color: #00a4ff;
}
.goods ul{
float: left;
margin-left: 30px;
}
.goods ul li{
float: left;
}
.goods ul li a{
/* 上下 左右 */
padding: 0 30px;
/* 给a制定一个左边框 */
border-left: 1px solid #ccc;
font-size: 16px;
color: #050505;
}
.mod{
margin-right: 28px;
float: right;
color: #00a4ff;
font-size: 14px;
}
六、box核心内容区域
1.整体结构
2.代码
<!-- 4.box核心内容区域start -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</ul>
</div>
</div>
<!-- 4.box核心内容区域end -->
/* box核心内容区域 */
.box{
margin-top: 45px;
height: 600px;
/* background-color: pink; */
}
.box-hd{
height: 45px;
}
.box-hd h3{
float: left;
font-size: 20px;
color: #494949;
font-weight: 500;
}
.box-hd a{
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 32px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul{
/* 230+15=245*5=1225 */
width: 1225px;
}
.box-bd ul li{
float: left;
width: 228px;
height: 270px;
margin-bottom: 15px;
margin-right: 15px;
background-color: #fff;
}
.box-bd ul li img{
/* 这样图就不会超出盒子 */
width: 100%;
}
.box-bd ul li h4{
/* 上右下左 */
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 500;
}
.box-bd .info{
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd .info span{
color: #ff7c2d;
}
七、尾部制作
1.整体结构
1543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
