<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-11-01 11:02:13
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          表格除了显示数据外,还常常被用来排版。虽然如今比较流行用DIV布局页面,但是由于表格在网页设计时容易上手、快捷、兼容性好,所以表格布局仍然受到不少网页设计者的青睐。

          【操作步骤】

          第1步,新建文档,保存为index.html。构建网页结构。本例中在网站建设中应用了表格嵌套,设置了外层表格outer和内层表格inner进行布局,从图中可以看到,外层表格是一个3行1列的表格,在外层表格的第2行中,又嵌套了一个1行2列的表格。

          <table class="outer">    

          <tr>        

          <td>

          <img src="images/bg.jpg"></td>    

          </tr>    

          <tr>        

          <td><table class="inner">                

          <tr>                    

          <td class="left"><ul>                            

          <li><a href="#">

          首页</a></li>                            

          <li><a href="#">古典音乐</a></li>                            

          <li><a href="#">现代流行</a></li>                            

          <li><a href="#">爵士音乐</a></li>                            

          <li><a href="#">70后音乐</a></li>                            

          <li><a href="#">80后音乐</a></li>                            

          <li><a href="#">90后音乐</a></li>                        

          </ul></td>                    

          <td class="right"><img src="images/1.jpg" /></td>                

          </tr>            

          </table></td>    

          </tr>    

          <tr>        

          <td class="footer">

          <p>|联系我们   |关于我们  |</p>            

          <p>感谢您的支持,希望明天会更好!!</p></td>    

          </tr>

          </table>

          以上代码定义了表格的结构,外层表格的3行分别是:

          第1行设置了banner图片,第2行是网页正文部分,嵌套了另一个表格,第3行定义了网页的footer部分;内层表格是一个1行2列的表格,左侧单元格设置了<ul>列表,定义网页的导航栏,右侧单元格是网页的内容部分。

          第2步,定义网页基本属性和外层表格样式。在<head>标签内添加<style type="text/css">标签,定义一个内部样式表,然后输入下面样式:

          body { /*网页基本属性*/    background: #e9e8dd;           /*网页背景颜色*/    

          text-align: center;

          }.outer {/*外层表格样式*/    

          width: 800px;                  /*表格宽度*/    

          border: 1px #999999 solid;     /*表格边框*/    

          margin: 0 auto;/*与父标签中的text-align:center配合实现水平居中*/}

          .footer {/*外层表格第3行单元格样式*/    

          background-color: #BEC4D0;     /*单元格背景颜色*/    

          text-align: center;            /*水平居中*/    

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

          color: #0033FF;                /*字体颜色*/}

          在以上代码中,首先定义了网页基本属性;在outer中首先定义了表格宽度,并定义了表格的外边框,margin:0 auto与body中的text-align:cen-ter两条语句可实现IE与FF浏览器中的水平居中。在footer中,定义了外层表格中第3行单元格的样式。此时,外层表格的所有样式设置完毕。

          第3步,设置内层表格inner样式。

          .left { /*内层表格左侧单元格样式*/    

          width: 150px;                /*左侧单元格宽度*/    

          background-color: #FF3300;   /*背景颜色*/    

          border: 1px red solid;       /*单元格边框*/    

          text-align: center;          /*水平居中*/}

          .right {/*内层表格右侧单元格样式*/    

          width: 650px;                /*右侧单元格宽度*/

           background-color: #BEC4D0;   /*背景颜色*/    

          border: 1px red solid;       /*单元格边框*/    

          text-align: center;          /*水平居中*/}

          以上代码完成了内层表格中两个单元格样式的设置。

          第4步,设置内层表格中的左侧导航条样式。

          ul {/*列表样式*/    

          list-style-type: none;  /*不显示列表项目符号*/    

          font-weight: bold;      /*字体加粗*/    

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

          li { height: 40px;          /*列表项的高宽*/ }

          上面代码实现了导航栏的样式。



          当前文章标题:如何在网页设计中设计音乐首页

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

          上一篇:在网页设计中设计动态效果的表格

          下一篇:设计个人小站

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