推扬网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
推扬网 门户 你问我答 查看内容

何瑞东:CSS+div怎么做图片中的导航条

2020-8-10 19:53| 发布者: admin| 查看: 65| 评论: 0

摘要: 叶永清的回答: css+div做图片中的导航条的方法: 思路:对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排,从而让li并排布局。然后需要对ul li里的a标签设置display:block的,但a父级li不设 ...

叶永清的回答:

css+div做图片中的导航条的方法: 思路:对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排,从而让li并排布局。然后需要对ul li里的a标签设置display:block的,但a父级li不设置具体宽度,所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。 1、CSS代码: ul#nav{?width:100%;?height:60px;?background:#00A2CA;margin:0?auto}? ul#nav?li{display:inline;?height:60px}? ul#nav?li?a{display:inline-block;?padding:0?20px;?height:60px;?line-height:60px; ?color:#FFF;?font-family:"\5FAE\8F6F\96C5\9ED1";?font-size:16px}? ul#nav?li?a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/? 2、HTML代码 <ul?id="nav">? ? ?<li><a?href="http://www.xxx.com/">首页</a></li>? ? ?<li><a?href="http://www.xxx.com/html/">HTML教程</a></li>? ? ?<li><a?href="http://www.xxx.com/rumen/">CSS基础</a></li>? ? ?<li><a?href="http://www.xxx.com/css-tool/">CSS开发工具</a></li>? ? ?<li><a?href="http://www.xxx.com/css-texiao/">CSS特效</a></li>? ? ?<li><a?href="http://www.xxx.com/wenji/">CSS问题</a></li>? </ul>? 3、效果截图

杨建华的回答:

css+div做图片中的导航条的方法: 思路:对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排,从而让li并排布局。然后需要对ul li里的a标签设置display:block的,但a父级li不设置具体宽度,所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。 1、CSS代码: ul#nav{?width:100%;?height:60px;?background:#00A2CA;margin:0?auto}? ul#nav?li{display:inline;?height:60px}? ul#nav?li?a{display:inline-block;?padding:0?20px;?height:60px;?line-height:60px; ?color:#FFF;?font-family:"\5FAE\8F6F\96C5\9ED1";?font-size:16px}? ul#nav?li?a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/? 2、HTML代码 <ul?id="nav">? ? ?<li><a?href="http://www.xxx.com/">首页</a></li>? ? ?<li><a?href="http://www.xxx.com/html/">HTML教程</a></li>? ? ?<li><a?href="http://www.xxx.com/rumen/">CSS基础</a></li>? ? ?<li><a?href="http://www.xxx.com/css-tool/">CSS开发工具</a></li>? ? ?<li><a?href="http://www.xxx.com/css-texiao/">CSS特效</a></li>? ? ?<li><a?href="http://www.xxx.com/wenji/">CSS问题</a></li>? </ul>? 3、效果截图

户海印的回答:

等等,帮你写个打包传上来! 已经传了,关键是: <div> <p><span>公司介绍</span></p> </div> p 必须浮动 > float:left; 因为 p 浮动后宽度自动计算才能生效 > width:auto; p 宽度 auto 后,里面文字变多或变少就可以自动算出宽度。

余温i的回答:

</li <li style=float:left; display:block; line-height:35px; margin:0 7px 0 140px;电脑维修|</li <li style=float:left; display:block; line-height:35px; margin:0 7px;家政|</li <li style=float:left; display:block; line-height:35px; margin:0 7px;装潢|</li <li style=float:left; display:block; line-height:35px; margin:0 7px;卖场|</li <li style=float:left; display:block; line-height:35px; margin:0 7px;鲜花</li </ul </div <div style=height:250px; width:940px; background-color:#ffffff; margin:5px auto;</div <div style=height:600px; width:940px; background-color:#ffffff; margin:10px auto;</div </div </body </html 保存为html格式就可以.你可以把style提取出来做成css文件放进去就好了。。希望可以帮助你

优佳丽的回答:

等等,帮你写个打包传上来! 已经传了,关键是: <div> <p><span>公司介绍</span></p> </div> p 必须浮动 > float:left; 因为 p 浮动后宽度自动计算才能生效 > width:auto; p 宽度 auto 后,里面文字变多或变少就可以自动算出宽度。


鲜花

握手

雷人

路过

鸡蛋

最新评论

热门推荐
最新资讯

广告服务|投稿要求|禁言标准|版权说明|免责声明|手机版|小黑屋|推扬网 ( 粤ICP备18134897号 )|网站地图 | 邮箱:vayae@hotmail.com

GMT+8, 2025-5-1 12:24 , Processed in 0.060830 second(s), 29 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

返回顶部