html5
html5教程-html第四天网站首页的布局设计到实施
发布时间：2018-12-15 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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>></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>></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>></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>常用文档下载 |</li> <li>支付方式 |</li> <li>网站地图 |</li> <li>合作伙伴 |</li> <li>友情链接 |</li> <li>在线咨询 |</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>>
联系我们
MORE>>
电话：010-51282827手机：l342 6060 l34地址:中关村南大街九龙商务中心C座
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; } 调试图：
项目布局：
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>></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>></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>></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>常用文档下载 |</li> <li>支付方式 |</li> <li>网站地图 |</li> <li>合作伙伴 |</li> <li>友情链接 |</li> <li>在线咨询 |</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>>
联系我们
MORE>>
电话：010-51282827手机：l342 6060 l34地址:中关村南大街九龙商务中心C座- 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教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-html第四天网站首页的布局设计到实施全部内容，希望文章能够帮你解决html5教程-html第四天网站首页的布局设计到实施所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的html5相关文章
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程