标签：最小 联系 分类 图片路径 spl banner eve 依次 alt
默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示
主要用于设置块元素的水平排列
1）属性:float
2）取值: 可取left或right，设置元素向左浮动或向右浮动. 示例:float:left/right;
3）特点:
4）常见问题: 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局
5）解决:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width:500px; 9 height:500px; 10 margin:0 auto; 11 background:orange; 12 13 14 } 15 #d1,#d2,#d3{ 16 width:200px; 17 height:200px; 18 } 19 #d1{ 20 21 background:red; 22 float:right; 23 24 } 25 #d2{ 26 height:300px; 27 background:green; 28 float:right; 29 } 30 #d3{ 31 background:blue; 32 float:right; 33 } 34 span{ 35 float:right; 36 width:200px; 37 height:200px; 38 background:pink; 39 <!--clear:both;--> 40 41 } 42 </style> 43 </head> 44 <body> 45 <div id="box">box 46 <div id="d1">d1</div> 47 <div id="d2">d2</div> 48 <div id="d3">d3</div> 49 <span>span1</span> 50 51 </div> 52 <!--脱离文档流的元素在文档中不在站位,可以手动调宽高--> 53 <span>span2</span> 54 </body> 55 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width:200px; 9 height:200px; 10 background:red; 11 float:left; 12 margin-right:30px; 13 } 14 h1{ 15 background:green; 16 17 } 18 input{ 19 /*正常元素在文档流中找位置，浮动元素在上层中找位置*/ 20 float:left; 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 <span>行内元素</span> 27 <input type="text"> 28 <h1>浮动元素只能遮挡元素的位置，但是不影响内容显示</h1> 29 </body> 30 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #nav{ 8 width:900px; 9 height:24px; 10 background:gray; 11 } 12 .left{ 13 width:300px; 14 float:left; 15 background:green; 16 } 17 .right{ 18 float:right; 19 background:red; 20 width:300px; 21 } 22 ul{ 23 margin:0; 24 passing:0; 25 /*去掉列表符号*/ 26 list-style:none; 27 } 28 li{ 29 float:left; 30 margin-right:50px; 31 } 32 #main{ 33 margin-top:50px; 34 width:900px; 35 /*解决子元素全部浮动造成父元素告诉为0的问题*/ 36 /*解决方法1：height:400px;*/ 37 /*解决方法2：overflow:hidden;*/ 38 overflow:hidden; 39 background:pink; 40 } 41 .item1{ 42 width:580px; 43 height:400px; 44 background:gray; 45 float:left; 46 } 47 .item2,.item3{ 48 width:300px; 49 height:190px; 50 background:gray; 51 float:right; 52 } 53 .item2{ 54 margin-bottom:20px; 55 } 56 #i1,#i2{ 57 width:200px; 58 height:200px; 59 background:red; 60 } 61 #i1{ 62 background:green; 63 float:left; 64 } 65 #i2{ 66 /*使文档中正常元素不受前面浮动元素影响*/ 67 /*clear:left/right/both*/ 68 clear:left; 69 } 70 .clear{ 71 clear:both; 72 } 73 </style> 74 </head> 75 <body> 76 <div id="nav"> 77 <div class="left"> 78 <ul> 79 <li id="d1">首页</li> 80 <li id="d2">物流</li> 81 <li id="d3">客户</li> 82 </ul> 83 </div> 84 <div class="right">右侧导航</div> 85 </div> 86 <div id="main"> 87 <div class="item1">1</div> 88 <div class="item2">2</div> 89 <div class="item3">3</div> 90 <div class="clear">1</div> 91 </div> 92 <div> 93 联系我们 94 <div id="i1">1</div> 95 <div id="i2">2</div> 96 </div> 97 </body> 98 </html>
结合偏移属性调整元素的显示位置
1）属性: position
2）取值: 可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位） 示例:postion:relative/absolute/fixed
3）偏移属性:设置定位的元素可以使用偏移属性调整距离参照物的位置
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #banner{ 8 width:300px; 9 height:250px; 10 /*相对定位*/ 11 position:relative; 12 } 13 #d1{ 14 color:#fff; 15 /*绝对定位*/ 16 position:absolute; 17 height:30px; 18 right:0px; 19 /*根据参照物对应方向的值计算偏移量（250*50%）*/ 20 top:50%; 21 margin-top:-15px; 22 } 23 #d2{ 24 color:#fff; 25 /*绝对定位*/ 26 position:absolute; 27 height:30px; 28 /*根据参照物对应方向的值计算偏移量（250*50%）*/ 29 top:50%; 30 margin-top:-15px; 31 } 32 #fixed_{ 33 position:absolute; 34 width:150px; 35 top:230px; 36 color:#fff; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="banner"> 42 <img src="northStar.jpg" class="c1" alt=""> 43 <a href="" id="d1">下一张</a> 44 <img src="timg.gif" class="c2" alt=""> 45 <a href="" id="d2">上一张</a> 46 </div> 47 <div id="fixed_"> 48 固定定位 49 </div> 50 </body> 51 </html>
4）分类
relative 相对定位(原来的位置占位)
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #d1,#d2{ 8 width:200px; 9 height:200px; 10 background:red; 11 margin:0 auto; 12 } 13 #d1{ 14 background:green; 15 /*相对定位，已定位的元素可以设置偏移属性，调整元素的显示位置*/ 16 position:relative; 17 /* 18 top:100px; 19 left:-100px; 20 */ 21 bottom:-100px; 22 right:100px; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="d1"></div> 28 <div id="d2"></div> 29 </body> 30 </html>
absolute 绝对定位（原来的位置不占位）
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 使用绝对定位 :
"父相子绝" : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width:500px; 9 margin:0 auto; 10 background:orange; 11 position:relative; 12 } 13 #d1,#d2{ 14 width:200px; 15 height:200px; 16 background:red; 17 18 } 19 #d1{ 20 background:green; 21 /*绝对定位*/ 22 position:absolute; 23 top:0; 24 left:0; 25 26 } 27 body{ 28 /*设置为定位元素*/ 29 position:relative; 30 31 } 32 </style> 33 </head> 34 35 <body> 36 <div id="box"> 37 <div id="d1"></div> 38 <div id="d2"></div> 39 </div> 40 </body> 41 </html>
fixed 固定定位（不占位）
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #main{ 8 height:1500px; 9 background:pink; 10 } 11 #chat{ 12 width:300px; 13 height:300px; 14 background:orange; 15 /*固定定位:脱离文档流，参照窗口偏移； 16 不跟随页面滚动而滚动*/ 17 position:fixed; 18 right:0; 19 bottom:0; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="main"></div> 25 <div id="chat">千年传奇，值得你拥有，快注册吧，注册就送屠龙刀。</div> 26 </body> 27 </html>
5）堆叠次序
元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：
属性 : z-index
取值 : 无单位的数值,数值越大,越靠上
堆叠：
1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width:200px; 9 height:200px; 10 background:red; 11 } 12 #d1{ 13 background:green; 14 position:relative; 15 /*只有定位元素才能使用偏移属性调位置*/ 16 /* 17 position:relative; 18 top:100px; 19 left:100px; 20 */ 21 z-index:1 22 } 23 #d2{ 24 /*永远定位元素在上*/ 25 position:relative; 26 left:100px; 27 bottom:-100px; 28 29 } 30 #d2:hover{ 31 /*调整堆叠次序，属性：z-index 32 取值为无单位的整数，值越大越靠上 33 只有定位元素能够使用z-index属性调整次序*/ 34 z-index:2; 35 } 36 37 </style> 38 </head> 39 <body> 40 <!--正常元素与定位元素发生堆叠，永远定位元素在上方显示--> 41 <!--同为定位元素发生堆叠，根据标签的书写顺序，后来者居上--> 42 <div id="d2"></div> 43 <div id="d1"></div> 44 <h1> 45 实现网页： 46 上方为导航栏（包含若干导航项，包含下拉菜单） 47 下方为轮播图区域（包含图片，图片索引，左右按钮） 48 </h1> 49 </body> 50 </html>
background-color: red;
1）设置背景图片:background-image : url("路径");
设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号
2）设置背景图片的重复方式
默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：
1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见
取值 ：
background-repeat:repeat/repeat-x/repeat-y/no-repeat
3）设置背景图片的显示位置:默认显示在元素左上角 background-position:x y;
取值方式：
1. 像素值：设置背景图片的在元素坐标系中的起点坐标
2. 方位值
注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比：类似于方位值，根据百分比计算背景图片的显示坐标。
计算方式：
横坐标 = (元素宽度 - 背景图片宽度）* x%
纵坐标 = (元素高度 - 背景图片高度) * y %
特殊值：
0% 0% 左上角
100% 100% 右下
50% 50% 居中显示
精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标
4）设置背景图片的尺寸：background-size:width height;
取值方式 ：
1. 像素值
1. 500px 500px; 同时指定宽高
2. 500px; 指定宽度，高度自适应
2. 百分比：百分比参照元素的尺寸进行计算
1. 50% 50%; 根据元素宽高,分别计算图片的宽高
2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3.背景属性简写:background:color url("") repeat position;
注意 ：
1. 如果需要同时设置以上属性值，遵照相应顺序书写
2. background-size 单独设置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div,h1{ 8 width:100px; 9 height:100px; 10 margin:200px auto; 11 background-color:pink; 12 background-image:url(northStar.jpg); 13 14 /*y轴重复*/ 15 background-repeat:repeat-y; 16 /*x轴重复*/ 17 background-repeat:repeat-x; 18 /*不重复*/ 19 background-repeat:no-repeat; 20 /*background-position:-100px -100px;*/ 21 background-position:100% 100%; 22 } 23 div:hover{ 24 background-position:-160px -40px; 25 } 26 h1{ 27 width:500px; 28 height:500px; 29 margin:0 auto; 30 /* 31 background-size特殊取值： 32 cover：覆盖 将图片等比拉伸至足够大，完全覆盖元素，超出部分不可见(最小的边距和元素块一样大) 33 contain:包含 将图片等比拉伸至刚好被元素容纳（最大的边距不超过元素块） 34 */ 35 background-size:cover; 36 } 37 h2{ 38 width:500px; 39 height:500px; 40 background:cyan url(northStar.jpg) no-repeat center; 41 font: 400 36px "宋体"; 42 } 43 </style> 44 </head> 45 <body> 46 <h2>字体样式展示</h2> 47 <h1></h1> 48 <div></div> 49 </body> 50 </html>
1）设置字体大小：font-size:20px;
2）设置字体粗细程度
取值 ：
3）设置斜体：font-style:italic;
4）设置字体名称：font-family:Arial,"黑体";
取值 :
1. 可以指定多个字体名称作为备选字体,使用逗号隔开
2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
例 : font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5）字体属性简写：font : style weight size family;
注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项
1）文本颜色：color:red;
2）文本装饰线：text-decoration:none;
取值 :
3）文本内容的水平对齐方式：text-align:center;
取值 :
4）行高：line-height:30px;
使用 :文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置
特殊 :line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高
5）font属性简写2：font : size/line-height family;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 font-size:32px; 9 font-weight:bold; 10 /*font-style:italic;*/ 11 font-family:"宋体","黑体"; 12 color:blue; 13 text-decoration:none; 14 width:200px; 15 background:orange; 16 height:200px; 17 /*居中*/ 18 text-align:justify; 19 /*和文本高度一样（居中效果）*/ 20 /*根据字体大小计算行高*/ 21 line-height:2; 22 } 23 span{ 24 /*行高*/ 25 font:italic 700 32px/2 "黑体"; 26 background:red; 27 28 } 29 </style> 30 </head> 31 <body> 32 <h1>python</h1> 33 <p>hello python hello python hello python hello python hello python hello python</p> 34 <span>人生苦短</span> 35 </body> 36 </html>
标签：最小 联系 分类 图片路径 spl banner eve 依次 alt
原文地址：https://www.cnblogs.com/maplethefox/p/11179111.html
