html学习总结2 .doc

目录： 一、块结构 1 二、内敛元素 2 三、如何让两个块结构元素显示到一行。 2 四、ul li 无序列表标签； 2 五、背景图片 3 六、定义样式的三种方式 5 七、 文字在容器内垂直方向上居中 5 八、容器在另一个容器内水平方向上水平居中 6 一、块结构 块结构的特点：如设置宽度的时候，会占用整个父容器的一行。可以设置width，height。 典型标签：Div p 二、内敛元素 容器的大小，不能用户自己设定，即通过width，height改变宽高。容器的大小只能由容器内的内容（文字、图片等）自动撑大，即内容有多大，容器就有多大。 典型标签：label span, a 把内敛元素通过display属性设置为块结构以后，可以通过通过width，height改变宽高； 例如：label{ display:inline-block;width:1000PX; height:80PX;} 三、如何让两个块结构元素显示到一行。 如上图所示如何设置，可以通过float属性设置块结构元素现在在一行上。 如：div div id=”div1”div1/div div id=”div2”div2/div /div 样式： #div1{float:left；width:400px; height:30px;} #div2{float:left ;width:400px; height:30px;} 四、ul li 无序列表标签； ul lia href=#众¨2人¨?首o?á页°3/a/li lia href=#关?于?¨2众¨2人¨?/a/li lia href=#众¨2人¨?首o?á页°3/a/li lia href=#关?于?¨2众¨2人¨?/a/li /ul list-style:none; 2. float:left; 3.margin-left:20px; 4. a href=”#”关于众人/a 样式： a{ text-decoration:none; color:#000000; display:inline-block; width:80px; height:30px; text-align:center;} a:hover{ background-image:url(../images/menubg.jpg); } 详解：text-decoration:none;去掉下划线 display:inline-block;把a标签修改为块结构 text-align:center;文字水平居中对齐 a:hover 但光标移动超链接上时，超链接显示的样式。 a:hover{ background-image:url(../images/menubg.jpg); }意思是但光标移动超链接上时，超链接的背景为图片。 display:inline-block; 五、背景图片 div class=”divbg”/div .divbg{background-image:url(../images/menubg.jpg); background-repeat:no-repeat; /* 背景图片不重复*/ background-position:1px 2px; /* 背景图片坐标*，横坐标为：1px，竖坐标为2px*/ } 如图所示：背景图片的坐标是（0，0） 背景图片的坐标是（50px，0） 背景图片的坐标是（-50px，0） 六、定义样式的三种方式 1.通过标签名称 2.通过id名称 3.通过类名 情况1：div文字/div Css样式： Div{font-size:19px;} 意思是：所有div标签内的文字大小都是19px 情况2：div id=”div1”文字/div Css样式：div1{font-size:19px;} 意思是：id为div1的标签的文字大小都是19px 情况3：div class=”divclass”文字/div Css样式：.divclass {font-size:19px;} 意思是：属性class的值为divclass 的标签的文字大小都是19px 七、 文字在容器内垂直方向上居中 需要把容器的高和行高设置一样 如：div class=”div1”内容/div 样式：.div1{height:30px; line-height:30px;} 八、容器在另一个容器内水平方向上水平居中 div class=”divOut” div class=”divIn”/div /div 样式：. divIn{margin:0 auto;} 意思是：