> <!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>
<!--新手学完html+css 做个小东西纪念-->
<style>
*{margin:0; padding:0;}
.wrap{width:100%;}
.header{width:100%; height:80px;}
.mainbody{width:70%;height:620px;margin:0 auto;}
.footer{width:640px;height:100px;margin:0 auto;}
div div ul li{float:right;}
.font1{color: #333;
font-weight: bold;
line-height: 24px;
margin-left: 20px;
font-size: 13px;}
.font2{color: #333;
line-height: 24px;
margin-left: 20px;
font-size: 13px;}
.font3{
display:block;
text-align:center;
font-size: 13px;
width: 60px;
height: 24px;
line-height: 24px;
margin:0 10px 0 20px;
background:#3385ff; color:#fff;
text-decoration:none;}
ul{list-style:none;position:absolute; top:20px;right:5px;}
.logo{display:block;margin:75px auto 25px;width:270px;height:129px;}
#submit{width:100px;height:36px;background:#3385ff; border:1px solid #06F;color:#fff;font-size:15px;}
#search{width:526px;height:36px;}
.tubiao{width:630px;margin:0 auto;}
.qrcode_text{float:left;height:46px;line-height:23px;font-size:12px;margin: 8px 0 0 10px;}
.qrcode_img{float:left;}
.qrcode{float:left;width:130px;height:65px;}
.qrcode1{margin:0 20px;}
span{color:#666;font:12px arial}
span1{color:#666;}
.text1{color:#272727;font:12px arial}
.text2{color:#666;font:12px arial}
.banquan{float:left;width:340px;padding:5px 0px; line-height:28px;}
ul li ul li{float:none;}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<ul>
<li><a href="#" class="font3">更多产品</a></li>
<li><a href="#" class="font2">设置</a>
<!-- <ul>
<li><a href="#">搜索设置</a></li>
<li><a href="#">高级搜索</a></li>
<li><a href="#">关闭预测</a></li>
<li><a href="#">搜索历史</a></li>
</ul>-->
</li>
<li><a href="#" class="font2">登录</a></li>
<li><a href="#" class="font1">贴吧</a></li>
<li><a href="#" class="font1">视频</a></li>
<li><a href="#" class="font1">地图</a></li>
<li><a href="#" class="font1">hao123</a></li>
<li><a href="#" class="font1">新闻</a></li>
<li><a href="#" class="font1">糯米</a></li>
</ul>
</div>
<div class="mainbody">
<img class="logo" src="https://www.baidu.com/img/bd_logo1.png">
<div class="tubiao">
<input type="search" name="search" id="search" /><input type="submit" name="submit" id="submit"value="百度一下" /></div>
</div>
<div class="footer">
<div class="qrcode2">
<div class="qrcode">
<div class="qrcode_img">
<img src="%$(X8H(91TWHYA0BA~R%$LL.png" width="60" height="60" />
</div>
<div class="qrcode_text">
<p><strong>手机百度</strong></p>
<p><span1>快人一步</span1></p>
</div>
</div>
<div class="qrcode qrcode1">
<div class="qrcode_img">
<img src="8K%9KP~S_9B0FRS}UDU263A.png" width="60" height="60" />
</div>
<div class="qrcode_text">
<p><strong>百度糯米</strong></p>
<p><span1>一元大餐</span1></p>
</div>
</div>
</div>
<div class="banquan">
<p><a href="#" class="text1">把百度设为主页</a> <a href="#" class="text1">关于百度</a> <a href="#" class="text1">About Baidu</a>
</p>
<p><span>©2016 Baidu <a href="#" class="text2">使用百度前必读</a> <a href="#" class="text2">意见反馈</a> 京ICP证030173号</span>
</p>
</div>
</div>
</div>
</body>
</html>继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付
HTML/CSS百度首页模仿
2016-12-08 15:09:06
浏览 12431
- 相关标签
- Html/CSS
随时随地看视频慕课网APP
相关课程
