html第四天网站首页的布局设计到实施

时间2024-01-26 17:23:03发布访客分类HTML浏览391

导读：收集整理的这篇文章主要介绍了html5教程-html第四天网站首页的布局设计到实施，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。项目布局： i...

收集整理的这篇文章主要介绍了html5教程-html第四天网站首页的布局设计到实施，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

项目布局：
index.htML
images
|–index.css
|–reset.css

index代码:

 !DOCTYPE html>
     html>
     head>
         meta charset="utf-8">
         tITle>
    /title>
         link rel="stylesheet" type="text/css" href="./images/index.css">
         /head>
     body>
     !-- 页面布局 -->
     p id="matrix">
         !-- 头部区域 -->
         p id="header">
             img src="./images/LOGo.jpg" alt = "" />
             !-- 菜单导航 -->
             p id="menu">
                 ul>
                     li class = "menu_li">
    a href="#">
    首页/a>
    /li>
                     li class = "menu_li">
    a href="#">
    业务介绍/a>
    /li>
                     li class = "menu_li">
    a href="#">
    技术优势/a>
    /li>
                     li class = "menu_li">
    a href="#">
    精品案例/a>
    /li>
                     li class = "menu_li">
    a href="#">
    关于灵犀/a>
    /li>
                     li class = "menu_li">
    a href="#">
    文章观点/a>
    /li>
                     li class = "menu_li">
    a href="#">
    联系我们/a>
    /li>
                 /ul>
             /p>
         /p>
         !-- 头部区域 end -->
          !-- 主体区域 -->
         p id="main">
             p id = "banner">
                  img src="./images/about_banner.jpg" alt="">
             /p>
              !-- 主体左侧 -->
             p id="lside">
                 !-- 标题区 -->
                 p class="suBTitle">
                     img src="./images/circle.gif" alt="" id = "t1">
                     h1>
    核心业务/h1>
                     h2>
    MORE&
    gt;
    &
    gt;
    /h2>
                 /p>
                 !-- 标题区 end-->
                   !-- 左侧内容区 -->
                 p class="l_article">
                     h2>
    电子商务类网站建设/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                 p class="l_article">
                     h2>
    新闻门户类网站建设/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                 p class="l_article">
                     h2>
    企业展示类网站建设/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                 p class="l_article">
                     h2>
    网站维护外包/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                               /p>
             !-- 主体左侧 end-->
              !-- 主体右侧 -->
             p id="rside">
                  !-- 标题区 -->
                 p class="subtitle">
                     img src="./images/circle.gif" alt="" id = "t1">
                     h1>
    文章观点/h1>
                     h2>
    MORE&
    gt;
    &
    gt;
    /h2>
                 /p>
                 !-- 标题区 end-->
                   !-- 右侧上 -->
                 p id="r_article_top">
                     ul>
                         li>
    a href="#">
    走在程序员路上的那些日子1/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子2/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子3/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子4/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子5/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子6/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子7/a>
    /li>
                     /ul>
                 /p>
                 !-- 右侧上 end-->
                  !--右侧下 -->
                 p id="r_article2_bottom">
                     !-- 标题区 -->
                     p class="subtitle">
                         img src="./images/circle.gif" alt="" id = "t1">
                         h1>
    联系我们/h1>
                         h2>
    MORE&
    gt;
    &
    gt;
    /h2>
                     /p>
                     !-- 标题区 end-->
                 p id = "address">
                     ul>
                         li>
    电话：010-51282827/li>
                         li>
    手机：l342 6060 l34/li>
                         li>
    地址:中关村南大街九龙商务中心C座/li>
                         li>
    img src = "./images/email.gif">
    span>
    web@sPAMlionhit.COM/span>
    /li>
                     /ul>
                 /p>
                   /p>
                 !--右侧下 end-->
             /p>
             !-- 主体右侧 end -->
         /p>
         !-- 主体区域 end-->
          !-- footer 区 -->
         p id="footer">
             !-- 站内导航区 -->
             p id="ulink">
                 ul>
                     li>
    常用文档下载&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    支付方式&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    网站地图&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    合作伙伴&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    友情链接&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    在线咨询&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                 /ul>
             /p>
             !-- 站内导航区 end-->
              !-- 版权区域 -->
             p id = "copyRight">
    ? 2006-2009 北京市灵犀慧通科技有限公司 版权所有 https://www.lionhit.com 京ICP备07020337号 a href="#">
    W3C Valid CSS/a>
     a href="#">
    W3C Valid XHTML 1.0 Strict/a>
    /p>
             !-- 版权区域 end-->
             /p>
         !-- footer 区结束 -->
      /p>
      /body>
     /html>
 reset.css代码(初始化css)：  /*css reset code */  /****  文字大小初始化,使1em=10px *****/ body {
     font-Size:62.5%;
 }
     /* for IE/Win */ html>
