-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .d1{width: 380px;height:300px;border: 1px solid gainsboro;margin:90px;} h2{font-weight:bolder;margin-left:20px ;} hr{color:darkgrey;margin: 10px;} .t1 tr{font-size: 14px;} .t1 td{border-bottom: 1px dashed grey;padding-left:15px;} .t1{width:300px;height: 200px;margin: 20px;} a{text-decoration: none;} a:link{color: black;} a:hover{text-decoration: underline;color: black;} </style> </head> <body> <div class="d1"> <h2>最新文章/New Articles</h2> <hr> <table class="t1"> <tr><td><a href="#">中华人民共和国</a></td></tr> <tr><td><a href="#">中央人民政府</a></td></tr> <tr><td><a href="#">西安英莱特信息</a></td></tr> <tr><td><a href="#">学习.NET技术</a></td></tr> <tr><td><a href="#">Python大数据</a></td></tr> </table> </div> </body> </html> -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿真导航栏</title> <style> *{ padding: 0px; margin: 0px; } .d1{border-top:2px solid red; border-bottom:1px solid grey ; background-color:#fcfcfc; text-align:center; } .d1 a{text-decoration: none; display: inline-block; margin-left:15px; height: 40px; width: 80px; font-size:small; line-height: 40px; } .d1 a:hover{background-color:gainsboro;} </style> </head> <body> <div class="d1"> <a>设为首页</a> <a>手机新浪网</a> <a>移动客户端</a> <a>登陆</a> <a>微博</a> </div> </body> </html> -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站导航栏</title> <style> *{ padding: 0px; margin: 0px; } /*.d1{border-top:2px solid red; border-bottom:1px solid grey ; background-color: honeydew;} */ span{margin-left:230px;} .d1 a{display: inline-block;/*a是行内元素所以要转换*/ width: 120px; height: 50px; text-decoration: none; background-image: url(img/bg.png); color:white; text-align: center; line-height: 50px;/*行高等与盒子的高相等则垂直居中*/ } a:hover{background-image: url(img/bgc.png);} </style> </head> <body> <div class="d1"> <span></span> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> </div> </body> </html>
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
