第6章作业

最新推荐文章于 2024-04-22 00:00:00 发布

y1472001996

最新推荐文章于 2024-04-22 00:00:00 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/weixin_43027940/article/details/84261587

版权

3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中心开班信息</title>
</head>
<style>
    .dd {
        background: linear-gradient(to bottom,rgba(59,136,249,0.87) ,white,white);
        width:260px;
        border-radius: 8px;
        border: 1px solid gainsboro;
        margin:auto;
    }
    .tt {
        background:url(image/bg.gif) no-repeat;
        height:40px;
        color:white;
        font-size:14px;
        line-height:40px;
        border-bottom: 1px solid white;
        padding-left:46px;
    }

    .mm {
        width:190px;
        padding-left:10px;
        box-sizing: border-box;
        margin: 10px 0;
    }
    ul{
        background: url("image/dotBg.gif");
        width: 260px;
        list-style: none;
    }
    a{
        text-decoration: none;
        color: rgba(59,57,57,0.87);
        font-size: 14px;
        line-height: 28px;
    }
</style>
    <body>
       <div class="dd">

           <div class="tt">中心开班信息</div>

           <div class="mm">
               <ul>
                   <li><a href="#">8月12日：学历+技能班</a></li>
                   <li><a href="#">8月12日：学历+技能班</a></li>
                   <li><a href="#">8月12日：学历+技能班</a></li>
                   <li><a href="#">8月12日：学历+技能班</a></li>
                   <li><a href="#">8月12日：学历+技能班</a></li>
               </ul>
           </div>
       </div>
    </body>
</html>

4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类列表页</title>
<style type="text/css">
	a{text-decoration:none; color:#000;}
	a:hover{text-decoration:none; color:#CC5A0F;}
	div{
		width: 250px;
		border: 2px solid #FF5F00;
		border-radius: 20px;
	}
	li {
		height: 50px;
		padding-top: 15px;
		font-family: "Microsoft YaHei UI", "Microsoft YaHei UI Light";
		font-weight:bold;
		list-style:none;
		box-sizing: border-box;
		padding-left:50px;
		border-bottom:1px #929292 dotted;
	}
	li:nth-of-type(1) {
	background:url(image/icon_01.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(2) {
	background:url(image/icon_02.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(3){
	background:url(image/icon_03.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(4) {
	background:url(image/icon_04.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(5) {
	background:url(image/icon_05.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(6) {
	background:url(image/icon_06.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(7) {
	background:url(image/icon_07.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(8){
	background:url(image/icon_08.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(9){
	background:url(image/icon_09.jpg) 0px 0px no-repeat;
	}
	li:nth-of-type(10){
	background:url(image/icon_10.jpg) 0px 0px no-repeat;	
</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">酒水、饮料</a></li>
			<li><a href="#">进口食品</a></li>
			<li><a href="#">休闲食品</a></li>
			<li><a href="#">地方特产</a></li>
			<li><a href="#">保健、冲调</a></li>
			<li><a href="#">粮油、生鲜</a></li>
			<li><a href="#">美容洗护</a></li>
			<li><a href="#">清洁洗涤</a></li>
			<li><a href="#">母婴、纸品</a></li>
			<li><a href="#">家居百货</a></li>
		</ul>
	</div>
</body>
</html>

5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费体验登录页面</title>
    <style>
        .free{
            width: 312px;
            height: 353px;
            background:url(image/bg.jpg) no-repeat;
            vertical-align: middle;
            color: white;
            margin: auto;
        }
        span{
            color: red;
        }
		.button{
            height: 49px;
            width: 152px;
            padding-left: 80px;
		}
        .div{
            padding: 10px 40px;
        }
        .sp{
            padding-top: 66px;
        }
        input{
            border-radius: 5px;
        }
        select{
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="free">
        <div class="sp"></div>
        <div  class="div"><span>*</span>姓名：<input type="text"></div>
        <div  class="div"><span>*</span>邮箱：<input type="email"></div>
        <div  class="div"><span>*</span>电话：<input type="tel"></div>
        <div  class="div">&nbsp;&nbsp;性别：<select><option>请选择</option></select></div>
        <div  class="div"><span>*</span>年龄：<select><option>请选择</option></select></div>
		<div class="button"><input type="image" src="image/btn.jpg"></div>
    </div>
</body>
</html>