菜鸟联系百度,希望大家指导!!

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>

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



说下我遇到的问题:
(1)a标签我的hover属性都没有用,我很纳闷,不知道原因
(2)给form下面的input 标签定的宽度是在ps中量的,可是效果出来总觉得不对劲。
(3)帮助、高级搜索、设置 中的小竖线大家都是怎么写的,我的有问题。。

跪谢啊。。。
...全文
185 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
JPF1024 2014-01-18
  • 打赏
  • 举报
回复
引用 4 楼 lingling9978 的回复:
[quote=引用 3 楼 m6851778 的回复:] 能出个样子就可以了 看起来没什么问题 前端多做一些效果 图片自动 按钮轮播。。。。
en,联系中[/quote] 没明白联系中是什么 建议去网上找一些jquery的效果,有现成的轮播的效果 不然可以用bootcss.com的,这个做的也很漂亮
蝶恋花雨 2014-01-17
  • 打赏
  • 举报
回复
1:第一个问题 会不会是.tab ul li a:hover{border-bottom:4px solid #336699;}这里给覆盖了。可以IE F12查看 2:你可大体估算下,然后在慢慢调
whatisma 2014-01-17
  • 打赏
  • 举报
回复
1、没发现有什么问题 2、定义css要养成好习惯,开头就定义: *{margin:0;padding:0;}不然不同的控件浏览器有默认的空出距离,导致展示效果和你实际定义width和height不一样。 3、小竖线就是键盘enter上面的那个键,按shift+那个键 就可以出来了。
lingling9978 2014-01-17
  • 打赏
  • 举报
回复
引用 3 楼 m6851778 的回复:
能出个样子就可以了 看起来没什么问题 前端多做一些效果 图片自动 按钮轮播。。。。
en,联系中
m6851778 2014-01-17
  • 打赏
  • 举报
回复
能出个样子就可以了 看起来没什么问题 前端多做一些效果 图片自动 按钮轮播。。。。

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