元素的显示与暗藏
display显示（暗藏）
显示与暗藏
display:none(暗藏) display:block（显示）特点
- 先暗藏元素 不占地位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; margin: 20px 20px; background-color: blue; } .box1 { background-color: yellow; display: none; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body></html>visibility(显示与暗藏)
visibility:hidden visibility:visible特点
- 先暗藏元素 占地位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; margin: 20px 20px; background-color: blue; } .box1 { background-color: yellow; /* 设置元素的显示与暗藏 */ visibility: hidden; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body></html>overflow(元素的显示与暗藏)
- overflow:visible 既不裁切内容也不显示滚动条
- overflow:hidden 超过内容则被剪裁掉
- overflow:scroll 总是显示滚动条
- overflow:auto 超出显示滚动条 不超出则不显示滚动条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 400PX; height: 200PX; border: 1px solid red; /* 超出局部则主动剪裁 其它属性值请看阐明 */ overflow: hidden; } </style></head><body> <div class="box"> 迟缓地升起后小心地将树苗移向当时挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的工夫，工人们共栽下国槐、西府海棠等树苗50余株。 据门头沟区城市管 理委员会相干负责人介绍，本次景观晋升工程次要对S1线门头沟段沿线，设计总绿化面积约11万平方米，次要抉择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等动物，打造三季有花、四季有景的景观成果。 迟缓地升起后小心地将树苗移向当时挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的工夫，工人们共栽下国槐、西府海棠等树苗50余株。 据门头沟区城市管 理委员会相干负责人介绍，本次景观晋升工程次要对S1线门头沟段沿线，设计总绿化面积约11万平方米，次要抉择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等动物，打造三季有花、四季有景的景观成果。 </div></body></html>显示与暗藏的总结
显示与暗藏案例
剖析：盒子外面本来有一个半透明的遮罩，设置暗藏，当鼠标通过时显示。在非凡状况下，a链接能够放div标签
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box { position: relative; width: 600px; height: 337px; margin: auto; border: 1px solid red; } .box a { display: block; } .box img { width: 100%; } .box .mask { display: none; position: absolute; width: 600px; height: 337px; background: rgba(0, 0, 0, 0.3) url(1.元素的显示与暗藏/image/arr.png) no-repeat center center; } .box a:hover .mask { display: block; } .box </style> </head> <body> <div class="box"> <a href=""> <!-- 遮罩层 --> <div class="mask"></div> <img src="./1.元素的显示与暗藏/image/素材.jpg" alt=""> </a> </div> </body></html>CSS用户界面款式
鼠标款式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } li { width: 200px; height: 200px; margin: 20px auto; list-style: none; line-height: 200px; text-align: center; font-weight: bold; color: white; background-color: #0000FF; } li:nth-child(1) { cursor: default; } li:nth-child(2) { cursor: pointer; } li:nth-child(3) { cursor: move; } li:nth-child(4) { cursor: text; } li:nth-child(5) { cursor: not-allowed; } </style> </head> <body> <ul> <li>默认的鼠标状态</li> <li>小手状态</li> <li>挪动状态</li> <li>文本状态</li> <li>禁止状态</li> </ul> </body></html>轮廓线
在真正的开发利用中,轮廓线是间接去掉的
outline:none<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin:0; padding: 0; } input { outline: none; </style> </head> <body> 账号：<input type="text"> </body></html>避免文本域拖拽
resize:none<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; paddding: 0; } textarea { width: 200px; height: 200px; outline: 0; resize: none; } </style> </head> <body> <h2>留言板</h2> <textarea rows="" cols=""> </textarea> </body></html>用户界面款式总结
垂直居中
留神只针对行内元素和行内块元素失效
vertical-align:top(顶线) middle(中线) baseline(基线) bottom(底线)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> img { vertical-align: middle; } </style> </head> <body> <img src="../CSS（4）/6.导航栏案例/image/button2.jpg" alt="" > hello word </body></html>去除图片缝隙的两种办法
- 应用vertivcal-align的属性只有不是baseline便能够
- 应用display:block也能够解决这个问题
没去除图片底部缝隙之前
去除图片缝隙之后
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { border: 1px solid red; } img { /* 去除图片底部缝隙的第一种办法 */ /* vertical-align: bottom; */ /* 去除图片底部缝隙的第二种办法 */ display: block; } </style> </head> <body> <div class="box"> <img src="../CSS（6）/image/adv.jpg" alt=""> </div> </body></html>文字省略形式
white-space：nowrap 强制一行显示 默认属性值为normaloverflow:hidden 暗藏元素
text-overflow:ellipsis文字溢出 默认属性值为clip
留神：三个步骤一个都不能少
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box { width: 200px; height: 20px; border: 1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="box">hello 我的名字叫做尧子陌 很快乐意识各位哦</div> </body></html>精灵技术
精灵图呈现的目标
加重了服务器申请和承受的次数 ，进步页面的加载速度如何制作精灵图内呢
- 准确的测量每张背景图的大小和地位
- 给盒子设置宽高指定小背景图时，地位通常为负值
案例：用精灵图技术拼出本人的姓
名字为name的image
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } div { float: left; background: url(image/name.jpg) no-repeat; } .box1 { width: 116px; height: 106px; background-position: -365px -557px; } .box2 { width: 110px; height: 110px; background-position: 0px -9px; } .box3 { width: 108px; height: 108px; background-position: -370px -280px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body></html>如何制作本人的精灵图
每个精灵图之间要摆放参差 且分辨率为72pt 背景设为通明并且格局要为png格局
滑动门技术
为了使各种非凡形态的背景可能适应文本内容的多少 便呈现了滑动门技术
核心技术：利用css精灵和padding内边距
留神的几点
- a负责左侧背景 span负责右侧背景 有padding撑开适合宽度
- a蕴含着span 因为整个导航栏都是链接
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } a { display: inline-block; height: 33px; line-height: 33px; padding-left: 15px; color: white; text-decoration: none; background: url(image/ao.png) no-repeat left center; } a span { display: inline-block; height: 33px; background: url(image/ao.png) no-repeat right center; padding-right: 15px; } </style></head><body> <a href="#"> <span>首页 </span> </a></body></html>微信导航栏案例
留神用到滑动门技术
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: url(./image/wx.jpg) repeat-x; } .nav { margin-top: 20px; } .nav li { list-style: none; float: left; margin: 0px 20px; } .nav a { display: inline-block; height: 33px; color: white; line-height: 33px; padding-left: 15px; background: url(./image/to.png) no-repeat left; } .nav a span { display: inline-block; height: 33px; padding-right: 15px; background: url(./image/to.png) no-repeat right; } .nav a:hover { background-image: url(./image/ao.png); } .nav a:hover span { background-image: url(./image/ao.png); } </style></head><body> <div class="nav"> <ul> <li> <a href="#"> <span>首页</span> </a> </li> <li> <a href="#"> <span>帮忙与反馈</span> </a> </li> <li> <a href="#"> <span>公众平台</span> </a> </li> <li> <a href="#"> <span>首页</span> </a> </li> </ul> </div></body></html>注意事项
margin负值之美
利用margin负值能够合并边框
没合并之前
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } div { float: left; height: 400px; width: 400px; border: 1px solid red; /* 利用margin负值能够合并边框 */ margin-left: -1px; margin-top: -1px; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body></html>合并之后的边框
margin负值能够突出显示某个盒子之美
- 定位能够将盒子晋升到最高处
- 通过z-index能够显示margin负值的盒子
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } div { /* 定位能够将盒子晋升到最高处 */ position: relative; float: left; height: 400px; width: 400px; border: 1px solid red; /* 利用margin负值能够合并边框 */ margin-left: -1px; margin-top: -1px; } div:hover { border: 1px solid blue; /* 通过z-index能够显示margin负值的盒子 */ z-index: 1; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body></html>css三角之美
案例
步骤如下
- 宽高全为0
- 须要的三角形要保留色彩，不须要的三角形能够色彩设为通明即可
- 关照兼容性，line-height：0 font-size:0
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid #000000; /* 关照兼容性 */ line-height: 0; font-size: 0; } </style> </head> <body> <div></div> </body></html>三角形案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { position: relative; width: 600px; height: 600px; background-color: #0000FF; margin: 200px auto; } p { position: absolute; left: 50%; /* 两个三角的间隔的一半 所以-50px */ margin-left: -50px; /* 两个三角的间隔 所以-100px */ margin-top: -100px; width: 0px; height: 0px; border:50px solid transparent; border-bottom:50px solid black; } </style> </head> <body> <div> <p></p> </div> </body></html>