body {
     font-size:16px;
 }
 /* for everything else */  /*字体边框等初始化*/ body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,PRe,form,fieldset,input,textarea,p,blockquote,th,td {
      padding: 0;
      margin: 0;
      font-family: "微软雅黑";
  }
 table {
      border-collapse: collapse;
      border-spacing: 0;
  }
 fieldset,img {
      border: 0;
  }
  img {
      display:block;
  }
 address,caption,cite,code,DFn,th,VAR {
      font-weight: normal;
      font-style: normal;
  }
 ol,ul {
      list-style: none;
  }
 caption,th {
      text-align: left;
  }
 h1,h2,h3,h4,h5,h6 {
      font-weight: normal;
      font-size: 100%;
  }
 q:before,q:after {
      content:‘‘;
  }
 abbr,acronym {
     border: 0;
  }
  a {
     text-decoration:none;
 }
     index.css代码(首页布局css):  @import url(reset.css);
 #matrix{
         width:1002px;
         margin:0px auto;
 }
 #header{
         background-image: url(top_bg.jpg);
         background-color: #EEE;
         width:1002px;
         height:128px;
 }
 .menu_li{
         float:left;
         width:92px;
         height:37px;
         margin-right:2px;
 }
 .menu_li a {
         display:block;
          height:37px;
         text-align:center;
         font-size:16px;
         font-family:"微软雅黑","黑体",sans-serif;
         line-height: 37px;
         color:#363636;
 }
 .menu_li a:hover{
         background-image: url(./nav_on.gif);
         color:white;
 }
 .menu_li a:link{
         color:black;
 }
 .menu_lia:visited {
         color: black;
 }
 #banner{
         margin: 5px 0;
 }
  #main{
         width:1002px;
         height: 473px;
 }
 #lside{
         background: white;
         float:left;
         width:694px;
         height:473px;
         border:1px solid #E7E7E7;
            margin-bottom: 20px;
 }
  .subtitle{
         background:#E7E7E7 url(index_main_top_bg.gif) repeat-x;
         width:auto;
         height: 37px;
         margin-bottom: 3px;
 }
 .subtitle img{
         display: inline;
         margin: 5px 10px 0 10px;
         float: left;
 }
 .subtitle h1{
         line-height: 37px;
         color: black;
         margin: 0 10 0 10px;
         float: left;
 }
  .subtitle h2{
         line-height: 37px;
         color: black;
         float: right;
 }
 .l_article{
         width: 316px;
         height: 188px;
         margin: 10px;
         background-color: #E7E7E7;
         float: left;
         padding: 10px 0 0 10px;
         color: #A0A0A0;
 }
 #lside .l_article img{
         margin-top: 3px;
         float: left;
         display: inline;
         padding:5px;
         background: white;
         width: 180px;
         height: 145px;
  }
 #lside li{
         float: left;
         display: inline;
         background: url(service_intro_bg.gif) no-repeat;
         padding: 0 0 8px 12px;
         line-height: 17px;
         margin: 0 0 0 6px;
 }
  #rside{
         background:white;
         width:294px;
         height:473px;
            float:right;
 }
 #rside #r_article_top{
         background:#E7E7E7;
         width:294px;
         height:213px;
         margin-top:2px;
 }
    #rside #r_article_top a{
         display: block;
         width:269px;
         height: 29px;
         padding: 8px 0 0 25px;
         color: #808080;
  }
 #rside #r_article_top a:hover{
         background:#EEE url(article_on_bg.gif) no-repeat;
         color:#FF832C;
         background: #EEE url(article_head.gif) no-repeat;
    }
  #rside #r_article_top li{
         background:url(./article_head.gif) no-repeat;
         color:#808080;
         font-size: 12px;
         width:294px;
         height: 29px;
         display: block;
         font-family: "宋体";
 }
     #rside #r_article2_bottom{
         widows: 294px;
         height: 213px;
         margin-top:10px;
             background:#E7E7E7;
 }
 #r_article2_bottom #address li{
         font-family: "宋体";
         font-size: 14px;
         padding: 20px 0 0 15px;
 }
 #r_article2_bottom #address li img{
         display: inline;
         float: left;
         margin-right:16px;
 }
 #r_article2_bottom #address span{
         display: block;
         float: left;
         padding:-20px 0 0 10;
 }
 #footer{
         clear: both;
         width:1002px;
         height: 120px;
 }
 #footer #ulink{
         width:1002px;
         height: 40px;
         background: #E7E7E7;
  }
  #footer #ulink li{
         display: inline;
         line-height: 40px;
         color:#979797;
         margin:0 5px 0 10px;
 }
 #footer #copyRight{
         width: 1002px;
         height:20px;
         font-size: 12px;
         color:#979797;
    ;
 }
 #footer #copyRight a{
         color:#FF832C;
 }
 #footer #copyRight a:hover{
         color:#979797;
 }

