小编给大家分享一下HTML如何实现网站头部logo区和搜索框区，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

　　先确定版心div,然后用定位布局，分出几个小div，logo区用定位，搜索框用定位。另外logo图片用背景图片，不用img。相对来说这个区别的设置用定位相对会比较浮动布局简单一些。定位口诀：子绝父相。为了利于SEO，logo区要放h2标签。用指向首页,链接背景设置尺寸和logo图片一样大。链接文字为首页title,这样做有利于SEO优化。为了让文字不显示出来，可以用首行缩进的方法，然后溢出隐藏文字。搜索框和按钮都用左浮动。搜索框用outline:none取消蓝色轮廓线。购物车统计显示的数据不要给宽度，给个高度就可以了，它用绝对定位。

　　html代码：

<!--头部begin--><divclass="headerw"><divclass="logo"><ahref="index.html">品优购</a></div><divclass="search"><inputtype="text"value="请搜索内容"><buttontype="button">搜索</button></div><divclass="hotwords"><ahref=""class="style-red">台机超值购</a><ahref="">品质居家</a><ahref="">金秋风暴</a><ahref="">暴家装建材</a><ahref="">羊羔奶粉</a><ahref="">运动户外</a><ahref="">丰收节低至9.9</a></div><divclass="shopcar"><iclass="car"></i>我的购物车<iclass="arror"></i><iclass="count">8</i></div></div<!--头部end-->

　　css代码：

/*header*/.header{position:relative;height:105px;}.logo{position:absolute;/*绝对定位*/top:25px;left:0;width:175px;height:56px;}.logoa{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;}.searchinput{float:left;width:455px;height:32px;border:2pxsolid#b1191a;padding-left:10px;/*会撑开，所以宽度减去10px*/color:#ccc;}.searchbutton{float:left;width:82px;height:36px;background-color:#b1191a;border:0;font-size:16px;color:#FFFFFF;}.hotwords{position:absolute;top:65px;left:348px;}.hotwordsa{margin:010px;}.shopcar{position:absolute;top:25px;right:64px;width:138px;height:34px;border:1pxsolid#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:03px;color:#FFFFFF;border-radius:7px7px7px0;/*左上角右上角右下角左下角*/}

看完了这篇文章，相信你对“HTML如何实现网站头部logo区和搜索框区”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！