以下是html代码：
<!DOCTYPE html>
<html>
<head>
<meta content="always" name="referrer">
<link rel="stylesheet" type="text/css" href="css/new_css.css">
<div id="head">
<div class="head_wrapper">
<div class="s_form">
<div class="s_form_wrapper">
<div id="lg"class="s_form_wrapper soutu-env-nomac soutu-env-index">
<img hidefocus=true src="//www.baidu.com/img/bd_logo1.png" width="270" height="129" style="margin-top: 150px;"></div>
<form id="form" name="f" action="//www.baidu.com/s" class="fm">
<input type="hidden" name="ie" value="utf-8">
<input type="hidden" name="f" value="8">
<input type="hidden" name="rsv_bp" value="1">
<input type="hidden" name="rsv_idx" value="1">
<input type="hidden" name="tn" value="baidu">
<span class="bg s_ipt_wr quickdelete-wrap"><input id="kw" name="wd" class="s_ipt" value maxlength="255" autocomplete="off" autofocus></span><span class="bg s_btn_wr"><input type="submit" id="su" value="百度一下" class="bg s_btn"></span>
</form>
</div>
</div>
<div id="u_sp"class="s-isindex-wrap s-sp-menu">
<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
<a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>
<a href="http://map.baidu.com" name="tj_trmap" class="mnav">地图</a>
<a href="http://v.baidu.com" name="tj_trvideo" class="mnav">视频</a>
<a href="http://tieba.baidu.com" name="tj_trtieba" class="mnav">贴吧</a>
<a href="https://passport.baidu.com/v2/?login&fr=old&login&tpl=mn" name="tj_login" class="lb">登录</a>
<a class="lb">设置</a>
<a href="//www.baidu.com/more/" name="tj_briicon" class="bri" style="display: block;">更多产品</a>
</div>
<div id="lg" class="qrcodeCon"><img hidefocus=true src="img/zbios_efde696.png" width="100" height="100"></div>
</div>
</div>
<div id="ftCon">
<div id="ftConw" class="ftCon-Wrapper">
<p id="lh"><a ;">把百度设为主页</a><a style="color: #999;" href="http://home.baidu.com">关于百度</a><a href="http://ir.baidu.com" style="color: #999">About Baidu</a><a >百度推光</a></p>
<p id="cp">©2017 Baidu <a href="http://www.baidu.com/duty/" style="color: #999">使用百度前必读</a> <a href="http://jianyi.baidu.com/" class="cp-feedback" style="color: #999">意见反馈</a> 京ICP证030173号 <img src="//www.baidu.com/img/gs.gif"> <a id="jgwab">京公网安备11000002000001号</a></p>
</div>
</div>
</div>
</body>
</html>
以下是css代码：
.s-sp-menu .mnav{
font-weight: bold;
}
body, button, input, select, textarea {
font: 12px arial;
}
body {
text-align: center;
}
#u_sp {
z-index: 2;
color: #fff;
position: absolute;
right: 0;
top: 0;
margin: 19px 0 5px;
padding: 0 86px 0 0;
}
#u_sp a.lb, #u_sp a.lb:visited, #u1 a.username {
display: inline-block;
float: left;
color: #333;
font-size: 13px;
line-height: 40px;
left: 240px;
margin-left: 20px;
text-decoration: underline;
}
#u_sp a.bri, #u_sp a.bri:visited {
display: inline-block;
position: absolute;
right: 20px;
width: 60px;
height: 40px;
float: left;
color: #fff;
background: #38f;
line-height: 40px;
font-size: 13px;
text-align: center;
overflow: hidden;
border-bottom: 1px solid #38f;
margin-left: 19px;
margin-right: 2px;
}
#u_sp a.mnav, #u_sp a.mnav:visited {
left: 240px;
float: left;
color: #333;
font-weight: 700;
line-height: 40px;
margin-left: 20px;
font-size: 13px;
text-decoration: underline;
}
div {
display: block;
}
.s-sp-menu a {
position: relative;
height: 32px;
line-height: 32px;
margin-left: 19px;
color: #555;
text-decoration: underline;
outline: none;
display: inline-block;
text-shadow: none;
}
.s-sp-menu .mnav {
font-weight: bold;
}
#u_sp {
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 590px;
font-size: 13px;
text-align: right;
float: left;
color: #333;
font-weight: 700;
line-height: 24px;
margin-left: 20px;
font-size: 13px;
text-decoration: underline;
}
body, p, form, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
body {
font: 12px arial;
text-align: ;
background: #fff;
}
html, body {
height: 100%;
}
.qrcodeCon {
text-align: center;
position: absolute;
bottom: 132px;
width: 100%;
}
div {
display: block;
}
body, p, form, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.ftCon-Wrapper {
overflow: hidden;
margin: 0 auto;
text-align: center;
color: #8A8A8A;
}
div {
display: block;
}
#ftCon {
height: 50px;
position: absolute;
bottom: 47px;
text-align: left;
width: 100%;
margin: 0 auto;
z-index: 0;
overflow: hidden;
}
body, p, form, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
#lh a {
margin-left: 25px;
}
#jgwab {
margin-left: 19px;
}
.s_ipt {
width: 526px;
height: 22px;
font: 16px/18px arial;
line-height: 22px;
margin: 6px 0 0 7px;
padding: 0;
background: transparent;
border: 0;
outline: 0;
-webkit-appearance: none;
}
.s_ipt_wr {
border: 1px solid #b6b6b6;
border-color: #7b7b7b #b6b6b6 #b6b6b6 #7b7b7b;
background: #fff;
display: inline-block;
vertical-align: top;
width: 539px;
margin-right: 0;
border-right-width: 0;
border-color: #b8b8b8 transparent #ccc #b8b8b8;
overflow: hidden;
}
.s_btn {
width: 100px;
height: 36px;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
background: #3385ff;
border-bottom: 1px solid #2d78f4;
outline: medium;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
.s_ipt_wr.bg, .s_btn_wr.bg, #su.bg {
background-image: none;
}
input {
border: 0;
padding: 0;
}
