html文件：
<html>
<head>
<title>搜狐首页</title>
<link rel="stylesheet" type="text/css" href="souhu.css">
</head>
<body>
<!--首页top部分总-->
<div class="top">
<!--首页top左侧logo-->
<div class="toplogo">
<img src="toplogo.jpg"/>
</div>
<!--首页top左侧登陆框-->
<div class="toptext">
<form action="#.html" method="post">
<input type="text" name="username"/>
<input type="password" name="passwoed"/>
<input type="submit" value="登录"/>
</form>
</div>
<!--首页top文字链-->
<div class="topword">
<span>注册</span>
<span>邮件</span>
<span>相册</span>
<span>说两句</span>
</div>
<!--首页top右侧-->
<div class="topright">
<span>进入微博</span>
</div>
</div>
<!--首页左侧logo图片-->
<div class="souhulogo">
<img src="souhulogo.jpg"/>
</div>
<!--首页导航栏-->
<div class="home">
<div class="hometop">
<span>搜狗</span>
<span>输入法</span>
<span>浏览器</span>
<span>地图</span>
<span>邮件</span>
<span>微博</span>
<span>博客</span>
<span>BBS</span>
<span>我说两句</span>
<span>微门户</span>
<span>大视野</span>
<span>视频</span>
<span>校友录</span>
<span>游戏</span>
<span>新天龙</span>
<span>微门户</span>
<span>幻想神域</span>
<span>手机搜狐</span>
<span>听书</span>
<span>手机游戏</span>
<span>e购房</span>
</div>
<div class="homebottom">
<span>新闻</span>
<span>军事</span>
<span>文化</span>
<span>历史</span>
<span>读书</span>
<span>原创</span>
<span>评论</span>
<span>体育</span>
<span>NBA</span>
<span>CBA</span>
<span>中超</span>
<span>高尔夫</span>
<span>财经</span>
<span>理财</span>
<span>股票</span>
<span>基金</span>
<span>IT</span>
<span>数码</span>
<span>手机</span>
<span>汽车</span>
<span>二手车</span>
<span>房产</span>
<span>二手房</span>
<span>家居</span>
<span>时尚</span>
<span>女人</span>
<span>男人</span>
<span>奢侈品</span>
<span>美容</span>
<span>美食</span>
<span>星座</span>
<span>母婴</span>
<span>健康</span>
<span>旅游</span>
<span>教育</span>
<span>出国</span>
<span>高考</span>
<span>公益</span>
<span>绿色</span>
<span>播客</span>
<span>娱乐</span>
<span>美剧</span>
<span>音乐</span>
<span>彩票</span>
<span>城市</span>
</div>
</div>
<!--首页广告栏总-->
<div class="ad">
<!--广告栏左-->
<div class="adleft">
<span>最新2014世界大学排名</span></br>
<span>中国推出Excel服务器</span></br>
<span>北大软件工程二学位！</span></br>
<span>选对！给父母最好礼物</span></br>
<span>美国加州名校快捷通道</span></br>
<span>2104考托福雅思必读！</span></br>
<span>英国击剑夏令营</span></br>
<span>绿地美国精品项目</span></br>
<span>英语很烂一学就会</span></br>
<span>25万欧拿欧盟身份</span>
</div>
<!--广告栏中-->
<div class="admiddle">
<span>2014世界大学排名</span>
<span>点亮留学智慧人生</span>
<span>10天一口流利英语</span>
<span>人民大学金融硕士</span></br>
<span>新东方报名入口</span>  
<span>林卡高清视频通话</span>
<span>青少口语迅速突破</span>
<span>Dota第一视角直播</span>
<img src="ad1.jpg"/>
<span>255倍挑战页游加速上限</span> 
<span>lol高端排位 大神直播中</span>
<span>关注石景山微信有“礼”</span></br>
<span>游戏浏览器尽揽游戏特权</span>
<span>爱玩游戏，就上17173！</span> 
<span>17173你的游戏好伙伴！</span>
</div>
<!--广告栏右-->
<div class="adright">
<span>中国当代十大建筑</span></br>
<span>来自长城脚下的邀请</span></br>
<span>五环纯新盘独享特惠</span></br>
<span>莲石路小面积享特惠</span></br>
<span>独家策划买房官网</span></br>
<span>90万房山邻铁开间</span></br>
<span>通州二居洋房110万</span></br>
<span>独家全面解读自住房</span></br>
<span>北京最全现房汇总</span></br>
<span>独家：亦庄置业必读</span>
</div>
<!--广告栏右侧图片-->
<div class="adpicture">
<img src="ad2.jpg"/>
</div>
</div>
<!--搜索框-->
<div class="search">
<!--搜索框左侧logo-->
<div class="searchlogo">
<img src="sousuologo.jpg"/>
</div>
<!--搜索框中间部分-->
<div class="searchmiddle">
<input style="width:350px;height:36px;" type="text" name="search"/>
<input style="width:100px;height:36px;" type="submit" value="搜索"/>
</div>
<!--搜索框右侧文字-->
<div class="searchright">
<span>自制吸金球</span>
<span>城管扫街作秀</span>
<span>中央纪委官网</span>
<span>搜狗浏览器</span></br>
<span>小团圆票房</span>
<span>42岁美女外婆</span>
<span>每家都有飞机</span>
<span>搜狗输入法</span>
</div>
</div>
</body>
</html>
css文件：
body{
width:950px;
height:800px;
margin:0 auto;
font-size:12px;
}
.top{
width:950px;
height:33px;
border-bottom:1px solid silver;
background-color:#F1F8FE;
}
.toplogo{
width:67px;
height:25px;
float:left;
margin-top:5px;
}
.toptext{
width:375px;
height:25px;
float:left;
margin:5 0 0 5;
}
.topword{
width:130px;
height:15px;
float:left;
margin:10 0 0 5;
}
.topright{
width:50px;
height:15px;
float:right;
margin:10 0 0 0;
}
.souhulogo{
width:140px;
height:77px;
float:left;
margin-top:5px;
}
.souhulogo img{
width:140px;
height:77px;
}
.home{
width:800px;
height:77px;
float:right;
margin-top:5px;
}
.hometop{
width:800px;
height:25px;
border-bottom:1px solid silver;
background-color:#FFEA8E;
}
/*调导航字体*/
.hometop span{
float:left;
padding-top:6px;
padding-left:5px;
}
.homebottom{
width:800px;
height:50px;
border-bottom:1px solid silver;
background-color:#FFFDDD;
}
.homebottom span{
float:left;
padding-top:6px;
padding-left:10px;
}
.ad{
width:950px;
height:230px;
border:1px solid silver;
float:left;
margin-top:5px;
color:#223D7C;
}
.adleft{
width:140px;
height:210px;
float:left;
margin:8 0 0 5;
line-height:21px;/*调行高*/
}
.admiddle{
width:450px;
height:210px;
float:left;
margin:8 0 0 10;
line-height:27px;
}
.adright{
width:145px;
height:210px;
float:left;
margin:8 0 0 13;
line-height:21px;
}
.adpicture{
width:180px;
height:230px;
border-left:1px solid silver;
float:right;
text-align:center;/*使其水平居中*/
}
.adpicture img{
margin-top:13px;
}
.search{
width:950px;
height:60px;
border:1px solid silver;
float:left;
margin-top:5px;
background-color:#D6EBFF;
}
.searchlogo{
width:120px;
height:36px;
margin:12 0 0 5;
float:left;
}
.searchmiddle{
width:470px;
height:36px;
margin:12 0 0 5;
float:left;
}
.searchright{
width:330;
height:36px;
margin:12 0 0 5;
float:right;
}
.searchright span{
padding-left:11px;
line-height:20px;
color:#223D7C;
}
显示效果：
扫一扫
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
