页面css排版不错乱：
1.最外层div中 定义width=980px，当页面缩小以后，就在下面出现滚动条
2.使用 media 技术，bootstrp技术。页面自使用
一、css选择器
|
选择器 |
样式 |
说明 |
|
类选择器 |
.page-top |
选择class=“page-top” |
|
ID选择器 |
#pag-1 |
选择id=“page-1” |
|
标签选择器 |
p |
选择所有<p> 标签 |
|
层级选择器 |
div p |
选择 <div> 标签内部的所有 <p> 标签 |
|
组合选择器 |
div，p |
选择所有 <div> 标签和所有 <p> 标签 |
|
属性选择器 |
.c1[n='alex'] |
第一次筛选class=c1，再次通过属性进行筛选 |
二、导入方式
一个标签可以应用多种样式，当属性重叠的时候，标签上的style优先级最高，head中与link中，重上而下进行覆盖操作！ 跟读写顺序一致
- 标签上直接应用
- 在head头部中加载
- 在head中引入css文件
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
三、各种样式
3.1 边框
<div style="border: 1px red dotted;">得到</div> 宽度 颜色 样式虚线，solid实线
border 是有四个防线的
3.2 宽度、高度、内容水平居中，垂直居中
1 height: 高度 像素 百分比（高度百分比直接使用有问题，要配合父级标签）
2 width： 宽度 像素 百分比
3 text-align 水平方向居中
4 line-height：38px 垂直方向，根据标签高度居中
5 color 字体颜色
6 front-size 字体大小
7 front-weight 字体加粗
<div style=" 20%; height:40px; line-height: 40px; text-align: center; color: aqua; font-size: larger; font-weight: bolder; ">人呢</div>
3.3 float
让便签飘起来，让块级标签也能in-line 堆叠。 注意：父级标签，因为包含的标签 飘起来，撑起来 不可控了 最后要加上 clear:both
<div style="background-color: red; 50%;float: left">1</div> <div style="background-color: aqua; 30%;float:right">2</div>
<div style=" 300px;border: red solid;"> <div style="border: blue solid; 96px;height: 30px;float: left"></div> <div style="border: blue solid; 96px;height: 30px;float: left"></div> <div style="border: blue solid; 96px;height: 30px;float: left"></div> <div style="border: blue solid; 96px;height: 30px;float: left"></div> <div style="border: blue solid; 96px;height: 30px;float: left"></div> <div style="clear: both"></div> </div>
3.4 display
行内标签：无法设置宽度（默认文本占多少就是多少），长度，边距
块级标签：可以设置宽度（默认宽度就是占一行），高度，边距
1 display none 让标签消失 2 display inline 3 display block 4 display inline-block 5 具有linline的默认的宽度 6 又具有block的设置高度
3.5 边距
magrin 内边距
pading 外边距 增加自己本身
1 <div style="border: red 1px solid; 60px;height: 60px;"> 2 <div style="height: 30px; 60px;background-color: blue;padding-top: 0px">123<div> 3 </div>
3.6 position
位置属性，直接加上一个<div> 是分区域的，position=fixed类似一个墙体上的吸铁石。
进行分层
fixed --------------》固定在浏览器窗口的固定位置
relative 单独没有意思
absolute 第一次定位在指定位置，在
relative+basolute 做相对的定位 basolute对relative进行定位
<div style="position"
放回顶部 与 菜单 固定的实例：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .caidan{ width: 100%; height: 50px; background-color: blue; position: fixed; top:0; left: 0; } </style> </head> <body style="margin: 0"> <div style=" 40px;height: 40px;background-color: aqua;position: fixed;bottom: 10px;right: 10px;line-height: 40px;">TOP</div> <div style="margin-top:52px; 100%;height: 1000px;background-color: #dddddd">内容：我在哪</div> <div class="caidan">首页</div> </body>
3.7 图层 透明度 索引
在使用position以后，margin：0 auto的居中方式会失效：
后期，js一点就出现的按钮 可以通过图层加上 display：none 一起操作
z-index：图层索引，越大就在顶端
opacity：不透明度
1 <div style="top:20%;left:50%;margin-left: -50px; margin-top:-50px; 200px;height: 50px;position: fixed;background-color: white;z-index: 10"></div> 2 <div style="z-index:8; 100%;height: 5000px;background-color: black;"></div> 3 <div style="z-index:9;opacity:0.5;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #dddddd"></div>
3.8 overflow
当图片太大把标签撑起来的时候，使用overflow
auto：加上滑动窗口
hidden：把超出部分隐藏起来
1 <div style=" 200px;height: 200px;overflow: auto"> 2 <img src="1.jpg"> 3 </div>
3.9 hower 当鼠标盘旋到该区域，就把内容显示出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .page-top{ width: 100%; height: 45px; background-color: #2459a2; position:fixed; top:0; left:0; rihgt:0; } .context{ margin-top: 48px; } .page-top .w{ width: 80%; margin:0 auto; line-height: 45px; color: white; } .page-top .w .menu{ display: inline-block; /*默认a便签是inline标签，so 无法改变，要改变显示形式*/ height: 45px; padding: 0 10px; } /*当鼠标盘旋到这一块的时候，就把下面内容显示出来*/ .page-top .w .menu:hover{ background-color: #7ca1ff; } </style> </head> <body> <div class="page-top"> <div class="w"> <a class="menu">全部</a> <a class="menu" >42区</a> <a class="menu" >段子</a> <a class="menu" >图片</a> </div> </div> <div class="context">dead</div> </body> </html>
3.10 backgroud-imag 背景图片
当一个页面中使用多个小图片，加载多个图片，可以把小图片做到一张图片里面，这样就省下了很多下载链接;
1 <div style="background-image: url(tip.png); 2 background-repeat: no-repeat; 3 20px; 4 height: 30px; 5 background-position-x: 0px; 6 background-position-y:-100px ; 7 "></div>
3.11 小练习-登入加图片
<div style=" 200px;height:40px;position: relative;"> <input type="text" style="font-size:25px;font-weight:lighter;200px;height:40px;padding-right: 26px"> <div style="height:40px;40px;position: absolute;right:-44px;top:6px;background-image: url(user.png);background-repeat: no-repeat"></div> </div>