寒假第3页作业
1.制作商品分类列表页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品分类列表页</title>
<style>
.text1{
border: 2px solid orange;
width: 200px;
height: 700px;
border-radius:8px;
}
a:hover{
color: red;
}
a{
line-height: 40px;
font-size: 15px;
height: 5px;
font-weight: bold;
padding-left:60px ;
box-sizing: border-box;
}
a{
text-decoration: none;
}
span{
border: 1px gray dashed;
display: block;
width: 180px;
border-style: none none dashed none;
margin: 0 auto;
}
div p:nth-of-type(1){
background: url(img/icon_01.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(2){
background: url(img/icon_02.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(3){
background: url(img/icon_03.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(4){
background: url(img/icon_04.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(5){
background: url(img/icon_05.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(6){
background: url(img/icon_06.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(7){
background: url(img/icon_07.jpg) no-repeat;
background-position: 5px -2px;
}
div p:nth-of-type(8){
background: url(img/icon_08.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(9){
background: url(img/icon_09.jpg) no-repeat;
background-position: 5px -4px;
}
div p:nth-of-type(10){
background: url(img/icon_10.jpg) no-repeat;
background-position: 5px -4px;
}
</style>
</head>
<body>
<div class="text1">
<p><a href="" class="text2">酒水、饮料</a></p>
<span></span>
<p><a href="">进口食品</a></p>
<span></span>
<p><a href="">休闲零食</a></p>
<span></span>
<p><a href="">地方特产</a>
<span></span>
<p><a href="">保健、冲调</a></p>
<span></span>
<p><a href="">粮油、生鲜</a></p>
<span></span>
<p><a href="">美容洗护</a></p>
<span></span>
<p><a href="">清洁洗涤</a></p>
<span></span>
<p><a href="">母婴、纸品</a></p>
<span></span>
<p><a href="">家居百货</a></p>
</div>
</body>
</html>
2.制作权威课程免费体验登录页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>免费体验登陆页面</title>
<style>
ul{
margin: 0px;
padding:0px;
list-style-type: none;
line-height: 35px;
padding: 100px;
padding-left: 50px;
}
.text2{
border: 1px solid black;
width:312px;
height:353px;
}
.text1{
background: url(img/bg.jpg) no-repeat;
width:312px;
height:353px;
}
#div{
margin: 0px auto;
margin-left: 35px;
}
input{
border: 0px solid;
border-radius: 4px;
}
select{
border: 1px solid;
border-radius: 4px;
}
</style>
</head>
<body class="text2">
<form method="post"action="">
<div>
<ul class="text1">
<li>*姓名：<input name="name"type="text"/></li>
<li>*邮箱：<input name="email"type="email"/></li>
<li>*电话：<input name="number"type="number"</li>
<li>性别：<select name="sex" >
<option value="">请选择</option>
<option value="">男</option>
<option value="">女</option>
</select></li>
<li>年龄:<select>
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></li>
<input id="div" type="image"src="img/btn.jpg" />
</ul>
</div>
</form>
</body>
</html>