简易版百度首页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简易版百度首页相关的知识,希望对你有一定的参考价值。

代码html:

<!DOCTYPE html>
<html>
<head>
<title>百度一下,你就知道</title>
<meta charset="UTF-8" />
<meta name="keywords" content="关键字">
<meta name="description" content="描述">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="baidu.css">
</head>
<body>
<div class="wrpper">
<header>
<nav>
<a href="http://news.baidu.com/">新闻</a>
<a href="http://www.hao123.com/">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://v.baidu.com/">视频</a>
<a href="http://tieba.baidu.com/">贴吧</a>
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
<a href="javascript:;">设置</a>
<a href="javascript:;">更多产品</a>
</nav>

</header>
<div class="content">
<img src="img/bd_logo1.png" alt="百度一下">
<form action="https://www.baidu.com/s" method="get" target="_blank">
<input type="text" name="wd">
<button type="submit">百度一下</button>
</form>
</div>

<footer>
<p>
<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为首页</a>
<a href="http://home.baidu.com/">关于百度</a>
<a href="http://ir.baidu.com/">About Baidu</a>
</p>
<p>
<span>©2016 Baidu</span>
<!-- 文本用span标签,方便修改 -->
<a href="http://www.baidu.com/duty/">使用百度前必读</a>
<a href="http://jianyi.baidu.com/">意见反馈</a>
<span>京ICP证030173号</span>
</p>
</footer>
</div>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------

CSS:

body{
font:12px arial;
}

header{
overflow: hidden;
}

header nav{
width: 400px;
float:right;
}

header nav a{
margin-left: 15px;
}

/*主体部分*/
.content{
text-align: center;
}

.content img{
width:270px;
height: 129px;
}

.content input{
width: 450px;
height:34px;
}

.content button{
width:100px;
height: 38px; 有默认的2px的边框
}

footer{
padding-top:10px;
}

footer p{
text-align: center;
}

 

以上是关于简易版百度首页的主要内容,如果未能解决你的问题,请参考以下文章

第八课 简易网页制作 模仿百度首页

像百度知道首页,点登录,整个网页变暗,且不能操作,只有中间亮,这个是怎么实现的求

百度富文本编辑器

百度网站首页的URL是多少呢?

百度首页无法搜索?

Android简易音乐重构MVVM Java版-新增推荐雷达歌单及重构首页(十三)