要点:
1.这个实例中的布局,通过自定义的栅格系统,模仿bootstrap库,从而做到自己能有自己的库样式思路。
2.像background这个属性,有许多的子属性,要是想要连写的话,如背景图片和平铺,只需写image即可,不需要也不能写成background-image。
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/960_12_col.css">
<!-- 引入整行的12等分样式,类似bootst -->
<style type="text/css">
body{
color: #fff;
background: #413f3b url(images/bg.jpg);
/*这里注意背景颜色跟背景图片同时设定的话,要用background*/
font-family: Georgia,"Times New Roman",Times,serif;
/*通过逗号隔开字体,优先级从前到后*/
font-size: 90%;
text-align: center;
margin: 0px;
}
a{
color: #b5c1ad;
text-decoration: none;
}
a:hover{
color: #fff;
}
.header{
background-image: url(images/bg-header.jpg);
padding: 0;
height: 100px;
position: fixed;
top: 0px;
width: 100%;
/*跟父元素的宽度一样*/
z-index: 999;
/*层级权重*/
}
.nav{
float: right;
font-family: QuicksandBook,Helvetica,Arial,sans-serif;
padding: 45px 0px 0px 0px;
text-align: right;
}
.main{
width: 960px;
margin: 0 auto;
/*居中对齐 */
background: url(images/bg-triangle.png) no-repeat;
/*背景图片如果不想平铺,直接在background中写,不要添加-image*/
background-position: 0px 0px;
text-align: left;
}
.logo{
margin-bottom: 20px;
}
h1,h2{
font-family: QuicksandBook,Helvetica,Arial,sans-serif;
font-weight: normal;
text-transform: uppercase;
/*英文转大写*/
}
h1{
font-size: 240%;
margin-top: 140px;
}
.date{
font-size: 75%;
font-family: Arial,Helvetica,sans-serif;
color: #b5c1ad;
}
.intro{
clear: left;
/*清除浮动*/
font-size: 90%;
line-height: 1.4em;
}
.main-story{
background: url(images/triangles.png) no-repeat;
background-position: 122px 142px;
height: 570px;
}
.more-articles{
border-top: 1px solid #807c72;
padding: 5px 0px 15px 0px;
font-size: 80%;
}
.more-articles p:last-child{
border-bottom: none;
}
.foo