1.标签
基本所有元素都可以用div表示 div属于块元素，需要独占一行，不同的元素都是换行依次向下排列 用作文字的标签2.样式
1）内连样式
直接在div中加样式，比如：
比如：
第二种是在外部文件链接，比如
相对路径，有参照物
绝对路径，没有参照物
3.给元素起名字
命名规范：只能用英文，不能用纯数字，不能以数字开头，中间不能加空格，不能用特殊符号，不能用大写字母，见明知义
class:可以有多个
id：不能重复
4.样式优先级
加样式多种方式 如果不冲突可以共同生效
如果冲突了，外部样式（id>class），内部样式>外部样式，后>前（覆盖）
最高级：！important>内部样式>外部样式
！important 的插入形式：“在分号前 空格 ！important”
一个“！important ” 只对一个生效
比如： background: blue !important;(极个别的情况下会用)
5.改变元素位置的方法
一个网页的三块内容：
第一步
第二步
完整版：
<style>
.head{width:800px;height:100px;background:red;}
.content{width:800px;height:500px;background:blue;}
.footer{width:800px;height:100px;background:yellow;}
.content_lf{width:400px;height:200px;background:lightblue;}
.content_fr{width:400px;height:200px;background:pink;}
</style>
</head>
<body>
<div class="head"></div>
<div class="content">
<div class="content_lf"></div>
<div class="content_fr"></div>
</div>
<div class="footer"></div>
</body>
6.html里面的元素分为两大类：
1.块元素，div，独占一行、
浮动：可以使块元素在一行上显示；
2.内联元素，
7.改变元素位置的方式：
margin(外边距) 等于加了一层围栏，四个方向都可以加
margin-top margin-bottom margin-left margin-right
两个要点：
子父集的margin-top会合并为一个；(取较大值)
同级top和bottom会合并为一个(取较大值)
padding（内边距）等于在里面加了一层栅栏
这个只能在子父集之间用；
问题：为了保证容积不变，加了padding以后，会被撑开
所以，width 和 height 都需要减少 padding相应的值
重点：只要是有padding， 肯定影响之前的形状，一定要在width和height等去调整
用到padding-top和bottom 在height上减少
用到padding-left和right 在weight上减少；
position：定位的元素也脱离文档流；
所有定位了的元素都可以当为参照物；
绝对定位的元素默认参照的是离她最近的定位了的父集元素；
.box{width:200px;height:200px; position:absolute; right:0;bottom:0;}
absolute（绝对定位）想改变谁的位置，就给谁加绝对定位；（不占位置）
relative（相对定位）想以谁作为参照物，就给谁加相对定位；（占位置）
fixed（固定定位）：只按照浏览器定位；其他特性同绝对定位；
position:absolute;
position:fixed;
position:relative;
8.如果让块元素在同一行上显示
写文字：span（内联元素）
例如：123456
内联元素不独占一行
但也不是永远不换行，达到宽度后就自动换行
span元素没有“宽和高”
2）浮动
float:left
希望哪几个元素放在一行，就要给每个加浮动
1.有问题：浮动的元素不占位置
2.断绝文档流，断绝子父集关系；
解决方案：clear:both;
(有浮动就必须有clear:both) 或者clear:both 的那个div只可能该层级最后一个元素显示
9.元素的基本形式
子父集的互相影响关系：
元素如果默认不设置宽度，那么宽度是父集的100%；
元素如果默认不设置高度，那么高度是0；
（1.可以在里面加一个子集，并且子集有高度，那么高度由子集决定）
（2.加padding，因为padding就是增加了高度／宽度；）
1）（可以不加宽度），默认是100%
并且子集中可以改成百分比
2）元素如果不给高度，默认的是0；
但是如果里面有子集的话，高度由子集决定；
另外，加padding也可以，
10，注释的方式
html里 <!–
–!>
css里 ／*
*／
11.命名规范
如果是多层子父集嵌套的，样式的可以用以下形式：
.news(父集的名字) .title(子集的名字) 两个中间有空格
直接子集：.news>.title(没有空格)
样式相同的可以放在一起：.title,.txt,.class (中间放逗号)
12.margin:50px; 代表四周都为50px；
margin:50px;100px; 上下50，左右100；
居中：margin:auto;(左右居中) 上下不能居中
margin:auto让块在父集中居中
前提：父集必须有宽度；
13.电脑如何兼容？
与多少寸无关，和分辨率有关，到底有多少个像素格；
高清就是分辨率高；2560px X 1600px；
14.内联样式
空格： 
html中的元素会自带一些margin和padding：写代码前，清除所有的margin和padding；
{}这是对所有的元素；{margin:0;padding:0;} 一定写在代码的第一行！
display:inline-block inline block none(隐藏)
15.新标签，除了块标签
文字标签：span(内联元素)，
P（段落标签），属于块元素（在一行需要浮动）
大家好，以后多多关照
H标签是标题标签 比如：标题
，自带文字样式，更粗更黑更大 H标签分别有6个，分别是h1 h2 h3 h4 h5 h6 A标签为超链接标签,内联标签 链接 (绝对路径) target="_blank" 可以跳转到另一个页面P和H标签里面都只能放文字
16.文本对齐方式：
文字居中：text-align:center (让元素里面的文字居中，文字离哪个样式最近就听谁的，这种情况是多层嵌套的情况)
17.块元素：div p h ul li
ul li 列表标签，他们是最接近div的，里面可以随意嵌套
什么时候用列表：当出现了一系列相同的元素结构时，用列表样式来写
** 网站的导航一定是UL/LI来写的
** 列表中也可以嵌套A标签来带超链接
** li 也有自带样式，需要进行清除！style=“list-style:none”
18.文字的颜色
color：white;
行高：line-height:50px; vertical-align;
文字上下居中：设置行高和外面的块一样高就可以了
-
鼠标滑过改变样式
li: hover{background:yellow}
li代表你要划过谁，这里用id，class或者标签名都可以，只要能知道这个元素即可
大括号里面是鼠标的样式：background是划过后的效果 -
文字的样式： color/行高：line-height（和外面的块一样高）:上下居中／text-align; center(左右举重)／font-normal／font-size: 18px;/
21, 下拉菜单的制作
首页下啦菜单： li 里面套一个ul列表
-
注意： 因为之前的“首页”已经浮动，而这里的下拉菜单需要竖着排列，所以之前给浮动的时候要用">"表示直接子集，孙子集的就不继承之前的浮动了
实现开始隐藏效果： display:none
划过显示： .nav.li hover: .second {display: block.;}, .nav.li是划过谁，.second是真正被改变的元素
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
