-
圆角菜单设置 border-radius:xxpx xxpx xxpx xxpx xx依次为左上角、右上角、右下角、左下角的圆角半径查看全部
-
圆角导航效果 .nav3{ list-style: none; height: 50px; border-bottom: 5px solid #f60; padding-left: 30px; } .nav3 li{ float: left; margin-top: 20px; } .nav3 li a{ text-decoration: none; display: block; height: 30px; line-height: 30px; /*background-color: #ccc;*/ width: 120px; text-align: center; background: url("img/demo1nav/btnBg.png"); } .nav3 .on,.nav3 li a:hover{ color: #fff; background-position: 0 -30px; } <div class="part3"> <ul class="nav3"> <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> </div>查看全部
-
设置样式查看全部
-
圆角菜单的制作查看全部
-
水平菜单制作 .nav2{ list-style: none; position: fixed; /*将导航固定在屏幕的上方或者下方*/ top: 0px; /*bottom: 0px;*/ left: 110px; } .nav2 li{ /*将列表变为水平*/ float: left; } .nav2 li a{ display: block; text-decoration: none; background-color: #ccc; height: 30px; line-height: 30px; width: 100px; text-align: center; } .nav2 li a:hover{ color: #fff; background-color: #f60; } <ul class="nav2"> <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>查看全部
-
<style> *{ margin: 0; padding: 0; font-size: 14px; } ul{ list-style: none; width: 100px; } .nav li a{ text-decoration: none; display: block; height: 30px; line-height: 30px; width: 100px; background-color: #ccc; margin-bottom: 1px; text-indent: 10px; } .nav li a:hover{ background-color: #f60; color: #fff; } </style> <ul class="nav"> <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>查看全部
-
用无需列表构建菜单查看全部
-
下划线是<a>标签里的，清除的样式是:a{text-decoration:none;} 原点是<ul>标签里的，清除的样式是:ul{list-style:none;} *{margin:0;padding:0}是设置所有元素的内外边距为0、查看全部
-
学完js需要重新做、导航条菜单的制作、最后一个编程挑战查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
导航条菜单制作总结 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高查看全部
-
下划线是<a>标签里的，清除的样式是:a{text-decoration:none;} 原点是<ul>标签里的，清除的样式是:ul{list-style:none;} *{margin:0;padding:0}是设置所有元素的内外边距为0查看全部
-
水平菜单的制作和垂直菜单大致一样，只需要将垂直菜单浮动一下。加入float:left; 在制作水平菜单的时候不设置宽度，文字居中使用（text-align:center;）查看全部
-
下拉菜单使用<ul><li>无序列表制作。display设置成block块状属性。文字居中使用缩进的方法（text-indent:#xp;）去除下划线使用（text-decoration:none）查看全部
举报
0/150
提交
取消