才学css做的作业

来源：互联网发布：access数据库发布编辑：程序博客网时间：2024/05/01 00:33

<!DOCTYPE html>
<html>
<head>
<title>taobao</title>
<meta charset="utf-8">
<style type="text/css">
.quan{
width: 1192px;
height: 137px;
background-color:#FFFFFF;
margin:auto;

}
.zuo{
width: 250px;
height: 137px;
/*background-color:blue;*/
float: left;
}
h1{
font-family:"楷体";
font-size: 45px;
color: #FA4400;
margin-left: 10px;
font-weight:bolder;

}
h3{
/*font-family:candara;*/
margin:0px;
font-size: 25px;
color: #FA4400;
margin-top: -40px;
margin-left: 12px;
}
.zhongjian{
width:790px;
height: 30px;
/*background-color: red; */
float: left;
}
.zhongjian>span:nth-child(1){
color: white;
background-color: #FA4400;

}
span{
width: 55px;
height: 30px;
background-color:#FFFFFf;
/*display: block;*/
float: left;
text-align: center;
line-height: 30px;
font-family: "楷体";
}
span:hover{
color: white;
background-color: #FA4400;
cursor: pointer;
}
input{
width:589px;
height: 32px;
background-color: #FFFFFf;
float: left;
outline: none;
border: none;
}
.shou{
width:100px;
height: 40px;
background-color: #FF4400;
float: left;
font-family: "楷体";
font-size:22px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: white;
}
.gaoji{
width: 45px;
height: 40px;
background-color:#FFFFFf;
float: left;
font-size: 13px;
color: #686868;
margin-left: 15px;
cursor: pointer;
}
p{
margin: 1px;
}
a{
text-decoration: none;
font-size: 12px;
line-height: 40px;
font-family: "楷体";
color: #6D6D6D;
}
a:hover{
color: #FF4400;
border:
}
.duo>p{
width: 40px;
height: 18px;
/*background-color: black;*/
float:right;
line-height: 20px;
text-align: center;
margin-right: 62px;
margin-top: 8px;
border: 1px solid #6D6D6D;
border-radius: 3px;

}
.duo>p:hover{
border: 1px solid #FF4400;
}
</style>
</head>
<body style="background:#7BDFF7">
<div class="quan">
<div class="zuo">
<h1>淘宝网</h1>
<h3>Taobao.com</h3>
</div>
<div class="zhongjian"></div>
<div class="zhongjian">
<span>宝贝</span>
<span>天猫</span>
<span>店铺</span>
</div>
<div class="zhongjian" style="width:622px;height:34px;border:3px solid #FF4400;">
<img src="shou.jpg" style="float:left">
<input type="test" placeholder="搜“鸡蛋神器”试试，鸡蛋进去，美味的棒棒卷出来">
</div>
<div class="shou">搜索</div>
<div class="gaoji">
<p>高级</p>
<p>搜索</p>
</div>
<div class="zhongjian">
<a href="">大码女装</a>
<a href="">新款女包</a>
<a href="">早秋套装</a>
<a href="">毛衣</a>
<a href="">秋装连衣裙</a>
<a href="">时尚短靴</a>
<a href="">风衣</a>
<a href="">打底裤</a>
<a href="">毛呢外套</a>
<a href="">休闲套装</a>
<a href="">时尚男鞋</a>
<a href="">婚纱</a>
<a href="">孕妇秋装</a>
<a href="" class="duo">
<p>更多></p>
</a>
</div>
</div>
</body>
</html>

0 0