寒假作业15_css导航栏课程导航 accp 软件工程师 btest 软件测试工程师 benet 网络工程师 jb-CSDN博客

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>北大青鸟课程导航</title>
    <style>
        body, ul, li, h1 {
            padding: 0px;
            margin: 0px;
        }
        li {
            list-style: none;
        }
        div {
            width: 220px;
            border: 1px #aacbee solid;
            padding: 0px 0px 10px 0px;
            background-color: #f5f9fc;
            margin: 0px auto;
        }
        h1 {
            background: url(image/title_icon.gif) 5px 8px no-repeat;
            padding-left: 25px;
            color: #1f376d;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
        }
        ul {
            padding: 0px 5px;
        }
        li {
            height: 30px;
            background: url(image/submenu.gif) right center no-repeat;
            line-height: 30px;
            padding-left: 5px;
            border-top: 1px #cfe2f5 solid;
        }
        a {
            text-decoration: none;
            color: #000000;
        }
        a:hover {
            text-decoration: none;
            color: #FF6215;
        }
    </style>
</head>
<body>
<div>
    <h1>课程导航</h1>
    <ul>
        <li><a href="#">ACCP 软件工程师</a></li>
        <li><a href="#">BTEST 软件测试工程师</a></li>
        <li><a href="#">BENET 网络工程师</a></li>
        <li><a href="#">JBNS 网站工程师</a></li>
        <li><a href="#">ACCP 启蒙星</a></li>
        <li><a href="#">ANDROID 软件工程师</a></li>
        <li><a href="#">JAVA 软件工程师</a></li>
        <li><a href="#">.NET 软件工程师</a></li>
        <li><a href="#">网络营销</a></li>
    </ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品分类</title>
    <style>
        h1, dl, dt, dd {
            margin: 0px;
            padding: 0px;
        }
        body {
            background-color: #D5D5D5;
        }
        div {
            width: 230px;
            background-color: #fff;
        }
        h1 {
            font-size: 16px;
            font-weight: bold;
            color: #FFF;
            background-color: #000;
            text-indent: 1em;
            line-height: 35px;
        }
        dt {
            padding-left: 27px;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
            font-weight: bold;
        }
        dd {
            font-size: 12px;
            color: #666666;
            line-height: 20px;
            border-bottom: 1px #666666 dashed;
            padding-left: 27px;
        }
        dt:nth-of-type(1) {
            background: url(image/icon_01.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(2) {
            background: url(image/icon_02.gif) 0px 2px no-repeat;
        }
        dt:nth-of-type(3) {
            background: url(image/icon_03.gif) 0px 4px no-repeat;
        }
        dt:nth-of-type(4) {
            background: url(image/icon_04.gif) 0px 2px no-repeat;
        }
        dt:nth-of-type(5) {
            background: url(image/icon_05.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(6) {
            background: url(image/icon_06.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(7) {
            background: url(image/icon_07.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(8) {
            background: url(image/icon_08.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(9) {
            background: url(image/icon_09.gif) 0px 0px no-repeat;
        }
        dd:last-of-type {
            border-bottom: 0px;
        }
    </style>
</head>
<body>
<div>
    <h1>全部分类</h1>
    <dl>
        <dt>护肤</dt>
        <dd>
            洁面 化妆水 喷雾 美容液 眼霜<br/>
            眼部精华 眼膜 面膜 面膜贴<br/>
            水洗面膜 免洗面膜 精华 精油<br/>
            凝露 乳液 面霜 日霜 晚霜
        </dd>
        <dt>彩妆</dt>
        <dd>
            卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>
            睫毛膏 眼影 唇彩 腮红 眼线笔<br/>
            底妆 遮瑕 蜜粉 眉笔 美甲
        </dd>
        <dt>香氛</dt>
        <dd>男香 女香 小Q装 中性香水</dd>
        <dt>身体护理</dt>
        <dd>
            洗发 护发 沐浴 身体乳 手足护理<br/>
            护手霜 纤体 身体精油 颈部护理<br/>
            个人护理 卫生用品 脱毛
        </dd>
        <dt>礼盒套装</dt>
        <dd>
            护肤套装 身体护理套装 彩妆套装 <br/>
            旅行装 香水套装 男士套装
        </dd>
        <dt>美容工具</dt>
        <dd>
            护肤 彩妆 美发 美体 美甲 <br/>
            美容仪器 其他美容工具
        </dd>
        <dt>母婴专区</dt>
        <dd>奶粉 尿裤湿巾 母婴洗护</dd>
        <dt>男士专区</dt>
        <dd>
            洁面 爽肤水 面霜 男香<br/>
            眼霜 凝胶 乳液 精华 沐浴
        </dd>
        <dt>食品保健</dt>
        <dd>瘦身类 保健类 美容类 食品类</dd>
    </dl>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东快报</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            margin: 30px;
        }
        a {
            text-decoration: none;
        }
        div {
            border: 1px #e4e4e4 solid;
            width: 230px;
            box-sizing: border-box;
        }
        h2 {
            padding-left: 10px;
            line-height: 43px;
            height: 43px;
            border-bottom: 2px #E8E8E7 dotted;
            font-size: 16px;
            color: #666;
            font-weight: normal;
            background: linear-gradient(to bottom,#CCCCFF,#FFFFFF);
        }
        ul {
            list-style: none;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        li {
            line-height: 26px;
            padding-left: 10px;
            padding-right: 10px;
        }
        a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        a:hover {
            color: #b20000;
        }
        span {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    <h2>京东快报</h2>
    <ul>
        <li><a href=""><span>[特惠]</span>海飞丝去屑又去油 超清爽</a></li>
        <li><a href=""><span>[公告]</span>京东公益支持鲁甸新动作</a></li>
        <li><a href=""><span>[特惠]</span>4688元抢iPhone 6</a></li>
        <li><a href=""><span>[公告]</span>小米电视携豪礼高调入驻京东</a></li>
    </ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>美容热点产品</title>
    <style>
        p, ul, li {
            margin:0px;
            padding:0px;
        }
        ul, li {
            list-style-type:none;
        }
        body {
            background-color:#eee7e1;
            font-size:12px;
        }
        div {
            width:260px;
            background:#FFF;
        }
        p {
            font-size:14px;
            font-weight:bold;
            color:#FFF;
            background-color:#e9185a;
            height:35px;
            line-height:35px;
            padding-left:10px;
        }
        li {
            border-bottom:1px #a8a5a5 dashed;
            height:30px;
            line-height:30px;
            padding-left:2px;
        }
        a {
            color:#666666;
            text-decoration:none;
        }
        a:hover {
            color:#e9185a;
        }
        a span {
            color:#FFF;
            font-weight:bold;
            margin-right: 10px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #373b3c;
            line-height: 20px;
            text-align: center;
        }
        a:hover span {
            background: #e9185a;
        }
    </style>
</head>
<body>
<div>
    <p>大家都喜欢买的美容品</p>
    <ul>
        <li><a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
        <li><a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
        <li><a href="#"><span>3</span>OLAY玉兰油多效修护霜 50g</a></li>
        <li><a href="#"><span>4</span>巨型一号丝瓜水320ML</a></li>
        <li><a href="#"><span>5</span>倩碧保湿洁肤水2号 200ml</a></li>
        <li><a href="#"><span>6</span>比度克细肤淡印霜 30g</a></li>
        <li><a href="#"><span>7</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
        <li><a href="#"><span>8</span>SK-II护肤精华露 215ml</a></li>
        <li><a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a></li>
    </ul>
</div>
</body>
</html>