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区和搜索框区”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！