网站首页是一个网站的入口网页。对于一个网站的了解往往是通过他的首页。首页的主要作用就是引导互联网用户浏览网站其他部分的内容。网站首页上展现的这部分内容一般被认为是一个目录性质的内容。首页的作用是一个网站内容的汇总和索引，在首页上有很多图标和链接，栏目也比较多，就像以一个住宅的大门一样，由此通往各个模块，首页是网站必需的，不可或缺的。
解决方案
网页设计框架有很多种，具体使用哪种就要结合网站需要，进行选择了。（现在的网页差不多都采用分列布局，常见的有单列布局、双列布局、三列布局和混合布局，超过三列的布局很少见。）本次网页的布局如下图所示：
图2.1网页布局
divid="top_bg">
那么的市场上了马车哦啊女款可惜那时快
那么的市场上了马车哦啊女款可惜那时快......(此处省略文字)
图2.2初步显示效果
要让网页变得好看，我们就需要设置css样式。（本次我们使用外联样式。）设置样式就包括字体样式，颜色，图片大小，边框等等。（常见的盒子模型当然不能忽略。）
*{
body{
background:#232524;
margin:0;
padding:0;
font-family:"宋体",arial,helvetica,sans-serif;
font-size:12PX;
line-height:1.5em;
width:100%;
}
a:link,a:visited{
color:#069;
text-decoration:underline;
a:active,a:hover{
color:#990000;
text-decoration:none;
#top_bg{
background:#7bdaaeurl(../img/top_bg.jpg)repeat-x;
height:830px;
#container{
width:900px;
margin:0auto;
#header{
height:280px;
#header_logo{
float:left;
display:inline;
width:500px;
height:20px;
font-family:tahoma,geneva,sans-serif;
font-size:20px;
font-weight:bold;
color:#678275;
margin:28px0015px;
#header_logospan{
margin-left:10px;
font-size:11pz;
font-weight:normal;
color:#000;
#header_bottom{
width:873px;
height:216px;
background:url(../img/header_bottom_bg.png)no-repeat;
margin:15px0015px;
#menu{
width:465px;
height:29px;
margin:170px0023px;
#menuul{
list-style:none;
#menuulli{
padding-left:20px;
padding-top:5px;
#menuullia{
font-family:"黑体";
font-size:16px;
color:#393;
#menuullia:hover{
color:#fff;
background:#396;
#content{
overflow:auto;
margin:15px;
#content_left{
width:250px;
margin:00010px;
#section{
margin:0015px0;
#section_1_top{
width:176px;
height:36px;
font-size:14px;
color:#276b45;
background:url(../img/section_1_top_bg.jpg)no-repeat;
margin:0px;
padding:15px0070px;
#section_1_mid{
width:217px;
background:url(../img/section_1_mid_bg.jpg)repeat-y;
padding:5px15px;
#section_1_mid.myform{
.myform.frm_cont{
margin-bottom:8px;
.myform.usernameinput,.myform.passwordinput{
width:120px;
height:18px;
padding:2px0px2px15px;
border:solid1px#aacfe4;
.btns{
text-align:center;
#section_1_bottom{
width:246px;
height:17px;
background:url(../img/section_1_bottom_bg.jpg)no-repeat;
#section2{
#section_2_top{
height:42px;
background:url(../img/section_2_top_bg.jpg)no-repeat;
#section_2_mid{
background:url(../img/section_2_mid_bg.jpg)repeat-y;
padding:5px0;
#section_2_midul{
margin:020px;
#section_2_midli{
border-bottom:1pxdotted#fff;
padding:5px;
#section_2_midlia{
#section_2_midlia:hover{
color:#363;
#section_2_bottom{
background:url(../img/section_2_bottom_bg.jpg)no-repeat;
#content_right{
float:right;
width:580px;
padding:10px;
.post{
.posth1{
font-family:tahoma;
font-size:18px;
color:#588970;
.postp{
font-family:arial;
font-size:12px;
color:#46574d;
text-align:justify;
.postimg{
margin:00025px;
border:1pxsolid#333;
#footer{
color:#7bdaae;
最终的效果图如下：
图2.2效果图
结语
这里需要注意的就是虽然你可以在你的HTML中使用特殊的字体，但是你不可能预测访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。所以在设计网页时一定要考虑浏览器的兼容性问题。