固定定位
<html lang="en"> <head> <meta charset="UTF-8"> <style> #div1{ height: 1500px; background-color: red; } #backtop{ height: 80px; 80px; background-color: yellow; position: fixed; bottom: 10px; right: 10px; } </style> <title>固定定位</title> </head> <body> <a name="top"></a> <div id="div1"></div> <button id="backtop"><a href="#top">返回顶部</a></button> </body> </html>
结果图：
绝对定位+负边距
<html lang="en"> <head> <meta charset="UTF-8"> <style> #container{ 500px; height: 1000px; background-color: darkorange; margin: 0 auto; position: relative; } #div1{ height: 100px; 100px; background-color: aqua; position: absolute; top:50%; left:50%; margin-top: -50px ; margin-left: -50px ; } </style> <title>绝对定位+负边距</title> </head> <body> <!--1：父容器加相对定位 2：给子元素添加绝对定位 3：top left ：50% 4：margintop（height）, marginleft(width)取子元素的一半--> <div id="container"><div id="div1"></div></div> </body> </html>
结果图：
负边距
<html lang="en"> <head> <meta charset="UTF-8"> <style> #div1{ border: 5px solid red; 400px; height: 50px; margin: 0 auto; } #div2{ height: 50px; background-color:yellow; margin-left: -20px; margin-right: -20px; } </style> <title>负边距</title> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
结果图：
双飞翼布局
<html lang="en"> <head> <meta charset="UTF-8"> <style> #head{ height: 150px; background-color: red; } #body{ height: 300px; background-color: white; position: relative; } #foot{ height: 150px; background-color: darkorange; } #left{ 20%; height: 100%; background-color: aqua; float: left; } #center{ 60%; height: 100%; background-color: chartreuse; float: left; position: absolute; left: 20%; } #right{ 20%; height: 100%; background-color: palevioletred; float: right; } </style> <title>双飞翼布局</title> </head> <body> <div> <div id="head"></div> <div id="body"> <div id="center">中</div> <div id="left">左</div> <div id="right">右</div> </div> <div id="foot"></div> </div> </body> </html>
结果图：
属性选择器
<html lang="en"> <head> <meta charset="UTF-8"> <style> /**1:^= div元素中id属性值以div开头的*/ /* div[id^='div']{ color: red; }*/ /**2:$= div元素中id属性值以3结尾的*/ /* div[id$='3']{ color: blue; }*/ /*3：*= div元素中id属性值带有i的*/ /*div[id*='i']{ color: aqua; }*/ /*4:= div元素中id属性值等于div1的*/ /*div[id='div1']{ color: aqua; }*/ /*div元素中带有class的*/ div[class]{ color: red; } </style> <title>属性选择器</title> </head> <body> <div id="div1">这是第一个div</div> <div id="div2">这是第二个div</div> <div id="div3">这是第三个div</div> <div id="forth">这是第四个div</div> <div id="fifth">这是第五个div</div> <div class="sixth">这是第六个div</div> </body> </html>
结果图：
伪类选择器
<html lang="en"> <head> <meta charset="UTF-8"> <style> /*nth-child：统计所有的子代元素，然后对匹配的元素生效*/ /*nth-of-type*/ /*#container li:nth-child(2n-1) { color: red; }*/ /*nth-of-type：统计所有类型匹配的元素，然后生效*/ #container li:nth-of-type(2n-1) { color: red; } </style> <title>伪类选择器</title> </head> <body> <ul id="container"> <li>烟台大学 <li>数学院</li> <div>山东大学</div> <li>法学院</li> <li>鲁东大学</li> </ul> </body> </html>
结果图：
状态伪类选择器
<html lang="en"> <head> <meta charset="UTF-8"> <style> input:disabled { color: red; } input:enabled { color: yellow; } input:checked{ outline: red 1px solid; } </style> <title>状态伪类选择器</title> </head> <body> <!--已知：link visited hover active--> 姓名：<input type="text" value="漂移的蜗牛" disabled> <br> 密码：<input type="password"> <br> 爱好：<input type="checkbox" checked>篮球 <input type="checkbox">网球 <input type="checkbox">乒乓球 </body> </html>
结果图：
相邻全部兄弟选择器
<html lang="en"> <head> <meta charset="UTF-8"> <style> /*相邻兄弟选择器*/ /* #p2+p{ color: red; }*/ /*相邻全部兄弟选择器*/ #p2~p{ color: darkorange; } </style> <title>相邻全部兄弟选择器</title> </head> <body> <p id="p1">1</p> <p id="p2">2</p> <p id="p3">3</p> <p id="p4">4</p> <p id="p5">5</p> <p id="p6">6</p> </body> </html>
结果图：
取非选择器
<html lang="en"> <head> <meta charset="UTF-8"> <style> /* p{ color: red; } :not(p){ color: yellow; }*/ ul li:not([id='li2']) { color: red; } </style> <title>取非选择器</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <div>4</div> <a href="">5</a> <span>6</span> <ul> <li>1</li> <li id="li2">2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
结果图：
变形效果
<html lang="en"> <head> <meta charset="UTF-8"> <style> div { 158px; height: 183px; margin: 0 auto; margin-top: 100px; border: 1px solid red; overflow: hidden; } img { /*过度动画效果 1：什么属性参与过度效果 2：过渡时间 3：过渡效果*/ transition: all 3s ease; } img:hover { /*元素平移 x方向 y方向*/ /*transform: translate(100px,100px);*/ /*元素缩放*/ /*transform: scale(1.5);*/ /*元素旋转 rotatex:以x轴为中心旋转 rotatey：以y轴为中心旋转*/ /*transform: rotatey(180deg);*/ /*元素倾斜*/ transform: skewy(180deg);/*deg指度数，skew：倾斜，不常用*/ } </style> <title>变形效果</title> </head> <body> <div> <img src="../../img/anzhui.png" alt=""> </div> </body> </html>
结果图：
