小编给大家分享一下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区和搜索框区”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
