网页设计之div+css仿搜狐首页
来源：互联网 发布：linux下常用软件 编辑：程序博客网 时间：2024/04/27 18:19
<!-- 今天用div+css做了个仿搜狐的首页，在IE浏览器上运行较好，可供刚学网页设计的同学参考，源码已上传，可在我空间下载--> 
<!-- 以下是搜狐首页源码中的div部分（文件名为：sohu.html） --><!DOCTYPE html><html> <head> <title>搜狐-中国最大的门户网站</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./sohu.css"> <style type="text/css"> /*sohu_tubiao*/ .sohu_tubiao{width: 25px;height: 25px;} </style><link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" /> </head> <body> <!-- ********导航条部分********* --> <div class="top"> <div class="toolbar_logo"><img src="images/toolbar_logo.png"/></div> <div class="login"> <form> <table> <tr valign="middle" align="center"> <td><input type="text" value="用户名或邮箱或手机号" size="17" name="uname"/></td> <td><input type="password" size="8" value="" name="pwd"/></td> <td><input id="sohu_login" type="image" src="images/sohu_login.png"/></td> </tr> </table> </form> </div> <div class="top_link"> <table> <tr valign="middle" align="center"> <td><a href="#">注册</a></td> <td><a href="#">邮件</a></td> <td><a href="#">相册</a></td> <td><a href="#">说两句</a></td> </tr> </table> </div> <div class="gotoBlog"><img src="images/sohu_tp1.png"/></div> </div> <!-- *******************搜狐logo和超链接部分********************** --> <div class="sohu_logo"><img src="images/sohu_logo.png"/></div><!-- <img src="images/sohu_logo.png"/> --> <div class="sohu_link"> <div class="sohu_link_row"> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">地图</a> <a href="">邮件</a> <a href="">微博</a> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">地图</a> <a href="">邮件</a> <a href="">微博</a> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">地图</a> <a href="">百度文库</a> <a href="">暗影之剑</a> <a href="">手机搜狐</a> <a href="">手机游戏</a> </div> <!-- <div class="sohu_waterline"><hr noshade="noshade" align="center" style="height: 1px;"></div> --> <div class="sohu_link_row2"> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">百度新闻</a> <a href="">邮件</a> <a href="">微博</a> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">地图</a> <a href="">邮件</a> <a href="">微博</a> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">地图</a> <a href="">邮件</a> <a href="">暗影之剑</a> <a href="">手机搜狐</a> <a href="">手机游戏</a> </div> <div class="sohu_link_row2" style="margin-bottom: 1px;"> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">房地产商</a> <a href="">邮件</a> <a href="">微博</a> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">地图</a> <a href="">邮件</a> <a href="">微博</a> <a href="">搜狗</a> <a href="">输入法</a> <a href="">浏览器</a> <a href="">地图</a> <a href="">邮件</a> <a href="">暗影之剑</a> <a href="">手机搜狐</a> <a href="">手机游戏</a> </div> </div> <!-- *******************搜狗搜索部分和热点新闻链接部分********************** --> <div class="sogou_box"> <div class="sogou_box_logo"> <table><tr><td align="center" valign="middle"><img src="images/sogou_logo.png"/></td></tr></table> </div> <div class="sogou_box_search"> <form> <table> <tr valign="middle" align="center"> <td><input type="text" value="" size="16" name="serach"/></td> <td><input id="sohu_serach" type="image" src="images/sohu_serach.png"/></td> </tr> </table> </form> </div> <div class="sogou_box_link"> <ul> <li><a href="#">法国总统遭无视</a></li> <li><a href="#">亚洲最丑明星</a></li> <li><a href="#">暴雪袭美</a></li> <li><img id="sogou_ico" src="images/sogou_logo2.png"/></li> <li><a style="margin-left: -7px;" href="#">搜狗浏览器</a></li> <li><a href="#">法国总统遭无视</a></li> <li><a href="#">亚洲最丑明星</a></li> <li><a href="#">暴雪袭美</a></li> <li><img id="sogou_ico" src="images/sogou_logo2.png"/></li> <li><a style="margin-left: -7px;" href="#">搜狗浏览器</a></li> </ul> </div> </div> <!-- *******************搜狐新闻、图片、视频和话题部分********************** --> <div class="sohu_new"> <!--*************** 最左边的部分 *************** --> <div class="sohu_new_part1"> <div class="sohu_new_part1_top"> <div id="font_style1" class="sohu_new_part1_top_left"> <img src="images/sohu_new_part1_ico.png"/> <a href="#">新闻</a> </div> <div class="sohu_new_part1_top_right"> <img src="images/sohu_new_part1_shouji.png"> <a href="#">手机客户端</a> <span> ¦</span> <span>1月5日</span> </div> </div> <!-- *************一条黄线**************** --> <div class="sohu_new__waterline"><hr color="#FFB800"/></div> <!-- *************下面的新闻部分**************** --> <div class="sohu_new_part1_tail"> <ul> <li><a href="#">刘云山:推动形成奋发向上崇德向善的强大力量</a></li> <li><a href="#">海军领导班子调整 田中任副司令员(简历)</a></li> <li><a href="#">中纪委反腐平台再征民意 网友望开通跟帖功能</a></li> <li><a href="#">外媒：总领馆毗邻日本城 纵火动机引人猜测</a></li> <li><a href="#">北京至银川航班遭袭 旅客冲击驾驶舱</a></li> <li><a href="#">安倍回乡为父扫墓谈抱负：使日本成辉煌国家</a></li> <li><a href="#">刘云山:推动形成奋发向上崇德向善的强大力量</a></li> <li><a href="#">海军领导班子调整 田中任副司令员(简历)</a></li> <li><a href="#">中纪委反腐平台再征民意 网友望开通跟帖功能</a></li> <li><a href="#">外媒：总领馆毗邻日本城 纵火动机引人猜测</a></li> <li><a href="#">北京至银川航班遭袭 旅客冲击驾驶舱</a></li> <li><a href="#">安倍回乡为父扫墓谈抱负：使日本成辉煌国家</a></li> </ul></div> </div> <!--*************** 中间的部分 *************** --> <div class="sohu_new_part2"> <!-- ******最左边面部分****** --> <div class="sohu_new_part2_left"> <!-- ******最左边面部分的上面部分***** --><div class="sohu_new_part2_left_top"><a id="font_style1" href="#">图片</a></div><!-- ******最左边面部分的中间部分***** --><div class="sohu_new_part2_left_center"><table><tr><td align="center" valign="middle"><img src="images/sohu_tp2.jpg"/></td></tr></table></div><!-- ******最左边面部分的下面部分***** --><div class="sohu_new_part2_left_tail"><ul><li><a href="#">小S否认追生儿子:没那么爱小孩</a></li><li><a href="#">广电总局：主持不得刻意说方言</a></li><li><a href="#">韩寒导演处女作计划上半年开机</a></li><li><a href="#">小S否认追生儿子:没那么爱小孩</a></li><li><a href="#">广电总局：主持不得刻意说方言</a></li><li><a href="#">韩寒导演处女作计划上半年开机</a></li><li><a href="#">小S否认追生儿子:没那么爱小孩</a></li><li><a href="#">广电总局：主持不得刻意说方言</a></li><li><a href="#">韩寒导演处女作计划上半年开机</a></li></ul></div></div><!-- ******中间垂直线部分****** --> <div class="sohu_new_part2_waterline"></div> <!-- ******最右边部分****** --> <div class="sohu_new_part2_right"> <!-- ******最右边面部分的上面部分***** --> <div class="sohu_new_part2_right_top"> <a id="font_style1" href="#">娱乐</a> </div> <!-- ******最右边面部分的中间部分***** --><div class="sohu_new_part2_right_center"><table><tr><td align="center" valign="middle"><img src="images/sohu_tp1.jpg"/></td></tr></table></div><!-- ******最右边面部分的下面部分***** --><div class="sohu_new_part2_right_tail"><ul><li><a href="#">小S否认追生儿子:没那么爱小孩</a></li><li><a href="#">广电总局：主持不得刻意说方言</a></li><li><a href="#">韩寒导演处女作计划上半年开机</a></li><li><a href="#">小S否认追生儿子:没那么爱小孩</a></li><li><a href="#">广电总局：主持不得刻意说方言</a></li><li><a href="#">韩寒导演处女作计划上半年开机</a></li><li><a href="#">小S否认追生儿子:没那么爱小孩</a></li><li><a href="#">广电总局：主持不得刻意说方言</a></li><li><a href="#">韩寒导演处女作计划上半年开机</a></li></ul></div> </div> </div> <!--*************** 右边的部分 *************** --> <div class="sohu_new_part3"> <!-- ********最上面的欢迎监督部分******* --> <div class="sohu_new_part3_top"><img src="images/sohu_new_part3_top.png"/></div> <!-- *********下面的 大家来讨论 部分********* --> <div class="sohu_new_part3_tail"> <div class="sohu_new_part3_tail_talk"><a href="#">大家谈</a></div> <div class="sohu_new_part3_tail_link"> <ul> <li><a href="#">“小官大贪”的八大特点</a></li> <li><a href="#">为"嫖幼"变"强奸喝彩太早</a></li> <li><a href="#">当前中国经济放缓是好事</a></li> <li><a href="#">在美国工作经验可抵学历</a></li> </ul> </div> </div> </div> </div> </body></html><!-- 以下是搜狐首页源码中的css部分（文件名为：sohu.css） -->/*body*/body{width: 100%;height: 800px;margin: 0px auto;/*border: 1px solid red;*/}/***********************顶部导航条top*******************/.top{width: 100%;height: 30px;background-color: #EFF6FE;margin: 0px;border:1px solid #C0D6EE;font-size: 12px;}/*导航条中的toolbar_logo*/.toolbar_logo{width: 65px;height: 30px;margin-left: 200px;float: left;/*background-color: pink;*/}.toolbar_logo img{width: 65px;height: 18px;margin-top: 6px;}/*导航条中的登录部分login*/.login{width: 263px;height: 30px;margin-left: 20px;/*background-color: pink;*/float: left;}/*登录表单的控制*/.login input{height: 12px;margin-top: 0px;color: silver;}#sohu_login{width: 40px;height: 22px;}/*导航条中的超链接*/.top_link{width: 180px;height: 30px;margin-left: 20px;/*background-color: pink;*/float: left;}.top_link table{margin-top: 4px;}.top_link a{margin-right: 8px;}a:LINK{color: silver;text-decoration: none; }a:HOVER{color: black;text-decoration: underline;}/*导航条中的gotoBlog*/.gotoBlog{float: right;margin-top: 3px;margin-right: 200px; }/***********************搜狐logo和超链接部分*******************//*搜狐logo*/.sohu_logo{width: 140px;height: 75px;margin-left: 200px;margin-top: 5px;/*background-color: pink;*/float: left;}/*导航栏中的超链接*//*sohu_link*/.sohu_link{font-size: 12px;float: left;width: 805px;height: 75px;margin-top: 5px;margin-left: 5px;background-color: silver;}/*sohu_link_row*/.sohu_link_row{float: left;width: 805px;height: 20px;margin-bottom: 1px;padding-top: 5px;background-color: #FFEA8E;}.sohu_link_row a{margin-left: 7px;color: black;}.sohu_link_row a:LINK{text-decoration: none; }.sohu_link_row a:HOVER{color: #CC0000;text-decoration: underline;}/*sohu_link_row2*/.sohu_link_row2{float: left;width: 805px;height: 19px;padding-top: 5px;background-color: #FFFCDC;}.sohu_link_row2 a{margin-left: 7px;color: black;}.sohu_link_row2 a:LINK{text-decoration: none; }.sohu_link_row2 a:HOVER{color: red;text-decoration: underline;}/*水平线的控制sohu_waterline*/.sohu_waterline hr{width: 803px;border-bottom: 0px solid #8B8B8B;padding: 0px;margin: 0px;}/* *******************搜狗搜索部分和热点新闻链接部分********************** *//*sogou_box*/.sogou_box{width: 950px;height: 60px;float: left;margin-left: 200px;margin-top: 13px;background-color: #DAECFF;border: 1px solid #A9CFE3;}/*sogou_box_logo*/.sogou_box_logo{width: 135px;height: 60px;float: left;/*background-color: pink;*/}.sogou_box_logo table{margin-top: 3px;width: 132px;height: 60px;}/*sogou_box_search*/.sogou_box_search{width: 460px;height: 60px;float: left;margin-left: 5px;/*background-color: pink;*/}.sogou_box_search table{margin-top: 1px;width: 465px;height: 60px;margin-left: 0px;}.sogou_box_search input{height: 26px;width: 380px;margin: -5px;}#sohu_serach{width: 90px;height: 34px;margin: 3px 0px 0px 0px;padding: 0px;}/*sogou_box_link*/.sogou_box_link{width: 340px;height: 60px;margin-left: 3px;font-size: 12px;/*border: 1px solid red;*//*background-color: pink;*/float: left;}.sogou_box_link ul{margin: 0px;padding: 0px;}.sogou_box_link li{list-style-type: none;float: left;margin-left: 10px;margin-top: 10px;}/*图标样式控制*/#sogou_ico{width: 18px;height: 17px;padding: 0px;margin-top: -1px;display: block;}.sogou_box_link a:LINK{color: #223D7C;text-decoration: none;}.sogou_box_link a:HOVER{color: #CC0000;text-decoration: underline;}/*******************搜狐新闻、图片、视频和话题部分**********************//*sohu_new最外层的div,里面分三个大的部分*/.sohu_new{width: 951px;height: 600px;float: left;margin-left: 200px;margin-top: 10px;/*background-color: pink;*//*border: 1px solid #A9CFE3;*/}/*最左边的部分*/.sohu_new_part1{width: 319px;height: 400px;float: left;margin: 0px;padding: 0px;/*background-color: #A9CFE3;*/border: 1px solid #D4D4D4;}/*定义一些常用的超链接字体*//*黑色粗体的超链接*/#font_style1{font-size: 14px;font-weight: bold;}/*,.sohu_new_part2_left_top,.sohu_new_part2_right_top*/.sohu_new_part1_top_left a:LINK{color: black;text-decoration: none;}.sohu_new_part1_top_left a:HOVER{color: #CC0000;text-decoration: underline;}.sohu_new_part1_top_right a:LINK{color: gray;}.sohu_new_part1_top_right a:HOVER{color: #CC0000;text-decoration: underline;}/*最上面的sohu_new_part1_top*/.sohu_new_part1_top{width: 319px;height: 24px;float: left;margin: 0px;padding-top: 6px;/*background-color: pink;*/}.sohu_new_part1_top img,a{float: left;margin-left: 5px;}/*sohu_new_part1_top中左边部分*/.sohu_new_part1_top_left{float: left;}/*sohu_new_part1_top中右边部分*/.sohu_new_part1_top_right{float: right;font-size: 12px;color: silver;}/*水平黄线部分*/.sohu_new_waterline{width: 318px;color: #FFB800;float: left;margin: 0px;padding: 0px;}/******下面的新闻部分******/.sohu_new_part1_tail{font-size: 14px;width: 319px;height: 200px;float: left;margin: 0px;padding: 0px;/*background-color: pink;*/}.sohu_new_part1_tail ul{margin: 0px 0px 0px 20px;padding: 0px;list-style-type: none;list-style-image: url("images/sohu_new_part1_tail_square.png");}.sohu_new_part1_tail li{margin-top: 10px;float: left;}.sohu_new_part1_tail a:LINK{color: #223D7C;text-decoration: none;}.sohu_new_part1_tail a:HOVER{color: #CC0000;text-decoration: underline;}/**************** 中间的部分 *************** */.sohu_new_part2{width: 435px;height: 400px;margin-left: 8px;/*background-color: pink;*/border: 1px solid #FFE88F;float: left;}/*左边部分*/.sohu_new_part2_left{width: 216px;height: 400px;margin: 0px;padding: 0px;/*background-color: gray;*//*border: 1px solid red;*/float: left;}/*右边部分*/.sohu_new_part2_right{width: 216px;height: 400px;margin: 0px;padding: 0px;/*background-color: gray;*//*border: 1px solid red;*/float: left;}/*左边部分 之 顶部*//*右边部分相同*/.sohu_new_part2_left_top,.sohu_new_part2_right_top{width: 218px;height: 25px;margin-left: 0px;padding-top: 8px;background-color: #FEF6C1;/*border: 1px solid red;*/float: left;}/*左边部分 之 顶部 的 超链接*/.sohu_new_part2_left_top a:LINK{color: black;text-decoration: none;}.sohu_new_part2_left_top a:HOVER{color: #CC0000;text-decoration: underline;}/*右边部分 之 顶部 的 超链接*/.sohu_new_part2_right_top a:LINK{color: black;text-decoration: none;}.sohu_new_part2_right_top a:HOVER{color: #CC0000;text-decoration: underline;}/*左边部分 之 中间部分*/.sohu_new_part2_left_center,.sohu_new_part2_right_center{width: 218px;height: 154px;margin: 0px;padding: 0px;/*background-color: red;*//*border: 1px solid red;*/float: left;}/*左边部分 之 中间部分 中的table控制*/.sohu_new_part2_left_center table{width: 218px;height: 154px;float: left;}.sohu_new_part2_right_center table{width: 218px;height: 154px;float: left;}/*左边部分 之 下面部分*/.sohu_new_part2_left_tail,.sohu_new_part2_right_tail{font-size: 13px;width: 190px;height: 200px;float: left;margin-left: 10px;padding: 0px;/*background-color: pink;*//*border: 1px solid red;*/}/*超链接字体控制*/.sohu_new_part2_left_tail a:LINK{color: #223D7C;text-decoration: none;}.sohu_new_part2_left_tail a:HOVER{color: #CC0000;text-decoration: none;}.sohu_new_part2_right_tail a:LINK{color: #223D7C;text-decoration: none;}.sohu_new_part2_right_tail a:HOVER{color: #CC0000;text-decoration: none;}.sohu_new_part2_left_tail ul{margin: 0px;padding: 0px;}.sohu_new_part2_right_tail ul{margin: 0px;padding: 0px;}.sohu_new_part2_left_tail li{margin-bottom: 8px;padding: 0px;list-style-type: none;float: left;}.sohu_new_part2_right_tail li{margin-bottom: 8px;padding: 0px;list-style-type: none;float: left;}/*中间线部分*/.sohu_new_part2_waterline{height: 400px;margin: 0px;padding: 0px;border-left: 1px solid #FFE88F;/*background-color: gray;*//*border: 1px solid red;*/float: left;}/**************** 右边的部分 *************** */.sohu_new_part3{width: 175px;height: 400px;margin-left: 10px;padding: 0px;/*border: 1px solid #ACD1E4;*//*background-color: pink;*/float: left;}/********* 右边的部分 的上面部分 *******/.sohu_new_part3_top{width: 175px;height: 50px;margin: 0px;padding: 0px;/*border: 1px solid #ACD1E4;*/float: left;}.sohu_new_part3_top img{width: 175px;height: 50px;margin: 0px;padding: 0px;}/********* 右边的部分 的下面部分 *******/.sohu_new_part3_tail{width: 173px;height: 350px;margin-left: 1px;margin-top: 8px;padding: 0px;border: 1px solid #D9D9D9;background-color: #F7F7F7;float: left;}/*大家来讨论*/.sohu_new_part3_tail_talk{font-size: 14px;font-weight: bold;width: 165px;height: 35px;margin-top: 8px;padding-top: 3px;padding-left: 5px;float: left;background-color: #FFFFFF;}.sohu_new_part3_tail_talk a:LINK{color: #333333;text-decoration: none;}.sohu_new_part3_tail_talk a:HOVER{color: #CC0000;text-decoration: underline;}/*超链接部分*/.sohu_new_part3_tail_link{font-size: 12px;width: 171px;height: 300px;margin-left: 1px;margin-top: 8px;padding: 0px;/*border: 1px solid #D9D9D9;*//*background-color: red;*/float: left;}.sohu_new_part3_tail_link ul{margin-left: 18px;padding: 0px;list-style-type: none;list-style-image: url("images/sohu_new_part1_tail_square.png");}.sohu_new_part3_tail_link li{float: left;margin-bottom: 8px;padding: 0px;}.sohu_new_part3_tail_link a:LINK{color: #223D7C;text-decoration: none;}.sohu_new_part3_tail_link a:HOVER{color: #CC0000;text-decoration: underline;}
0 0