首页
业务介绍
技术优势
精品案例
关于灵犀
文章观点
联系我们

`核心业务`

`MORE> >`

`电子商务类网站建设`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`新闻门户类网站建设`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`企业展示类网站建设`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`网站维护外包`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`文章观点`

`MORE> >`

走在程序员路上的那些日子1
走在程序员路上的那些日子2
走在程序员路上的那些日子3
走在程序员路上的那些日子4
走在程序员路上的那些日子5
走在程序员路上的那些日子6
走在程序员路上的那些日子7

`联系我们`

`MORE> >`

电话：010-51282827
手机：l342 6060 l34
地址:中关村南大街九龙商务中心C座
web@spamlionhit.com

常用文档下载 |
支付方式 |
网站地图 |
合作伙伴 |
友情链接 |
在线咨询 |

reset.css代码(初始化css)：

 /*css reset code */  /****  文字大小初始化,使1em=10px *****/ body {
     font-size:62.5%;
 }
     /* for IE/Win */ html>
body {
     font-size:16px;
 }
 /* for everything else */  /*字体边框等初始化*/ body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
      padding: 0;
      margin: 0;
      font-family: "微软雅黑";
  }
 table {
      border-collapse: collapse;
      border-spacing: 0;
  }
 fieldset,img {
      border: 0;
  }
  img {
      display:block;
  }
 address,caption,cite,code,dfn,th,var {
      font-weight: normal;
      font-style: normal;
  }
 ol,ul {
      list-style: none;
  }
 caption,th {
      text-align: left;
  }
 h1,h2,h3,h4,h5,h6 {
      font-weight: normal;
      font-size: 100%;
  }
 q:before,q:after {
      content:'';
  }
 abbr,acronym {
     border: 0;
  }
  a {
     text-decoration:none;
 }

