CSS3案例黑马程序员—学成在线

要点：

1.直接只用<header><nav>等CSS3新标签

2.使用新的盒子模型border-box内减式模型，不用再来回设置盒子大小

3.过渡效果和动画效果的联合使用，不考虑兼容

base.css

*{
	box-sizing: border-box;
	/*全部定义为内减式盒子模型*/
}
a{
	text-decoration: none;
}
body{
	background-color: #F7F4F4;
}
li{
	margin: 0;
	padding: 0;
	list-style: none;
}
img{
	border: 0;
	vertical-align: middle;
	/*主要是为了解决图片和文字之间的垂直居中问题*/
}
.w{
	width: 1200px;
	margin: auto;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?rsc7tj');
  src:  url('../fonts/icomoon.eot?rsc7tj#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?rsc7tj') format('truetype'),
    url('../fonts/icomoon.woff?rsc7tj') format('woff'),
    url('../fonts/icomoon.svg?rsc7tj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/*引入字体图标,一定要注意调用fonts文件夹路径一定要正确*/
.mySyllabus dl,.mySyllabus dd,.mySyllabus dt{
	padding: 0;
	margin: 0;
}
.mySyllabus h5,.mySyllabus a,.mySyllabus ul,.mySyllabus li{
	padding: 0;
	margin: 0;
}
.pro-bd li,.pro-bd ul{
	margin: 0;
	padding: 0;
}

normalize.css(不好用，建议下次直接使用京东小米的，放在最后)

index.css代码：

header{
	width: 1300px;
	height: 100px;
	margin: 0 auto;
	padding-top: 30px;
	/*如果是传统盒子的模型，盒子会变大，就要回去将盒子宽高定义的小一点
	在base中将所有的元素定义为内减式的盒子模型*/
}
.logo{
	width: 195px;
	height: 42px;
	float: left;
}
.logo a{
	display: block;
	width: 195px;
	height: 42px;
	background: url(../img/logo.png) no-repeat;
	text-indent: -999px;
	overflow: hidden;
	/*怕屏幕页面缩小会暴露出来*/
}

nav{
	float: left;
}
nav li{
	float: left;
	height: 40px;
	line-height: 40px;
	margin-left: 25px;
}
nav li a{
	display: block;
	height: 40px;
	font-size: 18px;
	padding: 0 10px;
	color: #000;
}
nav li a:hover{
	border-bottom: 2px solid #00a4ff; 
}

.search{
	width: 410px;
	height: 40px;
	float: left;
	margin-left: 80px;
	padding-top: 18px;
}
.search input{
	width: 361px;
	height: 40px;
	border: 1px solid #00a4ff;
    outline: none;
    padding-left: 10px;
    float: left;
}
.search button{
	width: 49px;
	height: 40px;
	border: 0;
	outline: none;
	float: left;
	background: url(../img/fa-search.png) no-repeat;
}

.personal{
	float: right;
	height: 40px;
	line-height: 40px;
}
.personal dt,.personal dd{
	float: left;
}
.personal s{
	position: relative;
	padding-right: 30px;
}
.personal s::before{
	content: "";
	display: block;
	position: absolute;
	/*这两步基本是必备的选项，因为伪元素默认
	是行内的元素，如果要插入一些东西。需要这两个*/
	width: 6px;
	height: 6px;
	right: 13px;
	top: 0;
	background-color: red;
	border-radius: 50%;
}
.personal span img{
	border-radius: 50%;
}


/*顶部通栏模块*/


.banner{
	height: 420px;
	background-color: #1c036c;
}
.inner{
	height: 420px;
	position: relative;
}
.subnav{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 190px;
	background: rgba(0,0,0,.2);
	padding-top: 20px;
}
.subnav a{
	font-size: 14px;
	color: #fff;
}
.subnav li{
	position: relative;
	display: block;
}
.subnav i{
	font-family: "icomoon";
	color: #fff;
	font-style: normal;
	font-size: 14px;
	line-height: 14px;
	position: absolute;
	top: 0;
	right: 20px;
}
.subnav ul li a:hover{
	color: #00b4ff;
}
/*侧边栏模块*/

.circle{
	width: 176px;
	height: 20px;
	position: absolute;
	left: 50%;
	/*margin-left: -88px;*/
	transform: translate(-50%);
	/*上面注释需要自己计算，这样就水平向左移动了自己盒子的一半
	第二个垂直属性不写，其默认为0*/
	bottom: 15px;
}
.circle i {
	display: inline-block;
	width: 13px;
	height: 13px;
	background: rgba(255,255,255,.4);
	margin: 0 5px;
	border-radius: 50%;
	/*高度的50%如果是正方形，可以形成圆*/
	transition: all 0.4s;
}
.circle .current, i:hover{
	width: 20px;
    border-radius: 6px;
    /*这里直接写50%会成椭圆，直接定义为高度的一半，可以形成圆角*/
    background-color: #fff;
}
/*侧边栏模块*/

.mySyllabus{
	width: 228px;
	height: 300px;
	position: absolute;
	right: 0;
	top: 50%;
	transform:translateY(-50%);
	background-color: #fff;
}
.mySyllabus dl dt{
    height: 50px;
    background-color: #9bceea;
    font-weight: 700;
    color: #fff;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
}
.mySyllabus dd{
    padding: 15px 20px 0;
}
.mySyllabus dd li{
	height: 60px;
	border-bottom: 1px solid #ccc;
	padding-top: 6px;
}
.mySyllabus dd li:last-child{
	border: 0;
}
.mySyllabus h5{
	font-size: 15px;
	font-weight: normal;
}
.mySyllabus p{
    font-size:12px;
}
.mySyllabus .all{
	height: 40px;
	border: 1px solid #22b0ff;
	color: #22b0ff;
	display: block;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
}
.mySyllabus .all:hover{
	background-color: #22b0ff;
	color: #fff;
}


/*导航栏模块*/

.recommend{
	margin-top: 10px;
	height: 60px;
	line-height: 60px;
	position: relative;
	background-color: #fff;
	box-shadow: 0px 1px 12px rgba(0,0,0,.4);
	/*阴影非常不好调，可以先在浏览器中，用开发工具写
	边试边看效果*/
}
.rec-1{
	padding-left: 30px;
}
.rec-1 a{
    color: #000;
	margin: 0 15px;
	font-size: 14px;
}
.rec-1 a:hover{
	color: #22b0ff;
}
.rec-1 a:first-child{  
	color: #22b0ff;
	font-size: 14px;
	margin-right: 15p