导航条菜单的制作_学习笔记

首页免费课导航条菜单的制作笔记

导航条菜单的制作

最热最新

馨湘逸

制作导航条时<li><a>...,需要将a变成块级元素（display:block），才可以定义其行高等属性，而不需要定义在li 上

查看全部

0 采集收起来源：水平菜单的制作
2018-03-22
宁静致远_择善固执

margin-top:-10px;记住

查看全部

0 采集收起来源：编程练习
2016-01-19
mm小鱼酱

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
冰霜之泪

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{}

查看全部

0 采集收起来源：垂直菜单的制作
2016-01-18
LiebemachtHe

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
LiebemachtHe

ul{width:0px} li{float:left;}水平导航

查看全部

0 采集收起来源：水平菜单的制作
2016-01-18
LiebemachtHe

总结一下大家重点：1〉居中使用text-indent:20px;也可以用text-align:center；2〉a里面的width应该不用设，因为ul已经设了宽度，不设的话，是100%继承你类宽度；3〉首页中的空格应该用“ ”代替，要多少个空格就打多少个，代码里无论打多少个空格，都只显示一个，应该打字符编码。

查看全部

7 采集收起来源：编程练习
2018-03-22
LiebemachtHe

一般都使用 “ul\li” 来制作“菜单导航条”

查看全部

0 采集收起来源：练习题
2016-01-18
LiebemachtHe

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{}

查看全部

0 采集收起来源：垂直菜单的制作
2016-01-18
浪漫停不下来

横向文本缩进 text-align:center; 纵向文本缩进 text-indent:10px;

查看全部

0 采集收起来源：水平菜单的制作
2016-01-17
浪漫停不下来

将<a>标签变成块状元素可直接进行属性设置首先：display:block;

查看全部

0 采集收起来源：编程练习
2018-03-22
iamjessie

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
南赐

不错，记住了。

查看全部

0 采集收起来源：练习题
2016-01-15
晨寒

<style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} ul li{float:left; margin-top:20px;} a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;margin-top:-10px;} </style> </head> <body> <ul> <li><a class="on" 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>

查看全部

0 采集收起来源：编程练习
2018-03-22
晨寒

<style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none;} a{color:#333;text-decoration:none} .nav li {float:left;} .nav li a{ display:block; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;text-align:center;} .nav li a:hover{ background-color:#F60; color:#fff} </style>

查看全部

0 采集收起来源：编程练习
2018-03-22