index.css代码(首页布局css):

 @import url(reset.css);
 #matrix{
         width:1002px;
         margin:0px auto;
 }
 #header{
         background-image: url(top_bg.jpg);
         background-color: #EEE;
         width:1002px;
         height:128px;
 }
 .menu_li{
         float:left;
         width:92px;
         height:37px;
         margin-right:2px;
 }
 .menu_li a {
         display:block;
          height:37px;
         text-align:center;
         font-size:16px;
         font-family:"微软雅黑","黑体",sans-serif;
         line-height: 37px;
         color:#363636;
 }
 .menu_li a:hover{
         background-image: url(./nav_on.gif);
         color:white;
 }
 .menu_li a:link{
         color:black;
 }
 .menu_lia:visited {
         color: black;
 }
 #banner{
         margin: 5px 0;
 }
  #main{
         width:1002px;
         height: 473px;
 }
 #lside{
         background: white;
         float:left;
         width:694px;
         height:473px;
         border:1px solid #E7E7E7;
            margin-bottom: 20px;
 }
  .subtitle{
         background:#E7E7E7 url(index_main_top_bg.gif) repeat-x;
         width:auto;
         height: 37px;
         margin-bottom: 3px;
 }
 .subtitle img{
         display: inline;
         margin: 5px 10px 0 10px;
         float: left;
 }
 .subtitle h1{
         line-height: 37px;
         color: black;
         margin: 0 10 0 10px;
         float: left;
 }
  .subtitle h2{
         line-height: 37px;
         color: black;
         float: right;
 }
 .l_article{
         width: 316px;
         height: 188px;
         margin: 10px;
         background-color: #E7E7E7;
         float: left;
         padding: 10px 0 0 10px;
         color: #A0A0A0;
 }
 #lside .l_article img{
         margin-top: 3px;
         float: left;
         display: inline;
         padding:5px;
         background: white;
         width: 180px;
         height: 145px;
  }
 #lside li{
         float: left;
         display: inline;
         background: url(service_intro_bg.gif) no-repeat;
         padding: 0 0 8px 12px;
         line-height: 17px;
         margin: 0 0 0 6px;
 }
  #rside{
         background:white;
         width:294px;
         height:473px;
            float:right;
 }
 #rside #r_article_top{
         background:#E7E7E7;
         width:294px;
         height:213px;
         margin-top:2px;
 }
    #rside #r_article_top a{
         display: block;
         width:269px;
         height: 29px;
         padding: 8px 0 0 25px;
         color: #808080;
  }
 #rside #r_article_top a:hover{
         background:#EEE url(article_on_bg.gif) no-repeat;
         color:#FF832C;
         background: #EEE url(article_head.gif) no-repeat;
    }
  #rside #r_article_top li{
         background:url(./article_head.gif) no-repeat;
         color:#808080;
         font-size: 12px;
         width:294px;
         height: 29px;
         display: block;
         font-family: "宋体";
 }
     #rside #r_article2_bottom{
         widows: 294px;
         height: 213px;
         margin-top:10px;
             background:#E7E7E7;
 }
 #r_article2_bottom #address li{
         font-family: "宋体";
         font-size: 14px;
         padding: 20px 0 0 15px;
 }
 #r_article2_bottom #address li img{
         display: inline;
         float: left;
         margin-right:16px;
 }
 #r_article2_bottom #address span{
         display: block;
         float: left;
         padding:-20px 0 0 10;
 }
 #footer{
         clear: both;
         width:1002px;
         height: 120px;
 }
 #footer #ulink{
         width:1002px;
         height: 40px;
         background: #E7E7E7;
  }
  #footer #ulink li{
         display: inline;
         line-height: 40px;
         color:#979797;
         margin:0 5px 0 10px;
 }
 #footer #copyRight{
         width: 1002px;
         height:20px;
         font-size: 12px;
         color:#979797;
    ;
 }
 #footer #copyRight a{
         color:#FF832C;
 }
 #footer #copyRight a:hover{
         color:#979797;
 }

调试图：

项目布局：
index.html
images
|–index.css
|–reset.css

