<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          在网页设计中设计新闻列表

          • 2019-09-06 15:21:15
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          前面详细介绍了CSS可设置的列表样式,本节通过在网页设计中新闻栏目实例练习CSS设置列表的方法,以及列表在网页中的应用。

          【操作步骤】

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

          第2步,构建网页结构。在本示例中首先用3个<div>标签设置了新闻栏目的容器,在每一个<div>块中分别用<ul>标签和<li>标签定义了新闻栏目和新闻标题。

          <div class="junshi">

          <h2>军事新闻<span>more...</span></h2>    

          <ul>        

          <li><a href="#">中国为何不怕美国 英国人一句话道出真相。</a> </li>        

          <li><a href="#">日本记者南沙回来很感慨:终于领略中国的强大。</a></li>        

          <li><a href="#">外媒:运载马航MH17残骸卡车抵达荷兰境内。</a> </li>        

          <li><a href="#">揭秘藏在中国的军事间谍:自称“军迷”搜集资料。</a></li>    

          </ul>

          </div>

          <div class="caijing">    

          <h2>财经资讯<span>more...</span>

          </h2>    <ol>        <li><a href="#">莫迪亚诺小说年底密集上市 国内出版商争抢版权。</a> </li>        

          <li> <a href="#">银行间外汇市场事前准入许可明年取消。  </a></li>        

          <li><a href="#">华润万家花椒粉铅超标两倍 称是“土地”惹的祸。  </a></li>

          <li> <a href="#">人民币即期汇率两天暴跌逾500点。</a></li>    

          </ol>

          </div><div class="yule">    

          <h2>娱乐资讯<span>more...</span></h2>    

          <ul>

          <li><a href="#">林志玲张柏芝范冰冰章子怡 夜店性感狂野销魂。</a> </li>        

          <li><a href="#"> 《匆匆那年》热映 欢乐六人行特辑爆主演趣事。  </a></li>        

          <li><a href="#">杜德伟曝关之琳将结婚 指王菲嘉玲生日玩快闪。</a> </li>        

          <li><a href="#">李晨邓超Angelababy 细数《奔跑吧兄弟》嘉宾。</a></li>    

          </ul>

          </div>

          此时网页的基本结构已经搭建好了,但是由于在设计网页时没有进行CSS样式设置,界面中只是把文字内容罗列起来,没有任何修饰。

          第3步,在网站建设中,在<head>标签内添加<styletype="text/css">标签,定义一个内部样式表,然后输入下面样式,定义网页基本属性、新闻栏目的样式以及文字“more…”样式。

          body {                                             /*网页基本属性*/   

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

          font-family: "黑体";                           /*字体样式*/    

          margin: 0px;                                   /*清除页边距*/    

          padding: 0px;                                  /*清除页边距*/    

          background:url(images/bg.png) no-repeat;       /*模拟新闻栏目页面效果*/}

          h2 {                                               /*新闻栏目的文本样式*/    margin: 24px 0 0 5px;                          /*新闻栏目文字上下补白*/    

          color: #006699;    font-size: 16px;}

          h2 span {                                          /*文字“more…”的显示样式*/    

          color: #999;    float: right;                                  /*右对齐*/}

          以上代码中,设置了页面的基本属性,<h2>标签的内容是新闻的栏目,设置了其字体颜色、大小等属性。<span>标签的内容是文字“more…”,

          第4步,定义网页<div>块,也就是新闻栏目块的共有属性。

          div{                       /*每一个新闻栏目块的样式*/    

          line-height:16pt;      /*行间距*/    

          width:400px;           /*块的宽度*/    

          margin:10px 0 0 10px;  /*各个新闻块之间距离*/}

          第5步,为列表<ul>和<ol>添加CSS样式。

          .part1 ul{                            /*第一个新闻块的列表样式*/     

          margin-left:40px;                /*文字左侧离边框的距离*/     

          list-style-type:upper-alpha;     /*项目符号是大写字母*/}.part2 ol {                           /*第二个新闻块的列表样式*/    

          margin-left:40px;    

          list-style-type: upper-roman;     /*项目符号是大写罗马字母*/}.part3 ul {                           /*第三个新闻块的列表样式*/    

          margin-left:40px;    

          list-style-type: circle;          /*项目符号是空心圆*/}

          以上代码中,分别设置了3个新闻栏目的列表样式。可以看到,项目符号和编号按设置的样式进得了显示。

          第6步,从图4.17中可以看出,网页已初见效果,最后定义<li>标签和<a>标签的样式。

          li { /*<li>标签样式,也就是新闻标题样式*/    

          margin:5px 0 5px 0;      /*每条新闻标题之间间隔*/}a { /*链接样式*/    

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

          color:#000;}此时新闻栏目示例设计完成。

          当前文章标题:在网页设计中设计新闻列表

          当前URL:http://www.1c4w.com/news/wzzz/3091.html

          上一篇:在网页设计中定义列表横竖显示

          下一篇:网页设计中的导航列表

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图