CSS学习笔记（四）百度首页分析

最新推荐文章于 2022-04-10 10:54:04 发布

taijiedi13

最新推荐文章于 2022-04-10 10:54:04 发布

阅读量684

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/taijiedi13/article/details/26398007

版权

Web前端专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">仿制百度搜索首页，chrome的审查元素功能很好用，主要目的是学习CSS，去掉了多余的源码。</span>

Html如下：

<title>百度一下，你就知道</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="wrapper">
  <div id="content">
        <div id="u1">
            <a id="imsg" href="#">消息</a>
            |
            <a herf="#">搜索设置</a>
            |
            <a href="#">新版首页</a>
        </div>
        <div id="m">
            <p id="lg">
                <img src="bdlogo.gif" width="270" height="129"  />
            </p>
            <p id="nv">
               <a href="#">新闻</a> 
               <b>网页</b> 
               <a href="#">贴吧</a> 
               <a href="#">知道</a> 
               <a href="#">图片</a> 
               <a href="#">视频</a> 
               <a href="#">地图</a> 
            </p>
            <div id="fm">
                <form id="form1" class="fm">
                    <span class="bg s_ipt_wr">
                        <input type="text" id="kw1" maxlength="100" class="s_ipt"/>
                    </span>
                    <span class="bt s_btn_wr">
                        <input type="submit" value="百度一下" class="bg s_btn" />
                    </span>
                </form>
            </div>
          <p id="lk">
              <a href="#">百科</a>
              <a href="#">文库</a>
              <a href="#">hao123</a>
              <span>
                   | 
                  <a href="#">更多>></a>
              </span>
            </p>
            <p id="lm">
            </p>
        </div>      
  </div>
  <div id="ftCon">
        <div id="ftConw">
            <p id="st">
                <a href="">把百度设为首页</a>
            </p>
            <p id="lh">
                <a href="#">加入百度推广</a>
                 | 
                <a href="">搜索风云榜</a>
                 | 
                <a href="#">关于百度</a>
            </p>
        </div>
     </div>   
</div>

</body>
</html>

整体结构分解：

wrapper块为页面整体，下分两块主体content和底部ftCon

content再分两块，页顶u1和主要m

m分为四段，logo一段，导航一段，搜索框和按钮一段，更多内容一段。

CSS初始设置：

body,p,form,ul,li{
	margin:0;
	padding:0;
	list-style:none;
}
body{
	font:12px Arial, Helvetica, sans-serif;
	background:#fff;
}
body,#fm{
	position:relative;
	}
html,body{
	height:100%;
	}
img{
	border:0;
	}
input{
	border:0;
	padding:0;}
	
a{
	color:#00c;
	}

初始设置不涉及宽度，html、body高度设定100%，body和搜索框设为相对定位。

#wrapper{
	position:relative;
	min-height:100%;
}
#content{
	height:100%;
	text-align:center;
}
#m{
	width:720px;
	margin:0 auto;
}
#u{
	display:none;
}
#u1{
	color:#999;
	padding:4px 10px 5px 0;
	text-align:right;
}
#lg img{
	vertical-align:top;
	margin-bottom:3px;
}
#nv{
	height:19px;
	font-size:16px;
	margin:0 0 4px;
	text-align:left;
	text-indent:137px;
}

#fm{
	padding-left:110px;
	text-align:left;
	z-index:1
}
.s_ipt_wr{
	width:418px;
	height:30px;
	display:inline-block;
	background-position:0 -96px;
	border:1px solid #b6b6b6;
	border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;
	vertical-align:top;
}

.s_ipt{
	width:405px;
	height:22px;
	font:16px/22px arial;
	margin:5px 0 0 7px;
	outline:0;
}

.s_btn_wr{
	width:97px;
	height:34px;
	display:inline-block;
	background-position:-120px -48px;
	z-index:0;
	vertical-align:top;
}
.s_btn{
	width:95px;
	height:32px;
	padding-top:2px;
	font-size:14px;
	background-color:#ddd;
	background-position:0 -48px;
	cursor:pointer;
}

#lk{
	margin:33px 0;
}
#lm{
	height:60px;
	line-height:15px;
}
	
#ftCon{
	height: 100px;
	position: absolute;
	bottom: 44px;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	z-index: 0;
	overflow:hidden;
}
#ftConw{
	width:720px;
	margin:0 auto;
	}

效果如下：