在网页设计中,浏览器默认列表项竖向显示,有时需要列表项横向显示。通过CSS控制,可以轻松实现项目列表的横竖转换。
【示例】启动Dreamweaver,新建一个网页,保存为test.html,输入以下内容:
<div class="container">
<ul>
<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>
</div>在<head>标签内添加<style type="text/css">标签,定义一个内部样式表,然后输入下面样式,用来定义列表样式。
body { background: #CCCCCC; /*页面背景色*/}
.container { /*container容器样式*/
font-family: Arial, Helvetica, sans-serif;}.container ul { /*列表样式*/
list-style-type: none; /*不显示项目符号*/
margin: 0px;
padding: 0px;}
以上代码中,定义了项目列表样式。
在网站建设中,为了让列表横向显示,在<li>标签中添加float:left样式声明,使各个列表项都水平显示,并设置<a>标签的相关属性,代码如下:
.container li { float: left; /*左浮动,实现列表项的横向显示*/}.container li a { /*<a>标签的样式*/
display:
block; /*定义为块级元素*/
padding: 3px 6px; /*上、下、左、右内边距*/
margin: 2px; /*四周补白*/
text-decoration: none; /*无下划线*/ border: 1px solid #996600; /*边框样式*/ background: #CCFF66; /*背景颜色*/}以上代码实现了列表的横向显示。
提示:在设计网页时,display:block语句能够将超链接设置成块级元素,当鼠标进入该块的任何部分时都会被激活,而不仅仅是在文字上方才被激活。
当前文章标题:在网页设计中定义列表横竖显示
当前URL:http://www.lyjtt.cn/news/wzzz/3090.html
上一篇:在网页设计中自定义项目符号
下一篇:在网页设计中设计新闻列表