盒子模型第六章

第一题：制作北大青鸟网站的中心开班信息模块。

h3{
    font-size: 15px;
    color: #FFFFFF;
    border-bottom: 1px #FFFFFF solid;
    text-indent: 2.5em;
    padding: 5px;
}
h3:nth-of-type(1){
    background: url("../../picture/bg.gif") 3px 3px no-repeat;
}
div{
    width:250px;
    border:1px #aacbee solid;
    padding:0px 0px 10px 0px;
    background-color:#f5f9fc;
    margin:0px auto;
    background: linear-gradient(to bottom,#aacbee,#FFFFFF);/*颜色渐变*/
    border-radius: 20px;
}
div a{
    color: gray;
    text-decoration: none;
    font-size: 18px;
    list-style: none;
    padding: 10px;
    text-indent: 2em;
    padding-left: 20px;
}
div a:hover{
    color:red;
}
div a:nth-of-type(1){
    background: url(../../picture/dotBg.gif) 3px 3px no-repeat;
}
div a:nth-of-type(2){
    background: url(../../picture/dotBg.gif) 3px 3px no-repeat;
}
div a:nth-of-type(3){
    background: url(../../picture/dotBg.gif) 3px 3px no-repeat;
}
div a:nth-of-type(4){
    background: url(../../picture/dotBg.gif) 3px 3px no-repeat;
}
div a:nth-of-type(5){
    background: url(../../picture/dotBg.gif) 3px 3px no-repeat;
}
div a:nth-of-type(6){
    background: url(../../picture/dotBg.gif) 3px 3px no-repeat;
}
div a:nth-of-type(7){
    background: url(../../picture/dotBg.gif) 3px 3px no-repeat;
}

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

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

div,a,ul,li{
    padding: 0px;
    margin: 0px;
}
div{
    width:250px;
    box-sizing: border-box;
    border:5px orange solid;
    background-color:#f5f9fc;
    border-radius: 20px;
}
div a{
    font-weight: bold;
    color: black;
    text-decoration: none;
    font-size: 15px;
}
li{
    list-style-type: none;
    border: 1px solid;
    padding: 15px;
    text-indent: 2em;
    padding-left: 20px;
}
div a:hover{
    color: #FF6600;
}
div ul li:nth-of-type(1){
    background: url(../../images/icon_01.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(2){
    background: url(../../images/icon_02.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(3){
    background: url(../../images/icon_03.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(4){
    background: url(../../images/icon_04.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(5){
    background: url(../../images/icon_05.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(6){
    background: url(../../images/icon_06.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(7){
    background: url(../../images/icon_07.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(8){
    background: url(../../images/icon_08.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(9){
    background: url(../../images/icon_09.jpg) 3px 3px no-repeat;
}
div ul li:nth-of-type(10){
    background:url(../../images/icon_10.jpg) 3px 3px no-repeat;
}

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

第三题：制作权威课程免费体验登入页面：

div{
    background: url("../../images/bg.jpg") 0px 0px no-repeat;
    padding-bottom: 40px;
    margin-left: 600px;
    border-radius: 10px;
    width: 300px;
    height: 310px;
}
ul{
    color: #FFFFFF;padding-top:80px;padding-left: 20px; border-radius:10px;
}
li{
    list-style: none;

}
span{
    color: red;
}
a {
    margin-left: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/免费体验登入.css" rel="stylesheet">
</head>
<body>
<div>
    <ul>
       <p>
        <li>
            <span>*</span>&nbsp;姓名：<input type="text">
        </li>
       </p>
        <p>
        <li>
            <span>*</span>&nbsp;邮箱：<input type="email">
        </li>
        </p>
        <p>
        <li>
            <span>*</span>&nbsp;电话：<input type="tel">
        </li>
        </p>
        <p>
        <li>
            性别：<select name="bmon">
            <option value="">请选择年份</option>
            <option value="">男</option>
            <option value="">女</option>
        </select>
        </li>
        </p>
        <p>
        <li>
            年龄：<select name="bmon">
            <option value="">请选择年份</option>
        </select>
        </li>
        </p>
        <li>
            <a href=""><input type="image" src="../images/btn.jpg"/>
        </li>
    </ul>
</div>
</body>
</html>

盒子模型 第六章

猜你喜欢