第6章课后作业

最新推荐文章于 2019-07-23 11:08:32 发布

华少666

最新推荐文章于 2019-07-23 11:08:32 发布

阅读量249

点赞数

分类专栏：第6章盒子模型

本文链接：https://blog.csdn.net/weixin_41880408/article/details/80765015

版权

第6章盒子模型专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第3题制作开班信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中心开班信息</title>
    <style>
        li{
            list-style-type: none;
            font-size: 18px;
            background: url("图片素材/dotBg.gif") no-repeat;
            padding-left: 18px;
            height: 32px;
            padding-top: 6px;
        }
        h1{
            font-size: 18px;
            background: url("图片素材/bg.gif") no-repeat 10px 1px;
            padding-left: 45px;
            border-bottom: white solid 2px;
            height: 29px;
            padding-top: 5px;
            color: white;
        }
        ul{
            padding-left: 5px;
            margin-top: 0px;
        }
        div{
            width: 250px;
            background: linear-gradient(to bottom,#5BC1F9,#EEF8FE,white);
            border: gray solid 1px;
            border-radius: 5px;
        }
        a{
            color: gray;
            text-decoration: none;
        }
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
<div>
<h1>中心开班信息</h1>
<ul>
    <li><a href="#"/>8月12日：学历+技能班</li>
    <li><a href="#"/>8月16日：高考特招班</li>
    <li><a href="#"/>8月23日：Java精英班</li>
    <li><a href="#"/>8月31日：学士后强化班</li>
    <li><a href="#"/>9月5日：大学生就业班</li>
    <li><a href="#"/>9月9日：企业定向委培班</li>
    <li><a href="#"/>9月16日：网络营销强化班</li>
</ul>
</div>
</body>
</html>

第4题制作商品分类列表页面

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

第5题制作免费体验登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费体验登录页面</title>
    <style>
        div{
            background: url("图片素材/bg.jpg") no-repeat;
            color: white;
            height: 400px;
        }
        li{
            list-style-type: none;
            line-height: 40px;
        }
        span{
            color: red;
        }
        li:nth-of-type(1){
            padding-top: 80px;
        }
        input,select{
            border-radius: 5px;
        }
        li:last-of-type{
            padding-left: 40px;
        }
    </style>
</head>
<body>
<div>
    <form method="post" action=""/>
    <ul>
        <li><span>*</span>姓名：<input type="text"></li>
        <li><span>*</span>邮箱：<input type="email"></li>
        <li><span>*</span>电话：<input type="text" pattern="^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$"></li>
        <li>性别：<select name="sex">
            <option selected>请选择</option>
            <option>男</option>
            <option>女</option>
        </select></li>
        <li>年龄：<select name="age">
            <option selected>请选择</option>
            <option>18岁</option>
            <option>19岁</option>
            <option>20岁</option>
            <option>21岁</option>
            <option>22岁</option>
        </select></li>
        <li><input type="image" src="图片素材/btn.jpg"></li>
    </ul>
</div>
</body>
</html>

华少666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第6章课后作业

第3题制作开班信息&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;中心开班信息&lt;/title&gt; &lt;style&gt; li{
复制链接

扫一扫