100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > HTML页面设计之导航栏

HTML页面设计之导航栏

时间:2023-10-15 09:27:57

相关推荐

HTML页面设计之导航栏

一、 导航栏 DIV+CSS布局

先设计一个大盒子,用来盛放整条的导航栏,宽度就是屏幕的宽度:

#navigator{/*导航栏*/height:30px;width:1000px;font-size: 20px;list-style-type: none;background-color: black;padding-left: 300px;padding-right: 330px;}

下面是放每个小按钮的小盒子li:

#navigator li{/*导航栏里的小盒子*/margin-left: auto;margin-right: auto;float:left;/*导航栏里的小盒子左对齐*/}

下面是对超链接的设计:

#navigator li a{margin-left: 2px;width:150px;height:22px;color: aliceblue;text-decoration: none;display: block;/*连接块状呈现*/text-align: center;}

到这里就可以了,如果要实现鼠标指在按钮上变色,还需要对hover(徘徊)进行设计:

#navigator li a:hover{/*鼠标指到上面变色*/background-color: lightcoral;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。