408day(header里的搜索，购物车部分完成)

最新推荐文章于 2025-07-13 12:09:08 发布

原创最新推荐文章于 2025-07-13 12:09:08 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用HTML和CSS实现网站头部的搜索、热词及购物车功能，包括具体的代码实现和样式设置。

《2018年11月15日》【连续408天】

标题：header里的搜索，购物车部分完成；
内容：

<!-- 搜索部分 -->
			<div class="search">
				<input type="text">
				<button>
					<i></i>
				</button>
				<em></em>
			</div>
			<!-- 热词部分 -->
			<div class="hotwords">
				<a href="#" class="style-red">学生专享</a>
				<a href="#">300减160</a>
				<a href="#">300减160</a>
				<a href="#">300减160</a>
				<a href="#">300减160</a>
				<a href="#">300减160</a>
				<a href="#">300减160</a>
				<a href="#">300减160</a>
				<a href="#">300减160</a>
			</div>
			<!-- 购物车部分 -->
			<div class="shopCar">
				<i></i>
				<a href="#">我的购物车</a>
				<s>0</s>
			</div>
			<!-- 电脑 -->
			<div class="computer">
				<a href="#">
					<img src="images/computer.jpg" height="40" width="190" alt="">
				</a>
			</div>

/*搜索部分*/
.search {
	position: absolute;
	width: 550px;
	height: 35px;
	top: 25px;
	left: 320px;
}
.search input {
	width: 493px;
	height: 33px;
	border: 1px solid #F10215;
	padding-left: 5px;
	outline: none; /*取消蓝色边框*/
	color: #989898;
	float: left;
}
.search button {
	width: 50px;
	height: 35px;
	background-color: #F10215;
	float: left;
	cursor: pointer;
	outline: none;
}
.search i {
	font-family: "icomoon";
	color: #fff;
	font-style: normal;
	font-size: 12px;
}
.search em {
	position: absolute;
	top: 9px;
	right: 65px;
	width: 19px;
	height: 15px;
	cursor: pointer;
	background: url(../images/sprite-search.png) no-repeat;
}

.search em:hover {
	background-position: -30px 0;
}
/*热词部分*/
.hotwords {
	position: absolute;
	top: 70px;
	left: 320px;
}
.hotwords a{
	color: #9E9B99;
	font-size: 12px;
}
.hotwords a:hover {
	color: #F10215;
}
/*购物车*/
.shopCar {
	width: 188px;
	height: 33px;
	border: 1px solid #ccc;
	position: absolute;
	top: 25px;
	right: 100px;
	text-align: center;
	line-height: 33px;
}
.shopCar a {
	font-size: 14px;
	color: #F10215;
}
.shopCar i {
	font-family: "icomoon";
	color: #F10215;
	font-style: normal;
}
.shopCar s {
	position: absolute;
	top: 5px;
	left: 142px;
	text-decoration: none;
	background-color: #f10215;
	height: 13px;
	line-height: 13px;
	font-size: 12px;
	padding: 0 3px;
	border-radius: 7px;
	color: #fff;
}
/*电脑*/
.computer {
	position: absolute;
	right: 0;
	bottom: 10px;
}

input, button {
	padding: 0;
}
a {
	text-decoration: none;
}