导航栏制作
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--常用的应用文本的css样式：--> <!--color 设置文字的颜色，如： color:red;--> <!--font-size 设置文字的大小，如：font-size:12px;--> <!--font-family 设置文字的字体，如：font-family:'微软雅黑';--> <!--font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜--> <!--font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗--> <!--font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';--> <!--line-height 设置文字的行高，如：line-height:24px;--> <!--text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉--> <!--text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px--> <!--text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中--> <!--<style>--> <!--.menu{--> <!--width: 694px;--> <!--height: 50px;--> <!--margin: 50px auto;--> <!--list-style: none;去掉原点--> <!--padding:0;--> <!--font-size: 0;--> <!--}--> <!--.menu li{--> <!--display: inline-block;--> <!--border: 1px solid red;--> <!--width: 98px;--> <!--height: 48px;--> <!--font-size: 16px;--> <!--margin-right: -1px;--> <!--text-align: center;--> <!--line-height: 48px;--> <!--}--> <!--.menu li a{--> <!--text-decoration: none;--> <!--font-family: 'Microsoft Yahei';--> <!--color: pink;--> <!--}--> <!--.menu a:hover{--> <!--color: red;--> <!--}--> <!--.menu li:hover{--> <!--background: red;--> <!--}--> <!--</style>--> <!--<ul class="menu">--> <!--<li><a href="#">首页</a></li>--> <!--<li><a href="#">公司简介</a></li>--> <!--<li><a href="#">解决方案</a></li>--> <!--<li><a href="#">公司新闻</a></li>--> <!--<li><a href="#">行业动态</a></li>--> <!--<li><a href="#">招贤纳士</a></li>--> <!--<li><a href="#">联系我们</a></li>--> <!--</ul>--> <!--</body>--> <!--</html>--> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .menu{ height:40px; width: 960px; background: #55a8ea; margin:50px auto; } .menu li{ display: inline-block; width: 100px; line-height: 40px; text-align: center; } .menu li:hover{ background: #00619f; } .menu li a{ text-decoration: none;--> font-family: 'Yahei'; color: #fff; font-size: 14px; } </style> </head> <body> <ul class="menu"> <li><a href="#">首页</a></li> <li><a href="#">网站建设</a></li> <li><a href="#">程序开发</a></li> <li><a href="#">网络营销</a></li> <li><a href="#">案例展示</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
将背景fixed再那
浙公网安备 33010602011771号