菜鸟联系百度，希望大家指导！！

lingling9978 2014-01-15 06:18:31

菜鸟联系百度，希望大家指导！！目前在学习html和css，页面中有交互行为的都不涉及，目前的计划就是将页面给拼出来。。

首先对可能会看完我写的代码的大神们表示感谢：

以下代码为图片中用红线框住的部分（ps：太弱了，这么点写了好久）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度新闻页</title>
<style type="text/css">
body{margin:0 auto; padding:0; font:12px 宋体; background:#fff;}
h1,h2,h3,ul,li,p,img,form{padding:0; margin:0; list-style:none;}
.clear{clear:both;}
a:link{text-decoration:underline; color:#0000cc ;}a:visited {text-decoration:none ; color:#0000cc ;}a:hover {text-decoration:underline ; color:#0000cc ;}a:active {text-decoration:none ; color:#0000cc ;}

/*框架部分开始*/

#wrapper{width:985px; margin:0 auto; padding-top:28px;min-height:100%;}

/*绝对定位顶部导航*/
.top_nav{height:14px;padding-top:7px;position:fixed; top:0; right:5px;}
.top_nav a{padding-right:5px; }
.top_nav span{display:inline-block; width:1px; height:10px; background:#999999;margin-right:5px;}

/*头部开始*/
#header{}
.logo{width:152px; height:54px; float:left;}
.logo img{width:149px; height:49px; padding-top:5px;}
.search{float:left;}
.search p{}
.search p a{ padding-right:13px; font-size:14px;}
form a{padding-right:8px;}
form span{display:inline-block; width:1px; height:11px; background:#666666; margin-right:8px;}
.tab{margin-top:19px; height:27px;font-size:16px; color:#000;}
.tab ul{margin-left:1px;}
.tab ul li{float:left; width:49px; border-bottom:4px solid #dedede;}
.tab ul li a:hover{border-bottom:4px solid #336699;}
</style>

</head>

<body>
<div id="wrapper">
<div class="top_nav">
<a href="#">百度新闻无线版</a><span></span><a href="#">百度首页</a><span></span><a href="#">登陆</a><span></span><a href="#">注册</a>
</div>

<div id="header">
<div class="logo"><img src="imgs/logo.jpg" alt="百度logo"></div>
<div class="search">
<p><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></p>
<form><input type="text" name="sousuo" style="width:412px; margin-top:9px; height:28px; line-height:28px;"><input type="submit" value="百度一下" style="width:95px; height:32px; line-height:32px; margin-left:5px; margin-right:23px;"><a href="#">帮助</a><span></span><a href="#">高级搜索</a><span></span><a href="#">设置</a><br/><input type="radio" name="ss" value="新闻全文"> 新闻全文 <input type="radio" name="ss" value="新闻全文" > 新闻标题 </form>
</div>
<div class="clear"></div>
<div class="tab"><ul><li>首页</li><li>百家</li><li>上海</li><li>互联网</li><li>国内</li><li>国际</li><li>军事</li><li>财经</li><li>体育</li><li>娱乐</li><li>女人</li><li>科技</li><li>房产</li><li>汽车</li><li>社会</li><li>游戏</li><li>教育</li><li>图片</li><li>人物</li><li>名站</li></ul></div>
</header>

</div>

</body>
</html>

以上代码呈现出来的效果为下图：