摘要:项目布局: index.html images |–index.css |–reset.cssindex代码: /

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

项目布局:
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; }

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

核心业务

MORE>>

电子商务类网站建设

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

新闻门户类网站建设

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

企业展示类网站建设

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

网站维护外包

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

文章观点

MORE>>

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

联系我们

MORE>>

  • 电话:010-51282827
  • 手机:l342 6060 l34
  • 地址:中关村南大街九龙商务中心C座
  • html5教程-html第四天网站首页的布局设计到实施-脚本宝典web@spamlionhit.com

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

? 2006-2009 北京市灵犀慧通科技有限公司 版权所有 https://www.lionhit.com 京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict

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教程-html第四天网站首页的布局设计到实施-脚本宝典

html5教程-html第四天网站首页的布局设计到实施-脚本宝典
html5教程-html第四天网站首页的布局设计到实施-脚本宝典
html5教程-html第四天网站首页的布局设计到实施-脚本宝典
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; }

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

核心业务

MORE>>

电子商务类网站建设

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

新闻门户类网站建设

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

企业展示类网站建设

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

网站维护外包

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

文章观点

MORE>>

html5教程-html第四天网站首页的布局设计到实施-脚本宝典

联系我们

MORE>>

  • 电话:010-51282827
  • 手机:l342 6060 l34
  • 地址:中关村南大街九龙商务中心C座
  • html5教程-html第四天网站首页的布局设计到实施-脚本宝典web@spamlionhit.com

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

? 2006-2009 北京市灵犀慧通科技有限公司 版权所有 https://www.lionhit.com 京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict

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教程-html第四天网站首页的布局设计到实施-脚本宝典

html5教程-html第四天网站首页的布局设计到实施-脚本宝典
html5教程-html第四天网站首页的布局设计到实施-脚本宝典
html5教程-html第四天网站首页的布局设计到实施-脚本宝典
html5教程-html第四天网站首页的布局设计到实施-脚本宝典

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

本文固定链接: http://www.js-code.com/html5%e6%95%99%e7%a8%8b/html5%e6%95%99%e7%a8%8b_2368.html