淘宝logo

最新推荐文章于 2022-03-12 17:32:02 发布

枫叶-

最新推荐文章于 2022-03-12 17:32:02 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/zhangtaoloving/article/details/40127267

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝搜索</title>
<style type="text/css">
body{
/*依次加载字体样式*/
font-family: "幼圆",Arial;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #f40;
}
.main{
width: 1192px;
height: 136px;
margin: 0px auto;
border:1px solid;
}
.main_left{
width: 146px;
height: 100%;
/*background: #ee1;*/
/*float: left;*/
}
.main_content{
width: 765px;
height: 100%;
/*background: #434;*/
/*float: left;*/
/*margin-left: 100px;*/
position: relative;
left: 246px;
top: -136px;
}
.content_top{
width:100%;
height:100px;
/*background: #123;*/
}
.main_left>h1{
font-size: 40px;
font-weight: 200;
color: #FF3F01;
margin: 0px;
margin-top: 30px;
margin-left: 3px;
float: left;
font-family: "华文琥珀";
}
.main_left>h3{
clear: left;
font-size: 20px;
font-weight: bolder;
color: #FF3F01;
font-family: Arial;
margin-left: 5px
}

/*淘宝的搜索*/
.content_top_1{
width: 100%;
height: 68px;
float: left;
margin-top: 32px;
/*background: #333;*/
}
.content_top_1>ul{
width: 150px;
height: 25px;
background: #fff;
list-style: none;
padding-left: 0px;
margin: 0px;
}

.content_top_1>ul>li{
width: 50px;
height: 25px;
background: #fff;
float: left;
font-family: "幼圆";
line-height: 25px;
text-align: center;
cursor: pointer;
}
/*:nth-child这个家伙是一个伪类元素，它是用来索引相同li中的第一个*/
.content_top_1>ul>li:nth-child(1){
background: #FF4400;
color: #fff;
font-weight: bold;
}
.content_top_1>ul>li:hover{
background: #FF4400;
color: #fff;
font-weight: bold;
}
.content_top_1>ul>li:nth-child(2):hover #bianhua{
color: #000;
}
.content_top_1_div{
width: 716px;
height: 35px;
background: #fff;
border:3px solid #f40;
float: left;
}
.content_top_1_div>img{
float: left;
}
form{
width: 685px;
float: left;
/*background: #faa;*/
}
input[type="text"]{
float: left;
width: 585px;
height: 30px;
border:0px;
margin-top: 2px;
/*这个是取出，选定input后出现的外边框的不爽*/
outline: none;
padding-left: 5px;
font-size: 14px;
}
input[type="button"]{
float: left;
width: 95px;
height: 37px;
border:0px;
background: #f40;
font-size: 20px;
padding: 0px;
font-weight: bold;
color: #fff;
font-family: "黑体";
outline: none;
cursor: pointer;
}
.content_top_1_divR{
width: 42px;
height: 41px;
background: #fff;
float: right;
font-size: 100%;
text-align: right;
line-height: 20px;
}
.content_top_1_divR:hover{
color: #f40;
cursor: pointer;
}

/*超链接域*/
.content_top_2{
clear: left;
width: 100%;
height:34px;
/*background: #eee;*/
/*padding-top:10px; */
}
.content_top_2>a{
line-height: 34px;
color: #747474;
}
.content_top_2>a:hover{
color: #f40;
}
.a1{
width: 44px;
height: 21px;
border:1px solid #bbb;
font-size:12px;
float: right;
text-align: center;
margin-top: 5px;
margin-right: 42px;
border-radius: 2px;
}
.a1:hover{
border-color: #f40;
}
.a1>span{
position: relative;
top: -7px;
}
</style>
</head>
<body>
<div class="main">
<div class="main_left">
<h1>淘宝网</h1>
<h3>Taobao.com</h3>
</div>
<div class="main_content">
<div class="content_top">
<div class="content_top_1">
<ul>
<li id="bianhua">宝贝</li>
<li>天苗</li>
<li>店铺</li>
</ul>
<div class="content_top_1_div">
<img src="1.png">
<form>

<input type="text" placeholder=" 卖小女孩的大灰狼" maxlength="50" />
<input type="button" value="搜索" />
</form>
</div>
<div class="content_top_1_divR">
<span>高级</span><br><span>搜索</span>
</div>
</div>
<div class="content_top_2">
<a href="#">大妈连衣裙</a>
<a href="">犀利毛线</a>
<a href="">吊式内裤</a>
<a href="">绿帽子</a>
<a href="">烧饼</a>
<a href="">大豆</a>
<a href="">lovo</a>
<a href="">蓝翔培训</a>
<a href="">新东方</a>
<a href="">东方不怕</a>
<a href="">西方怕</a>
<a href="" class="a1">
<span>更多></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

枫叶-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝logo

淘宝搜索body{/*依次加载字体样式*/font-family: "幼圆",Arial;}a{text-decoration: none;color: #000;}a:hover{color: #f40;}.main{width: 1192px;height: 136px;margin: 0px auto;border:1px
复制链接

扫一扫