index代码:

 !DOCTYPE html>
     html>
     head>
         meta charset="utf-8">
         title>
    /title>
         link rel="stylesheet" type="text/css" href="./images/index.css">
         /head>
     body>
     !-- 页面布局 -->
     p id="matrix">
         !-- 头部区域 -->
         p id="header">
             img src="./images/logo.jpg" alt = "" />
             !-- 菜单导航 -->
             p id="menu">
                 ul>
                     li class = "menu_li">
    a href="#">
    首页/a>
    /li>
                     li class = "menu_li">
    a href="#">
    业务介绍/a>
    /li>
                     li class = "menu_li">
    a href="#">
    技术优势/a>
    /li>
                     li class = "menu_li">
    a href="#">
    精品案例/a>
    /li>
                     li class = "menu_li">
    a href="#">
    关于灵犀/a>
    /li>
                     li class = "menu_li">
    a href="#">
    文章观点/a>
    /li>
                     li class = "menu_li">
    a href="#">
    联系我们/a>
    /li>
                 /ul>
             /p>
         /p>
         !-- 头部区域 end -->
          !-- 主体区域 -->
         p id="main">
             p id = "banner">
                  img src="./images/about_banner.jpg" alt="">
             /p>
              !-- 主体左侧 -->
             p id="lside">
                 !-- 标题区 -->
                 p class="subtitle">
                     img src="./images/circle.gif" alt="" id = "t1">
                     h1>
    核心业务/h1>
                     h2>
    MORE&
    gt;
    &
    gt;
    /h2>
                 /p>
                 !-- 标题区 end-->
                   !-- 左侧内容区 -->
                 p class="l_article">
                     h2>
    电子商务类网站建设/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                 p class="l_article">
                     h2>
    新闻门户类网站建设/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                 p class="l_article">
                     h2>
    企业展示类网站建设/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                 p class="l_article">
                     h2>
    网站维护外包/h2>
                     img src="./images/eshop_service.jpg" alt="">
                     ul>
                         li>
    设计风格1/li>
                         li>
    设计风格2/li>
                         li>
    设计风格3/li>
                         li>
    设计风格4/li>
                         li>
    设计风格5/li>
                     /ul>
                 /p>
                               /p>
             !-- 主体左侧 end-->
              !-- 主体右侧 -->
             p id="rside">
                  !-- 标题区 -->
                 p class="subtitle">
                     img src="./images/circle.gif" alt="" id = "t1">
                     h1>
    文章观点/h1>
                     h2>
    MORE&
    gt;
    &
    gt;
    /h2>
                 /p>
                 !-- 标题区 end-->
                   !-- 右侧上 -->
                 p id="r_article_top">
                     ul>
                         li>
    a href="#">
    走在程序员路上的那些日子1/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子2/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子3/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子4/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子5/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子6/a>
    /li>
                         li>
    a href="#">
    走在程序员路上的那些日子7/a>
    /li>
                     /ul>
                 /p>
                 !-- 右侧上 end-->
                  !--右侧下 -->
                 p id="r_article2_bottom">
                     !-- 标题区 -->
                     p class="subtitle">
                         img src="./images/circle.gif" alt="" id = "t1">
                         h1>
    联系我们/h1>
                         h2>
    MORE&
    gt;
    &
    gt;
    /h2>
                     /p>
                     !-- 标题区 end-->
                 p id = "address">
                     ul>
                         li>
    电话：010-51282827/li>
                         li>
    手机：l342 6060 l34/li>
                         li>
    地址:中关村南大街九龙商务中心C座/li>
                         li>
    img src = "./images/email.gif">
    span>
    web@spamlionhit.com/span>
    /li>
                     /ul>
                 /p>
                   /p>
                 !--右侧下 end-->
             /p>
             !-- 主体右侧 end -->
         /p>
         !-- 主体区域 end-->
          !-- footer 区 -->
         p id="footer">
             !-- 站内导航区 -->
             p id="ulink">
                 ul>
                     li>
    常用文档下载&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    支付方式&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    网站地图&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    合作伙伴&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    友情链接&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                     li>
    在线咨询&
    nbsp;
    &
    nbsp;
    &
    nbsp;
    &
    nbsp;
    |/li>
                 /ul>
             /p>
             !-- 站内导航区 end-->
              !-- 版权区域 -->
             p id = "copyRight">
    ? 2006-2009 北京市灵犀慧通科技有限公司 版权所有 https://www.lionhit.com 京ICP备07020337号 a href="#">
    W3C Valid CSS/a>
     a href="#">
    W3C Valid XHTML 1.0 Strict/a>
    /p>
             !-- 版权区域 end-->
             /p>
         !-- footer 区结束 -->
      /p>
      /body>
     /html>
 reset.css代码(初始化css)：  /*css reset code */  /****  文字大小初始化,使1em=10px *****/ body {
     font-size:62.5%;
 }
     /* for IE/Win */ html>
