<html> <head> <meta charset="utf-8"> <title>边框</title> <style type="text/css"> body{background:#66b3ff;}/*背景颜色：浅蓝*/ *{padding:0px;margin:0px;}/*去除页面边距*/ h3{color:yellow;margin:20px 0px 0px 20px;}/*设置为黄色，内边距上部和左边都为20*/ span{font-size:2em;color:pink;}/*字体2倍大小，颜色粉色*/ .t1{width:100px;height:150px;border:2px;border-radius:15px;background:#ccc;padding-top:10px;padding-left:5px;margin-left:50px;color:#000;}/*设置大小，边框为2，圆角，背景色，上内边距10（为了显示文字），左内边距5，左外边距50，字体黑色*/ .t2{width:100px;height:150px;border:2px;border:dashed blue;margin:10px 0px 0px 70px;padding-left:3px;background:red;color:#fff;}/*设置大小，边框为2，虚线边框，蓝色，外边距上为10（与上面元素隔开），左为70，（下面几个元素依次递增20，为了有楼梯效果），左内边距3，红背景色，字体颜色白色*/ .t3{width:100px;height:150px;border:dotted green;margin:10px 0px 0px 90px;background:#000;color:#fff;}/*设置大小，边框点状虚线，绿色，外边距上10左90，背景色黑色，字体颜色：白*/ .t4{width:100px;height:150px;background:pink;border-left:3px solid green;border-bottom:3px solid green;margin:10px 0px 0px 110px;}/*设置大小，背景色：粉色，左边框粗细3，实线，绿色，下边框粗细3，实线，绿色，外边距上10左110*/ .t5{width:100px;height:150px;margin:10px 0px 0px 130px;border:none;background:#ccc;box-shadow:6px 3px 3px blue;}/*设置大小，外边距上10左130，边框不显示，背景色ccc，阴影：X轴6，Y轴3，阴影宽度3，阴影颜色：蓝色*/ .t6{width:100px;height:150px;margin:10px 0px 30px 150px;background:#f75000;box-shadow:inset 0px 20px 80px yellow;}/*设置大小，外边距上10，下30（由于下面没有元素，为了完整显示这个div，所以设置下30px）,左150，背景色#f75000，阴影：内部，X轴0，Y轴20，阴影宽度80，阴影颜色：黄色*/ </style> </head> <body> <h3>下面是<span>边框</span>练习的实例</h3><br> <div class="t1">圆角边框</div> <div class="t2">虚线边框</div> <div class="t3">点状边框</div> <div class="t4">只有左下边框</div> <div class="t5">外部阴影</div> <div class="t6">内部阴影</div> </body> </html>
2018-11-290个赞
해당 섹션의 강좌：블록 수준 요소를 인라인 요소로 변환하거나 그 반대로 변환
<html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> *{padding:0px;margin:0px;} body{background-color:#ccc;} .nav{width:150px;height:20px;background-color:green;line-height:20px;text-align:center;color:#fff} .main{width:150px;height:88px;background-color:green;line-height:21px;text-align:center;color:#fff;display:none;border-top:1px yellow solid;} .nav:hover .main{display:block;} ul li{list-style:none;border-bottom:solid 1px yellow;} a{color:#fff;text-decoration: none;} </style> </head> <body> <div class="nav">导航 <div class="main"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">留言板</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </div> </body> </html>
2018-11-290个赞
<html> <head> <meta charset="utf-8"> <title>相对定位与绝对定位</title> <style type="text/css"> *{padding:0px;margin:0px;} body{color:#fff;} .a1{width:150px;height:150px;background:red;position:relative;left:300px;}/*设置宽高，背景红色，相对定位：距离原始位置左侧300，也就是右移300，下面直接说相对原位置右移*/ .a2{width:150px;height:150px;background:green;position:absolute;top:33px;left:330px;}/*设置宽高，背景绿色，绝对定位（由于没有已经定位的父元素，所以这个绝对定位是相对于body）：下移33，右移330，所以显示覆盖在第一个上面*/ .a3{width:150px;height:150px;background:blue;}/*设置宽高，背景蓝色，无定位*/ .a4{width:150px;height:150px;background:black;position:relative;top:50px;left:50px;}/*设置宽高，背景黑色，相对定位：下移50，右移50*/ .a5{width:80px;height:80px;background:yellow;color:green;position:absolute;left:10px;top:10px;}/*设置宽高，比其他几个都小，背景黄色，字体颜色绿色，绝对定位：（由于其父元素a4已经相对定位，所以a5的绝对定位就成了相对于a4的定位）右移10，下移10*/ .a6{position:absolute;right:20px;color:black;width:80px;height:30px;background:#ccc;line-height:30px;text-align:center;}/*绝对定位：（由于没有已经定位的父元素，所以a6的绝对定位是相对于body）距离右边20，字体颜色黑色，设置宽高（其本身是个span行内元素，原本设置行高不起作用，但是它已经绝对定位，所以就变成了块级元素），背景色ccc，line-height与height一样，即垂直居中，文字水平居中*/ </style> </head> <body> <div class="a1">第一个</div> <div class="a2">第二个</div> <div class="a3">第三个</div> <div class="a4"> <div class="a5">第五个</div> </div> <span class="a6">导航条</span> </body> </html>
2018-11-300个赞
