第1章 网页布局的三个阶段和CSS基本概念
1.1网页布局的三个阶段
1. table网页设计内容和样式（外观和布局）混合
2. table+CSS网页设计table布局。CSS指定外观
3. div+CSS网页设计，div放内容，CSS指定样式（外观和布局），内容和样式彻底分离
1.2CSS基本概念：
CSS（cascading style sheet，层叠样式表）是一种制作网页的新技术，现在已经为大多是浏览器所支持，成为网页设计必不可少的工具之一
1.3CSS的优点：
1. 使网页代码更少，网页下载更快
2. 实现了内容与样式的分离，使网站维护更加便捷
3. 使网页与浏览器的兼容性更好
1.4CSS语法结构
每个CSS样式两部分组成L：选择器和声明，声明又包括属性和属性值，每个声明之后用分号结束
第2章 CSS的三种引入方式：
2.1行内样式
这是所有样式中最为直接的一种，它直接对html标签使用style属性，然后直接将CSS代码写在里面
<body>
<div style="background-color:red">hello</div>
</body>
2.2内部样式
在head中指定div的标签来选择选择器，达到内容与样式的分离
<head>
<metacharset="UTF-8">
<meta name="author" content="姜伯洋">
<meta name="copyrught" content="说明信息">
<title>姜伯洋H5页面</title>
<style>
div{background-color:yellow}
</style>
</head>
<body>
<div>hello</div>
</body>
2.3外部样式
<style>
div{background-color:yellow
div{background-color:yellow}
div{background-color:yellow}
div{background-color:yellow}
</style>
如果我们的style选择器过多的话，可以使用引入CSS文件办法
<link rel="stylesheet" href="test.css" type="text/css">
test.css中的内容
div{background-color: green}
第3章 CSS选择器
3.1标签选择器
<style>
div{background-color:red}
</style>
</head>
<body>
<div>hello</div>
</body>
3.2ID选择器
<style>
div{background-color:red;font-size:25px;}
#jj{background-color:gray;}
</style>
</head>
<body>
<div>hello</div>
<h1 id="jj">nihao,世界</h1>
3.3类别选择器
<style>
.one{background-color: white}
</style>
</head>
<body>
<div class="one">hello</div>
<h1 id="jj">nihao,世界</h1>
3.4通用选择器
<style>
*{background-color:orangered}
</style>
</head>
<body>
<h1 id="jj">nihao,世界</h1>
3.5包含选择器
div p {background:red;}
3.6分组选择器
div, span, h1 {color:blue;}
3.7伪类选择器
a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为×××*/
3.8选择器的优先级
行内样式—id选择器—类选择器—标签选择器—通用选择器
第4章 段落文本属性和边框以及背景属性
4.1文本的行高
line-height：行高值
4.2文本对齐和文本修饰
<style>
div{
text-align: right;
}
</style>
Ø text-align：
left：左对齐
right：右对齐
center：居中对齐
Ø text-decoration：
underline：定义文本下的一条线
overline：定义文本上的一条线
line-through：定义穿过文本的一条线
blink：定义闪烁的文本
4.3边框设置
border：宽度，样式，颜色（border：1px solid red）
4.4文字属性
font-size：字号
color：文字颜色
4.5背景属性
background-color：背景颜色
background-image：背景图像
background-position：背景位置
background-position-x：100px
background-position-y：100px
background-repeat：背景重复
repeat 背景图像平铺铺满整个网页
repeat-x 背景图像只在水平方向上平铺
repeat-y 背景图像只在垂直方向上平铺
no-repeat 背景图像不平铺
<style>
#img{
border:1px solid yellow;
height:18px;
width:18px;
background-image: url('test.png');
background-position-y: 138px;
}
</style>
</head>
<body>
<div id="img">
</div>
</body>
第5章 布局属性（只针对块级属性）
5.1外边距– margin
margin是对外元素的距离，用来控制元素本身的浮动位置
margin取值：
margin：四边距
margin-top：上边距
margin-bootom：下边距
margin-left：左边距
margin-right：右边距
margin：0 auto 居中显示
5.2内边距– padding
padding是对内元素，用来控制内部元素的位置
padding：四边距
padding-top：上边距
padding-bootom：下边距
padding-left：左边距
padding-right：右边距
5.3元素浮动– float
float的取值：left/right/none
<style>
.one {
background-color: yellow;
border: 1px solid red;
width: 100px;
height: 100px;
float: left;
}
.two{
background-color: yellow;
border:1px solid red;
width: 100px;
height: 100px;
float: left;
}
.three{
background-color: yellow;
border: 1px solid red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="one">hello</div>
<div class="two">hello</div>
<div class="three">hello</div>
</body>
banner头部制作：
<style>
#head{
background-color: #f5f5f5;
height:18px;
}
#pg-left{
margin-left: 50px;
float: left;
}
#pg-right{
margin-right: 50px;
float: right
}
</style>
</head>
<body>
<div id="head">
<div id="pg-left">请登录</div>
<div id="pg-right">
<a href="#">收藏</a>
<a href="#">购物车</a>
<a href="#">分类</a>
</div>
</div>
5.4display属性：
block：将元素编程块级标签，可以设置高度和宽度
inline：将元素变成行内标签，不能设置高度和宽度
inline-block：同时具有两种
none：标签消失
5.5overflow溢出处理属性：
overflow：水平和垂直均设置
overflow-x：scroll 设置水平方向
overflow-y：scroll 设置垂直方向
5.6定位属性：
fixed：将某个元素固定在页面的某个位置
特点：相对于浏览器的窗口来进行定位的，固定到窗口的某个位置上，不随内容而滚动，如果不设置定位座标，就在原来的位置，否则反之
absolute：绝对定位
特点：相对于（祖先元素的定位方式relative来进行定位，找祖先元素是否有定位，如果没有定位，找到body，就相对于body来定位，如果找到祖先元素有定位，想对祖先元素来定位
relative：相对定位
特点：相对定位是相对于自身的左上角为座标
定位方式常与定位座标一起使用
定位座标：要定位的元素偏离目标位置多远的距离
常见取值：top，left，right，bottom
5.6.1fixed定位属性的使用：
.hot{
position:fixed;
top: 62px;
left: 151px;
}
</style>
</head>
<body>
<div id="pg-content">
<h2>限时抢购</h2>
<div class="item">
<img src="IMGL0036.jpg" >
<p>特价特卖葫芦娃</p>
<div>
<span class="current">¥144</span><span class="origin">¥188</span>
</div>
<div class="hot">
<img src="hot.jpg" >
</div>
</div>
</div>
5.6.2relative和absolute联合使用
<style>
#pg-content{
width:700px;
height:500px;
border:1px solid orange;
}
h2{
color: orange;
font-size: 18px;
border:1px solid orange;
margin-top: 0;
padding-left: 12px;
}
.item{
width:150px;
height:200px;
border:1px solid #e7e7e7;
float: left;
margin:11px;
position: relative;
}
img{
width:150px;
height:130px;
}
.itemp, span{
font-size: 13px;
text-align: center;
}
.current{
color: red;
font-size: 16px;
margin-left: 32px;
}
.origin{
text-decoration: line-through;
margin-left: 20px;
}
.hotimg{
width:20px;
height:30px;
}
.hot{
position:absolute;
top: 0px;
right: 0px;
}
</style>
5.6.3淘宝案例：
上面淘宝网的搜索栏是不会随着滚轮的滑动调整的，始终会在屏幕的最顶端
<style>
.pg-header{
position: fixed;
top:0px;
right:0px;
left:0px;
background-color: blue;
height:48px;
}
.pg-content{
height:2000px;
background-color: beige;
margin:50px;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">nihao</div>
</body>
5.6.4input输入框案例
<body>
<div style="width: 300px; height: 30px; position: relative;">
<input stype="text" name="username" style="width:300px; height: 30px; padding-right: 25px;;">
<img src="suo.jpg" style="position: absolute;top: 8px; right: -23px;">
</div>
</body>
5.7z-index
设置对象的层叠顺序
较大number的值的对象会覆盖在较小的number值的对象上
<style>
.one{
height:2000px;
background-color: #dddddd;
}
.two{
height:2050px;
background-color: #3ba354;
position: fixed;
top:0;
right:0;
left:0;
opacity: 0.3;
/*z-index:10;*/
}
.three{
height:400px;
width:300px;
position: fixed;
top:100px;
right:400px;
left:800px;
background-color: white;
z-index: 10;
}
</style>
</head>
<body>
<div class="one">
</div>
<div class="three">
</div>
<div class="two">
</div>
</body