body {
     font-size:16px;
 }
 /* for everything else */  /*字体边框等初始化*/ body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
      padding: 0;
      margin: 0;
      font-family: "微软雅黑";
  }
 table {
      border-collapse: collapse;
      border-spacing: 0;
  }
 fieldset,img {
      border: 0;
  }
  img {
      display:block;
  }
 address,caption,cite,code,dfn,th,var {
      font-weight: normal;
      font-style: normal;
  }
 ol,ul {
      list-style: none;
  }
 caption,th {
      text-align: left;
  }
 h1,h2,h3,h4,h5,h6 {
      font-weight: normal;
      font-size: 100%;
  }
 q:before,q:after {
      content:‘‘;
  }
 abbr,acronym {
     border: 0;
  }
  a {
     text-decoration:none;
 }
     index.css代码(首页布局css):  @import url(reset.css);
 #matrix{
         width:1002px;
         margin:0px auto;
 }
 #header{
         background-image: url(top_bg.jpg);
         background-color: #EEE;
         width:1002px;
         height:128px;
 }
 .menu_li{
         float:left;
         width:92px;
         height:37px;
         margin-right:2px;
 }
 .menu_li a {
         display:block;
          height:37px;
         text-align:center;
         font-size:16px;
         font-family:"微软雅黑","黑体",sans-serif;
         line-height: 37px;
         color:#363636;
 }
 .menu_li a:hover{
         background-image: url(./nav_on.gif);
         color:white;
 }
 .menu_li a:link{
         color:black;
 }
 .menu_lia:visited {
         color: black;
 }
 #banner{
         margin: 5px 0;
 }
  #main{
         width:1002px;
         height: 473px;
 }
 #lside{
         background: white;
         float:left;
         width:694px;
         height:473px;
         border:1px solid #E7E7E7;
            margin-bottom: 20px;
 }
  .subtitle{
         background:#E7E7E7 url(index_main_top_bg.gif) repeat-x;
         width:auto;
         height: 37px;
         margin-bottom: 3px;
 }
 .subtitle img{
         display: inline;
         margin: 5px 10px 0 10px;
         float: left;
 }
 .subtitle h1{
         line-height: 37px;
         color: black;
         margin: 0 10 0 10px;
         float: left;
 }
  .subtitle h2{
         line-height: 37px;
         color: black;
         float: right;
 }
 .l_article{
         width: 316px;
         height: 188px;
         margin: 10px;
         background-color: #E7E7E7;
         float: left;
         padding: 10px 0 0 10px;
         color: #A0A0A0;
 }
 #lside .l_article img{
         margin-top: 3px;
         float: left;
         display: inline;
         padding:5px;
         background: white;
         width: 180px;
         height: 145px;
  }
 #lside li{
         float: left;
         display: inline;
         background: url(service_intro_bg.gif) no-repeat;
         padding: 0 0 8px 12px;
         line-height: 17px;
         margin: 0 0 0 6px;
 }
  #rside{
         background:white;
         width:294px;
         height:473px;
            float:right;
 }
 #rside #r_article_top{
         background:#E7E7E7;
         width:294px;
         height:213px;
         margin-top:2px;
 }
    #rside #r_article_top a{
         display: block;
         width:269px;
         height: 29px;
         padding: 8px 0 0 25px;
         color: #808080;
  }
 #rside #r_article_top a:hover{
         background:#EEE url(article_on_bg.gif) no-repeat;
         color:#FF832C;
         background: #EEE url(article_head.gif) no-repeat;
    }
  #rside #r_article_top li{
         background:url(./article_head.gif) no-repeat;
         color:#808080;
         font-size: 12px;
         width:294px;
         height: 29px;
         display: block;
         font-family: "宋体";
 }
     #rside #r_article2_bottom{
         widows: 294px;
         height: 213px;
         margin-top:10px;
             background:#E7E7E7;
 }
 #r_article2_bottom #address li{
         font-family: "宋体";
         font-size: 14px;
         padding: 20px 0 0 15px;
 }
 #r_article2_bottom #address li img{
         display: inline;
         float: left;
         margin-right:16px;
 }
 #r_article2_bottom #address span{
         display: block;
         float: left;
         padding:-20px 0 0 10;
 }
 #footer{
         clear: both;
         width:1002px;
         height: 120px;
 }
 #footer #ulink{
         width:1002px;
         height: 40px;
         background: #E7E7E7;
  }
  #footer #ulink li{
         display: inline;
         line-height: 40px;
         color:#979797;
         margin:0 5px 0 10px;
 }
 #footer #copyRight{
         width: 1002px;
         height:20px;
         font-size: 12px;
         color:#979797;
    ;
 }
 #footer #copyRight a{
         color:#FF832C;
 }
 #footer #copyRight a:hover{
         color:#979797;
 }

