第6章盒子模型

最新推荐文章于 2022-04-28 22:55:18 发布

X_302lizhaohon

最新推荐文章于 2022-04-28 22:55:18 发布

阅读量471

点赞数

本文链接：https://blog.csdn.net/X_302lizhaohon/article/details/80786423

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中心开班信息</title>
    <link rel="stylesheet" href="../css/中心开班信息.css">
</head>
<body>
<div class="time">
    <h1 id="kai">中心开班信息</h1>
    <ul>
        <li><a href="#">8月12日：学历+技能班</a></li>
        <li><a href="#">8月16日：高考特招班</a></li>
        <li><a href="#">8月23日：Java精英班</a></li>
        <li><a href="#">8月31日：学士后强化班</a></li>
        <li><a href="#">9月5日：大学生就业班</a></li>
        <li><a href="#">9月9日：企业定向委培班</a></li>
        <li><a href="#">9月16日：网络营销强化班</a></li>
    </ul>
</div>



</body>
</html>

.time{
    width: 250px;
    border: 1px gray solid;
    border-radius: 20px;
    margin: 0px auto;
    background: -moz-linear-gradient(to top,white,#1F87CC);
}
#kai{
    font-size: 15px;
    color: #FFFFFF;
    background:url("../image/bg.gif") 25px 2px no-repeat;
    padding: 5px 60px;
    border-bottom: 1px #FFFFFF solid;
}
 li{
    list-style: none;

}
 .time ul li{
     height: 30px;
     padding-left: 15px;
     padding-top: 3px;
     background: url("../image/dotBg.gif")left center no-repeat;
 }
 .time ul{
     padding: 0px 6px;
 }
body{
    margin: 0px;
}
ul li a{
    text-decoration: none;
    color: gray;
}
ul li a:hover{
color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类列表页面</title>
    <link rel="stylesheet" href="../css/商品分类列表.css">
</head>
<body>
<div>
    <p><a href="#">酒水、饮料</a></p>
    <p><a href="#">进口食品</a></p>
    <p><a href="#">休闲零食</a></p>
    <p><a href="#">地方特产</a></p>
    <p><a href="#">保健、冲调</a></p>
    <p><a href="#">粮油、生鲜</a></p>
    <p><a href="#">美容洗护</a></p>
    <p><a href="#">清洁洗涤</a></p>
    <p><a href="#">母婴、纸品</a></p>
    <p class="jiu"><a href="#">家居百货</a></p>
</div>
</body>
</html>

div{
    width: 230px;
    border: 2px orange solid;
    border-radius: 20px;
}
p{
    padding: 10px 55px;
    border-bottom: 1px gray dashed;
}
.jiu{
    border-bottom: 0px gray dashed;
}
 a{
     color: #000;
     text-decoration: none;
     font-weight: bold;
}
a:hover{
    color: red;
}

p:nth-of-type(1){
     background: url("../image/icon_01.jpg")left center no-repeat;
}
p:nth-of-type(2){
    background: url("../image/icon_02.jpg")left center no-repeat;
}
p:nth-of-type(3){
    background: url("../image/icon_03.jpg")left center no-repeat;
}
p:nth-of-type(4){
    background: url("../image/icon_04.jpg")left center no-repeat;
}
p:nth-of-type(5){
    background: url("../image/icon_05.jpg")left center no-repeat;
}
p:nth-of-type(6){
    background: url("../image/icon_06.jpg")left center no-repeat;
}
p:nth-of-type(7){
    background: url("../image/icon_07.jpg")left center no-repeat;
}
p:nth-of-type(8){
    background: url("../image/icon_08.jpg")left center no-repeat;
}
p:nth-of-type(9){
    background: url("../image/icon_09.jpg")left center no-repeat;
}
p:nth-of-type(10){
    background: url("../image/icon_10.jpg")left center no-repeat;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费体验登录页面</title>
    <link rel="stylesheet" href="../css/免费体验登录页面.css">
</head>
<body>
<div>
    <form method="post" action="">
    <ul>
        <li><p><span>*</span>姓名：
        <input type="text"name="name"/></p>
        </li>
        <li><p><span>*</span>邮箱：
            <input type="password" name="pass"/></p>
        </li>
        <li><p><span>*</span>电话：
            <input type="text"name="dian"/></p>
        </li>
    </ul>
    <p class="miao">
        性别：
        <select name="bmo">
            <option value="get">请选择</option>
            <option value="nan">男</option>
            <option value="nv">女</option>
        </select>
        <p class="miao">
        年龄：
        <select name="bmo">
            <option value="age">请选择</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
        </select>
    </p>
    </form>
</div>
<img src="../image/btn.jpg"/>

</body>
</html>

body{
background: url("../image/bg.jpg")no-repeat;

}
li{
    list-style: none;
    color: white;
}
span{
    color: red;
}
ul{
    padding-top: 60px;
    padding-left: 15px;

}
.miao{
    padding-left: 20px;
    color: white;
}
img{
    padding-left: 80px;
}