<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-05 16:36:53
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          网页设计中,浏览器默认列表项竖向显示,有时需要列表项横向显示。通过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.1c4w.com/news/wzzz/3090.html

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

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

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