标签：贴吧 bottom ali 反馈 col inline block ack border
html
<body> <div id="wrapper" style="display: block;"> <div id="head"> <div class="head_wrapper"> <div class="form"> <div class="form_wrapper"> <div id="lg"> <img src="baidu.png" width="270" height="129"> </div> <input class="search" value="" maxlength="255"> <input type="submit" value="百度一下" class="bg btn"> </div> </div> <div id="nav"> <a href="" class="mnav">新闻</a> <a href="" class="mnav">hao123</a> <a href="" class="mnav">地图</a> <a href="" class="mnav">视频</a> <a href="" class="mnav">贴吧</a> <a href="" class="mnav">学术</a> <a href="" class="sz">登录</a> <a href="" class="sz">设置</a> <a href="" class="gdsp">更多产品</a> </div> </div> </div> <!-- 底部 --> <div class="contentCon"> <div id="content"> <div class="content-item content-item-1"> <img class="content-img" src="zbios_09b6296.png" /> <div class="content-text"> <p class="title">下载百度APP</p> <p class="sub-title">有事搜一搜没事看一看</p> </div> </div> </div> </div> <div id="foot"> <div class="foot-Wrapper"> <div id="footw"> <p id="lh"> <a href="" target="_blank">把百度设为主页</a> <a href="">关于百度</a> <a href="">AboutBaidu</a> <a href="">百度推广</a> <span style="margin-left: 25px;">(京)-经营性-2017-0020<span></span></span></p> <p id="cp">©2020Baidu <a href="">使用百度前必读</a> <a href="">意见反馈</a> 京ICP证030173号 <a target="_blank" href="">京公网安备11000002000001号</a> </p> </div> </div> </div> </div> </body>
css
* {
margin: 0;
padding: 0;
border: 0;
list-style: none
}
html,
body {
height: 100%;
overflow-y: auto;
}
body {
font: 12px arial;
text-align: ;
background: #fff
}
#wrapper {
position: relative;
min-height: 100%
}
#head {
padding-bottom: 100px;
text-align: center;
z-index: 1
}
#foot {
height: 50px;
position: absolute;
bottom: 47px;
text-align: left;
width: 100%;
margin: 0 auto;
z-index: 0;
overflow: hidden
}
.foot-Wrapper {
overflow: hidden;
margin: 0 auto;
text-align: center;
*width: 640px
}
.contentCon {
text-align: center;
position: absolute;
bottom: 132px;
width: 100%
}
#content {
display: inline-block;
*float: left;
*margin-top: 4px
}
#content .content-img {
width: 106px;
height: 106px;
margin: 0 auto;
padding: 5px;
border: 1px solid #f3f3f3
}
#content .content-item-1 .content-img {
background-position: 5px 5px
}
#content .content-text {
color: #999;
line-height: 23px
}
#content .content-text a {
color: #999;
text-decoration: none
}
#content .content-text p {
text-align: center
}
#content .content-text b {
color: #666;
font-weight: 700
}
#content .content-text span {
letter-spacing: 1px
}
#content .content-text .title {
color: #333;
font-size: 16px;
line-height: 32px;
letter-spacing: 3px
}
#content .content-text .sub-title {
color: #999;
font-size: 14px;
line-height: 14px;
font-weight: 300
}
#footw {
display: inline-block;
text-align: left;
margin-left: 33px;
line-height: 22px;
position: relative;
top: -2px;
*float: right;
*margin-left: 0;
*position: static
}
#footw,
#footw a {
color: #999
}
#footw {
text-align: center;
margin-left: 0
}
#wrapper {
min-width: 810px;
height: 100%;
min-height: 600px
}
#head {
position: relative;
padding-bottom: 0;
height: 100%;
min-height: 600px
}
#head .head_wrapper {
height: 100%
}
.btn {
width: 100px;
height: 36px;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
background: #3385ff;
border-bottom: 1px solid #2d78f4;
outline: medium;
*border-bottom: 0;
-webkit-appearance: none;
-webkit-border-radius: 0
}
.form {
position: relative;
top: 38.2%
}
.form_wrapper {
position: relative;
top: -191px
}
#form {
margin: 22px auto 0;
width: 641px;
text-align: left;
z-index: 100
}
#nav a:link,
#nav a:visited {
color: #666;
text-decoration: none
}
#nav a:hover,
#nav a:active {
text-decoration: underline
}
#nav {
z-index: 2;
color: #fff;
position: absolute;
right: 0;
top: 0;
margin: 19px 0 5px;
padding: 0 96px 0 0
}
/* 登陆，设置 */
#nav a.sz {
display: inline-block;
float: left;
color: #333;
font-size: 13px;
line-height: 24px;
margin-left: 20px;
text-decoration: underline
}
#nav a.gdsp {
display: inline-block;
position: absolute;
right: 10px;
width: 60px;
height: 23px;
float: left;
color: #fff;
background: #38f;
line-height: 24px;
font-size: 13px;
text-align: center;
overflow: hidden;
border-bottom: 1px solid #38f;
margin-left: 19px;
margin-right: 2px
}
#nav a.mnav {
float: left;
color: #333;
font-weight: 700;
line-height: 24px;
margin-left: 20px;
font-size: 13px;
text-decoration: underline
}
.search {
width: 539px;
height: 34px;
font: 16px/18px arial;
line-height: 22px;
margin: 6px 0 0 7px;
padding: 0;
background: transparent;
border: 1px solid #b6b6b6;
outline: 0;
-webkit-appearance: none
}
#lh a {
margin-left: 25px
}
图片
标签：贴吧 bottom ali 反馈 col inline block ack border
原文地址：https://www.cnblogs.com/zenggaozheng/p/12256539.html
