盒子模型 第六章

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

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;
}
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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;
}
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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;
}
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="css/免费体验登入.css" rel="stylesheet">
head>
<body>
<div>
    <ul>
       <p>
        <li>
            <span>*span> 姓名:<input type="text">
        li>
       p>
        <p>
        <li>
            <span>*span> 邮箱:<input type="email">
        li>
        p>
        <p>
        <li>
            <span>*span> 电话:<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>

你可能感兴趣的:(盒子模型 第六章)