首页
业务介绍
技术优势
精品案例
关于灵犀
文章观点
联系我们

`核心业务`

`MORE> >`

`电子商务类网站建设`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`新闻门户类网站建设`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`企业展示类网站建设`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`网站维护外包`

设计风格1
设计风格2
设计风格3
设计风格4
设计风格5

`文章观点`

`MORE> >`

走在程序员路上的那些日子1
走在程序员路上的那些日子2
走在程序员路上的那些日子3
走在程序员路上的那些日子4
走在程序员路上的那些日子5
走在程序员路上的那些日子6
走在程序员路上的那些日子7

`联系我们`

`MORE> >`

电话：010-51282827
手机：l342 6060 l34
地址:中关村南大街九龙商务中心C座
web@spamlionhit.com

常用文档下载 |
支付方式 |
网站地图 |
合作伙伴 |
友情链接 |
在线咨询 |

reset.css代码(初始化css)：

 /*css reset code */  /****  文字大小初始化,使1em=10px *****/ body {
     font-size:62.5%;
 }
     /* for IE/Win */ html>
body {
     font-size:16px;
 }
 /* for everything else */  /*字体边框等初始化*/ body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
      padding: 0;
      margin: 0;
      font-family: "微软雅黑";
  }
 table {
      border-collapse: collapse;
      border-spacing: 0;
  }
 fieldset,img {
      border: 0;
  }
  img {
      display:block;
  }
 address,caption,cite,code,dfn,th,var {
      font-weight: normal;
      font-style: normal;
  }
 ol,ul {
      list-style: none;
  }
 caption,th {
      text-align: left;
  }
 h1,h2,h3,h4,h5,h6 {
      font-weight: normal;
      font-size: 100%;
  }
 q:before,q:after {
      content:'';
  }
 abbr,acronym {
     border: 0;
  }
  a {
     text-decoration:none;
 }

