HTML如何實現網站頭部logo區和搜索框區

小編給大家分享一下HTML如何實現網站頭部logo區和搜索框區，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　先確定版心div,然后用定位布局，分出幾個小div，logo區用定位，搜索框用定位。另外logo圖片用背景圖片，不用img。相對來說這個區別的設置用定位相對會比較浮動布局簡單一些。定位口訣：子絕父相。為了利于SEO，logo區要放h2標簽。用指向首頁,鏈接背景設置尺寸和logo圖片一樣大。鏈接文字為首頁title,這樣做有利于SEO優化。為了讓文字不顯示出來，可以用首行縮進的方法，然后溢出隱藏文字。搜索框和按鈕都用左浮動。搜索框用outline:none取消藍色輪廓線。購物車統計顯示的數據不要給寬度，給個高度就可以了，它用絕對定位。

　　html代碼：

	<!--頭部 begin -->
	<div class="header w">
		<div class="logo">
			<a href="index.html">品優購</a>
		</div>
		<div class="search">
			<input type="text"value="請搜索內容">
			<button type="button" >搜索</button>
		</div>
		<div class="hotwords">
			
			<a href="" class="style-red">臺機超值購</a>
			<a href="">品質居家</a>
			<a href="">金秋風暴</a>
			<a href="">暴家裝建材</a>
			<a href="">羊羔奶粉</a>
			<a href="">運動戶外</a>
			<a href="">豐收節低至9.9</a>
			
		</div>
		<div class="shopcar">
			<i class="car">?</i>我的購物車<i class="arror">?</i>
			<i class="count">8</i>
		</div>
	</div
	<!--頭部end-->

　　css代碼：

/*header*/
.header {
	position: relative;
	height: 105px;
	
}

.logo {
	position: absolute; /*絕對定位*/
	top:25px;
	left: 0;
	width: 175px;
	height: 56px;
	
}

.logo a{
	display: block;
	overflow: hidden; /*溢出隱藏*/
	width: 175px;
	height: 56px;
	background: url(../images/logo.png) no-repeat;
	text-indent: -999px; /*縮進負方向*/
}

.search {
	position: absolute;
	top:25px;
	left: 348px;
	
}

.search input{
	float: left;
	width: 455px;
	height: 32px;
	border: 2px solid #b1191a;
	padding-left: 10px;  /*會撐開，所以寬度減去10px*/
	color: #ccc;
}

.search button {
	float: left;
	width: 82px;
	height: 36px;
	background-color: #b1191a;
	border: 0;
	font-size: 16px;
	color: #FFFFFF;
}

.hotwords {
	position: absolute;
	top:65px;
	left: 348px;
}

.hotwords a{
	margin: 0 10px;
}

.shopcar {
	position: absolute;
	top: 25px;
	right: 64px;
	width: 138px;
	height: 34px;
	border: 1px solid #dfdfdf;
	background-color: #f7f7f7;
	line-height: 34px;
	text-align: center;
}

.car {
	font-family: 'icomoon';
	margin-right: 5px;
	color: #da5555;
}

.arror {
	font-family: 'icomoon';
	margin-left: 3px;
}

.count {
	position: absolute;
	top: -5px;
	left: 100px;
	background-color: #e60012;
	height: 14px;
	line-height: 14px;
	padding: 0 3px;
	color: #FFFFFF;
	border-radius:7px 7px 7px 0; /*左上角 右上角 右下角 左下角*/
}

看完了這篇文章，相信你對“HTML如何實現網站頭部logo區和搜索框區”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！