• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    如何在网页设计中设计列表版式

    • 2019-09-11 10:52:18
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    前面的示例展示了在设计网页用列表制作新闻栏目、菜单等网页元素,实际上,列表还能在网页设计中进行简单的排版,尤其是对图文的排列,是网络中经常见到的形式,本例以名为“世界十大名车欣赏”的网页为例,介绍在网站建设时列表排版的应用。

    【操作步骤】

    第1步,启动Dreamweaver,新建一个网页,保存为index.html。

    第2步,首先构建网页结构。在本例中,应用<ul>标签创建列表,在每一个<li>标签中添加图片,从而实现本例效果。

    <h3><a href="#/">世界十大名车欣赏</a></h3><ul>    

    <li> <a href="#"><img src="images/1.jpg" alt="1"><span>世界十大名车之一:恩佐.法拉利</span></a></li>    

    <li> <a href="#"> <img src="images/2.jpg" alt="2"> <span>世界十大名车之二:兰博基尼</span></a></li>    

    <li> <a href="#"> <img src="images/3.jpg" alt="3"> <span>世界十大名车之三:奔驰SLR</span></a></li>    

    <li> <a href="#"> <img src="images/4.jpg" alt="4"> <span>世界十大名车之四:布加迪.威龙</span></a></li>    

    <li> <a href="#"> <img src="images/5.jpg" alt="5"> <span>世界十大名车之五:福特GT</span></a></li>    

    <li> <a href="#"> <img src="images/6.jpg" alt="6"> <span>世界十大名车之六:克莱斯勒ME-Four-Twelve</span> </a></li>    

    <li> <a href="#"> <img src="images/7.jpg" alt="6"> <span>世界十大名车之七:阿斯顿.马丁DB9</span></a></li>    

    <li> <a href="#"> <img src="images/8.jpg" alt="6"> <span>世界十大名车之八:保时捷CarreraGT</span></a></li>    

    <li> <a href="#"> <img src="images/9.jpg" alt="6"> <span>世界十大名车之九:宾利欧陆 GT</span></a></li>    

    <li> <a href="#"> <img src="images/10.jpg" alt="6"> <span>世界十大名车之十:帕格尼—风之子</span></a></li>

     <div style="clear:both;"></div></ul>

    此时,网页的基本结构已经创建完成,由于没有进行CSS控制,所以界面还离我们希望的样式相差甚远。

    第3步,在<head>标签内添加<styletype="text/css">标签,定义一个内部样式表,然后输入下面样式,定义网页的基本属性和标题样式。

    body,h3,ul { /*设置页面、h3标签、<ul>标签的四周补白和内边距都为0*/    

    margin:0;    

    padding:0;}h3 {/*h3标题样式*/    

    width:800px;                       /*宽度*/    

    height:30px;                       /*高度*/    

    margin:20px auto 0 auto;     /*设置顶部补白为20px,左右距离为auto,实现h3块的居中显示*/    

    font-size:20px;                    /*字体大小*/   

    text-indent:10px;                  *首行缩进*/    

    line-height:30px;                  /*行间距,可实现文字的垂直居中*/    

    background:#E4E1D3;                /*背景颜色*/     

    text-align:center;                /*h3标签中文字的居中*/}h3 a {                                 /*标题的链接样式*/    

    color:#c00;                        /*字体颜色*/    text-decoration:none;              /*不显示下划线*/}

    h3 a:hover {                           /*鼠标悬停时标题的样式*/    

    color:#000;                        /*字体颜色*/}

    在以上代码中用body,h3,ul{ mar-gin:0;padding:0;}语句设置了body、h3和<ul>标签的margin和padding属性;在a样式类和a:hover样式中,分别定义了标题的链接样式和鼠标经过时的样式。

    第4步,设置ul样式类和<li>标签的样式,从而实现对网页中图文的排版。

    ul {/*ul列表样式*/    width:774px;                   /*ul列表宽度*/    

    margin:0 auto;                 /*ul中所有内容居中显示*/    

    padding-left:20px;             /*左侧内边距*/    

    border:3px solid #E4E1D3;      /*边框样式*/}  

    ul li {/*<li>标签样式*/    

    float:left;                   /*<li>标签中的内容横向显示*/    

    margin:5px 10px 3px 0px;      /*四周的外边距*/    

    list-style-type:none;         /*不显示项目标签*/}  

    ul li a {/*设置li中的<a>标签样式*/    

    display:block;         /*定义为块级元素,使鼠标进入块中任何位置链接就被激活*/    

    width:370px;                /*宽度*/    

    height:175px;               /*高度*/    

    text-decoration:none;       /*不显示下划线*/

    }

    以上代码定义了ul的宽度为774px,边框样式为宽3px的实线,774px加两条3px的边框恰好和前面定义的h3宽度800px一致。

    第5步,设置<li>标签下的<img>标签样式和<span>标签样式。

    ul li a img {                    /*设置li中图片样式*/    

    width:370px;                 /*图片宽度*/    

    height:150px;                /*图片高度*/    

    border:1px #000099 solid;    /*1px宽的边框*/}

    ul li a span {                   /*每个图片标题的样式*/    

    display:block;    width:370px;                 /*宽度是370px*/    

    height:23px;                 /*高宽*/

    line-height:20px;            /*行间距*/    

    font-size:14px;              /*字体大小*/    

    text-align:center;          /*文字居中*/   

    color:#333;                 /*文字颜色*/

    }

    在上述代码中,设置了图片高度是150px,图片的上下边框各1px,图片标题高宽是23px,三者相加正好是前面讲的设置li的高度175px。




    当前文章标题:如何在网页设计中设计列表版式

    当前URL:http://www.0737dz.com/news/wzzz/3094.html

    上一篇:如何设计多级菜单列表

    下一篇:如何在网页设计中设计图文混排列表效果

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图