叶永清的回答: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 后,里面文字变多或变少就可以自动算出宽度。 |