简介
这是一个简单的案例会把之前博客中讲到的CSS的基本知识串起来，算是一个稍微综合一点的案例了！这里我会详细的每一部分的进行介绍！
分析首页的结构
学成网首页.jpg
从这张图中我们可以看到首页大致分为如下的几个部分：
- 导航栏部分
- 精品推荐部分
- 页面尾部部分
准备工作
CSS初始化
/* css初始化 */
* {
/* 清除所有HTML标记的默认边距 */
margin: 0px;
padding: 0px;
}
.clearfix:before,
.clearfix:after {
/* 清楚浮動 */
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
ul {
/* 清楚li的小圆点 */
list-style: none;
}
a { /* 超链接的样式 */
color: #050505;
text-decoration: none;
}
input {
border: 0; /* 所有的表单边框为0 */
box-sizing: border-box; /* CSS3盒子模型 border 和 padding 都包含到 width 里面去 */
}
.container { /*版心的宽度都是1200，所以集体声明*/
width: 1200px;
margin: 0 auto;
}
/* css初始化结束 */
确定版心的大小
可以使用PS的矩阵选框工具确定
版心的大小.png
如图所示版心的宽为1200px;
导航栏
导航栏的大小为1366px
导航栏的大小.png
可以分为四部分来做：logo、navbar、search、personal
页面结构部分：
CSS的样式部分
/* 页面头开始 */
body {
background-color: #f3f5f7;
}
header {
height: 100px;
overflow: hidden; /* 嵌套的盒字margin合并消除影响 */
}
nav {
width: 1366px;
height: 42px;
margin: 30px auto; /*嵌套的子盒子margin合并*/
}
.logo {
float: left;
}
.navbar {
float: left;
height: 42px;
line-height: 42px; /*让文字水平居中，行高给父亲，行高可以继承*/
margin-left: 50px;
}
.navbar li {
float: left;
font-size: 16px;
}
.navbar li a{
display: block; /*行内元素给高需要转化为行内块*/
padding: 0 9px;/*行内元素不给上下内边距，左右给内边距*/
height: 42px;
}
.navbar li a:hover {
border-bottom: 1px solid #00a4ff; /*鼠标放入底边框*/
}
/* 搜索框部分 */
.search {
width: 410px;
height: 38px;
border: 1px solid #00a4ff;
float: right;
}
.search input[type=text] { /*属性选择器*/
width: 360px;
height: 38px;
padding-left: 20px;
box-sizing: border-box; /*css3的属性，防止padding撑大盒子*/
float: left; /*文本框属于行内元素，行内元素之间并排显示，中间有空隙，所以添加浮动*/
}
.search input[type=submit] {
width: 50px;
height: 38px;
float: left;
background: #00a4ff url(images/search_06.png) no-repeat center center;
}
/*个人中心部分*/
.personal {
float: right;
height: 42px;
line-height: 42px; /* 这个行高给父亲， 行高会继承 */
margin: 0 15px 0 35px; /* 上0 右 15 下0 左 35 */
}
.personal img {
margin: 0 8px;
vertical-align: middle; /*用来控制图片/表单与文字的对齐*/
}
/* 个人中心部分结束 */
其中需要注意的几个点是：
- 因为页面的底色不是白色所以给body一个大的背景色#f3f5f7
- 导航使用的是ul>li>a的形式
- head里面嵌套着nav盒子，使用overflow: hidden消除影响
- 是文字文水平居中对齐时，行高可以给父亲盒子，并且此时不用给父盒子高度，行高是可以继承的
-
box-sizing: border-boxcss3的属性，防止padding撑大盒子 -
vertical-align: middle用来控制图片/表单与文字的对齐
banner部分
结构
css样式为：
/* banner开始 */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px ;
background: url(images/banner_03.png) 0 0 no-repeat;
position: relative;
}
.slidebar {
height: 420px;
width: 190px;
background-color: rgba(0,0,0,0.3); /* 盒字背景半透明*/
float: left;
}
.slidebar li a {
color: #fff;
font-size: 14px;
padding: 0 20px; /*上下0 左右20px*/
display: block;
height: 45px;
line-height: 45px; /*大多数情况下有了行高就不需要给定高度*/
}
.slidebar li a span {
float: right;
font-family: arial; /*符号一般使用这个字体*/
}
.slidebar li a:hover {
color: #00a4ff;
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.timetable dt {
height: 50px;
background-color: #9bceea;
text-align: center; /*文字水平居中*/
line-height: 50px;
color: #fff;
font-weight: 700;
letter-spacing: 2px; /*设置字间距*/
margin-bottom: 5px;
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top:12px;
box-sizing: border-box;
}
.timetable dd h4{
font-weight: normal;
font-size: 16px;
color: #4e4e4e;
}
.timetable dd p {
color: #a5a5a5;
font-size: 14px;
}
.timetable dd:last-child {
border: 0; /*消除最后一个底边框*/
}
.timetable dd a {
display: block;
height: 38px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700;
}
.timetable dd a:hover {
background-color: #00a4ff;
color: #fff;
}
/* 小圆点模块 */
.circle {
width: 180px;
height: 22px;
position: absolute;
bottom: 10px;
left: 50%; /*父盒子宽度的一半*/
margin-left: -90px; /*自己宽度的一半*/
}
.circle li {
float: left;
width: 12px;
height: 12px;
margin: 6px 8px;
border-radius: 50%;
background-color: rgba(255,255,255,0.4);
}
/* banner结束 */
注意点：
- 因为banner里面有个透明的盒子，和课程表，使用子绝父相进行定位
- 盒子背景半透明的写法需要注意
-
font-family: arial; 符号一般使用这个字体 - 子盒子水平居中对齐的方法
精品推荐模块
结构
精品推荐
查看全部
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
CSS样式：
/* 精品推荐开始 */
.recommand {
height: 60px;
background-color: #fff;
margin-top: 8px;
line-height: 60px;
/* 盒子阴影 水平位置 垂直位置 模糊距离 影子颜色 */
box-shadow: 0 2px 2px rgba(0,0,0,0.2)
}
.recommand a {
padding: 0 30px;
/* 行内元素可以设置border */
border-right: 1px solid #ccc;
}
.recommand a:hover {
color: #00a4ff;
}
.recommand a:first-child {
color: #00a4ff;
font-weight: 700;
}
.recommand a:last-child {
float: right;
border: 0;
color: #00a4ff;
}
.recom-products {
margin-top: 35px;
}
.recom-hd h4 {
float: left;
color: #494949;
}
.recom-hd a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.recom-hd a:hover {
color: #00a4ff;
}
.recom-bd ul li,
.prom-bd-l-bottom ul li {
width: 228px;
height: 270px;
background-color:#fff;
overflow: hidden; /*溢出的部分隐藏*/
/* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影； */
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
float: left;
margin-right: 15px;
margin-top: 15px;
}
.recom-bd ul li:nth-child(5n) { /*第五个第十个的外边距为0*/
margin-right: 0;
}
.recom-bd ul li h5,
.recom-bd ul li p,
.prom-bd-l-bottom ul li h5,
.prom-bd-l-bottom ul li p {
padding: 0 20px 0 24px;
margin-top: 12px;
}
.recom-bd ul li h5,
.prom-bd-l-bottom ul li h5 {
line-height: 22px;
font-weight: normal;
font-size: 14px;
}
.recom-bd ul li p ,
.prom-bd-l-bottom ul li p {
font-size: 12px;
color: #999;
}
.recom-bd span,
.prom-bd-l-bottom ul li p span {
color: #ff7c2d;
}
/* 精品推荐结束 */
需要注意的是
- 精品推荐的大模块是使用的是父盒子不给高度，让子盒子撑大父盒子此时需要清除浮动
- 注意靠最右边的盒子是如何清除边距的
入门编程部分
结构
样式
/* 编程入门开始 */
.programer {
margin-top: 35px;
}
.progm-hd h4 {
float: left;
color: #494949;
margin-right: 352px;
}
.progm-hd > a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.progm-hd a:hover {
color: #00a4ff;
}
.progm-hd ul {
float: left;
}
.progm-hd ul li{
float: left;
font-size: 16px;
padding: 0 36px;
}
.progm-hd ul li a{
color: #a7a8a9;
}
.prom-bd {
margin-top: 15px;
}
.prom-bd-l {
width: 228px;
height: 390px;
float: left;
margin-right: 15px;
overflow: hidden;
}
.prom-bd-r {
float: right;
}
.prom-bd-l-bottom ul li:nth-child(4n) {
margin-right: 0;
}
注意：
- 注意结构是如何划分的
- css的样式代码和之前的精品推荐有重叠的部分，大部分一致
底部
结构
样式css
/* 页面底部分 */
.footer {
height: 270px;
background-color: #ffffff;
margin-top: 100px;
}
.footer-in {
padding-top: 30px; /*盒子没有给高度不用担心撑开盒子*/
}
.footer-l {
float: left;
}
.footer-l p {
font-size: 12px;
line-height: 18px;
color: #999;
margin-top: 20px;
}
.footer-l a {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
font-size: 16px;
line-height: 33px;
margin-top: 15px;
}
.footer-r {
float: right;
color: #333;
}
.footer-r dl {
float: left;
width: 225px;
}
.footer-r dt {
font-size: 16px;
height: 30px;
}
.footer-r dd {
font-size: 12px;
height: 20px;
}
.footer-r dd a:hover {
color: #00a4ff;
text-decoration: underline; /* 添加下划线 */
}
注意
- 这里最值得学习的地方时高度和宽度剩余法
结果
学成在线首页.gif