<!-- 今天用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;
}
852
11-26
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
