在网页设计中定义列表横竖显示

  • 2019-09-05 16:36:53
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页设计中,浏览器默认列表项竖向显示,有时需要列表项横向显示。通过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

上一篇:在网页设计中自定义项目符号

下一篇:在网页设计中设计新闻列表

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)