如何在网页设计中设计音乐首页-盈岚科技

如何在网页设计中设计音乐首页

2019-11-01 11:02:13
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

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

【操作步骤】

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

<tr>

<td>

</tr>

<tr>

<tr>

首页</a></li>

</ul></td>

</tr>

</table></td>

</tr>

<tr>

<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; /*水平居中*/}

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