index.css代码(首页布局css):

 @import url(reset.css);
 #matrix{
         width:1002px;
         margin:0px auto;
 }
 #header{
         background-image: url(top_bg.jpg);
         background-color: #EEE;
         width:1002px;
         height:128px;
 }
 .menu_li{
         float:left;
         width:92px;
         height:37px;
         margin-right:2px;
 }
 .menu_li a {
         display:block;
          height:37px;
         text-align:center;
         font-size:16px;
         font-family:"微软雅黑","黑体",sans-serif;
         line-height: 37px;
         color:#363636;
 }
 .menu_li a:hover{
         background-image: url(./nav_on.gif);
         color:white;
 }
 .menu_li a:link{
         color:black;
 }
 .menu_lia:visited {
         color: black;
 }
 #banner{
         margin: 5px 0;
 }
  #main{
         width:1002px;
         height: 473px;
 }
 #lside{
         background: white;
         float:left;
         width:694px;
         height:473px;
         border:1px solid #E7E7E7;
            margin-bottom: 20px;
 }
  .subtitle{
         background:#E7E7E7 url(index_main_top_bg.gif) repeat-x;
         width:auto;
         height: 37px;
         margin-bottom: 3px;
 }
 .subtitle img{
         display: inline;
         margin: 5px 10px 0 10px;
         float: left;
 }
 .subtitle h1{
         line-height: 37px;
         color: black;
         margin: 0 10 0 10px;
         float: left;
 }
  .subtitle h2{
         line-height: 37px;
         color: black;
         float: right;
 }
 .l_article{
         width: 316px;
         height: 188px;
         margin: 10px;
         background-color: #E7E7E7;
         float: left;
         padding: 10px 0 0 10px;
         color: #A0A0A0;
 }
 #lside .l_article img{
         margin-top: 3px;
         float: left;
         display: inline;
         padding:5px;
         background: white;
         width: 180px;
         height: 145px;
  }
 #lside li{
         float: left;
         display: inline;
         background: url(service_intro_bg.gif) no-repeat;
         padding: 0 0 8px 12px;
         line-height: 17px;
         margin: 0 0 0 6px;
 }
  #rside{
         background:white;
         width:294px;
         height:473px;
            float:right;
 }
 #rside #r_article_top{
         background:#E7E7E7;
         width:294px;
         height:213px;
         margin-top:2px;
 }
    #rside #r_article_top a{
         display: block;
         width:269px;
         height: 29px;
         padding: 8px 0 0 25px;
         color: #808080;
  }
 #rside #r_article_top a:hover{
         background:#EEE url(article_on_bg.gif) no-repeat;
         color:#FF832C;
         background: #EEE url(article_head.gif) no-repeat;
    }
  #rside #r_article_top li{
         background:url(./article_head.gif) no-repeat;
         color:#808080;
         font-size: 12px;
         width:294px;
         height: 29px;
         display: block;
         font-family: "宋体";
 }
     #rside #r_article2_bottom{
         widows: 294px;
         height: 213px;
         margin-top:10px;
             background:#E7E7E7;
 }
 #r_article2_bottom #address li{
         font-family: "宋体";
         font-size: 14px;
         padding: 20px 0 0 15px;
 }
 #r_article2_bottom #address li img{
         display: inline;
         float: left;
         margin-right:16px;
 }
 #r_article2_bottom #address span{
         display: block;
         float: left;
         padding:-20px 0 0 10;
 }
 #footer{
         clear: both;
         width:1002px;
         height: 120px;
 }
 #footer #ulink{
         width:1002px;
         height: 40px;
         background: #E7E7E7;
  }
  #footer #ulink li{
         display: inline;
         line-height: 40px;
         color:#979797;
         margin:0 5px 0 10px;
 }
 #footer #copyRight{
         width: 1002px;
         height:20px;
         font-size: 12px;
         color:#979797;
    ;
 }
 #footer #copyRight a{
         color:#FF832C;
 }
 #footer #copyRight a:hover{
         color:#979797;
 }

调试图：

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

Class CSS div HTML Import post-format-gallery

若转载请注明出处： html第四天网站首页的布局设计到实施
本文地址： https://pptw.com/jishu/587055.html

HTML的渲染过程 HTML5之按钮背景不同动画特效设计