css3美化网页元素 第五章

第一题:制作北大青鸟课程介绍页面。

.A{
    width:620px;
    background-color:#f3f4df;
    background: linear-gradient(to bottom,#ecececec,#ffffed);
}
.A{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#009900;
    background-size: contain;
}
.q{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#5c9815;
    background-size: contain;
}
.w{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#1F87CC;
    background-size: contain;
}
.e{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#0467ac;
    background-size: contain;
}
.r{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#1a66b3;
    background-size: contain;
}
.t{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#f26522;
    background-size: contain;
}
.y{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#FF0000;
    background-size: contain;
}
.u{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:Pink;
    background-size: contain;
}
.i{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:#640000;
    background-size: contain;
}
.z{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:purple;
    background-size: contain;
}
.x{
    font-size:20px;
    color:#FFF;
    line-height:20px;
    text-indent:1em;
    background-color:black;
    background-size: contain;
}
.B{
    color: #5c9815;
    font-size: 20px;
}
.C{
    color: #f26522;
    font-size: 20px;
}
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北大青鸟课程介绍</title>
    <link href="css/bdqn.css" rel="stylesheet">
</head>
<body>
<div class="A">
<img src="../picture/title.gif" width="598" height="67"/>
    <p>
        <img src="../picture/img_01.png">
    </p>
    <p>
        <span class="A">逆向课程设计:</span><span class="B"> 以企业需求决定课程设计内容,确保训练内容及深度和企业需求一致</span><br>
    </p>
    <p>
        <span class="q">模拟学员学习路线:</span><span class="B">强调难点和复杂技能点的反复训练,力求学习效果和学习体验</span><br>
    </p>
    <p>
        <span class="w">互联网作为教学环境:</span><span class="B">学员的日常教学和训练均在互联网线上进行</span><br>
    </p>
    <p>
        <span class="e">学习挡板监控网上学习效果:</span><span class="B">每个学习阶段设置线上线下测试,严密监控学习效果</span><br>
    </p>
    <p>
        <span class="r">真实开发项目经验积累:</span><span class="B">采用专业互联网企业提供的真实项目作为模拟开发</span>
    </p>
    <p>
        <img src="../picture/img_02.png">
    </p>
    <p>
        <span class="t">【实用性】——</span><span class="C">以就业岗位需求为导向,重点讲解企业80%的时间在使用的20%的技术</span><br>
    </p>
    <p>
        <span class="y">【权威性】——</span><span class="C">与来自百度等知名企业的专家联合开发</span><br>
    </p>
    <p>
        <span class="u">【专业性】——</span><span class="B">引进业内资深人才和典型行业开发项目</span><br>
    </p>
    <p>
        <span class="i">【真实性】——</span><span class="B">在互联网真实环境下进行教学和训练</span><br>
    </p>
    <p>
        <span class="z">【易学性】——</span><span class="B">在线培训模式,24小时专家在线解答疑难问题</span><br>
    </p>
    <p>
        <span class="x">【完整性】——</span><span class="B">利用SNS虚拟社区:学习、人脉双丰收</span>
    </p>
</div>
</body>
</html>
第二题:制作席慕容的诗《初相遇》。
 
.A{
    width:400px;
    background-color:#f3f4df;
    background: linear-gradient(to bottom,#caeffe,#ffffed);
}
#h1{
    font-size: 18px;
    text-shadow: #000033 2px 2px 2px;
    text-align: center;
}
#s{
    font-size: 15px;
    color: gray;
    text-shadow: #000033 2px 2px 2px;
}
p{
    text-indent: 2em;
    line-height:22px;
}
#a{
    color: #1F87CC;
    font-size: 18px;
    font-weight: bold;
    text-shadow: #000033 2px 2px 2px;
    text-align: center;
}
#b{
    color: blue;
    font-size: 16px;
}
.p{
    font-size: 12px;
    line-height: 22px;
}
.v{
    color: #009900;
    text-decoration: underline;
}
.n{
    font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初相遇</title>
    <link href="css/gushi.css" rel="stylesheet">
</head>
<body>
<div class="A">
    <h1 id="h1">初相遇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="s">文/席慕容</span></h1>
    <p class="n">
        <span id="a"></span>丽的梦和美丽的诗一样,都是可遇而不可求的,常常在最没能料到的时刻里出现。
    </p>
    <p class="n">
        我喜欢那样的梦,在梦里,一切都可以重新开始,一切都可以慢慢解释,心里甚至还能感觉到,所有被浪费的时光竟然都能重回时的狂喜与感激。<span id="b"><em>胸怀中满溢着幸福,只因你就在我眼前</em></span> ,对我微笑,一如当年。
    </p>
    <p class="n">
        <span class="v">我喜欢那样的梦,明明知道你已为我跋涉千里,却又觉得芳草鲜美,落落英缤纷,好像你我才初相遇。</span>
    </p>
</div>
</body>
</html>

第三题:制作淘宝女装分类页面。

ul{
    font-size: 18px;
    font-weight: bold;
}
li{
    font-size: 12px;
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: #f60;
    text-decoration: underline;
}
img ,ul{
    vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝女装分类页面</title>
    <link href="css/taobao.css" rel="stylesheet">
</head>
<body>
<ul><img src="../picture/dress01.png" width="40" height="40" >夏季流行<hr width="23%" align="left"/>
    <p>
        <li>
        <a href="#">夏季新品</a>&nbsp;&nbsp;<a href="#">雪纺裙</a>&nbsp;&nbsp;<a href="#">短袖T</a>&nbsp;&nbsp;<a href="#">铅笔裤</a>&nbsp;&nbsp;<a href="#">短裤</a>&nbsp;&nbsp;<a href="#">短袖衬衫</a>&nbsp;&nbsp;<a href="#">小脚牛<br>仔裤</a>&nbsp;&nbsp;<a href="#">开衫</a>&nbsp;&nbsp;<a href="#">蕾丝/雪纺衫</a>&nbsp;&nbsp;<a href="#">韩版外套</a>&nbsp;&nbsp;<a href="#">小西装</a>&nbsp;&nbsp;<a href="#">中长款裙</a>
     </li>
    </p>
    <img src="../picture/dress02.png" width="40" height="40">上装<hr width="23%" align="left"/>
   <p>
       <li>
        <a href="#">T恤</a>&nbsp;&nbsp;<a href="#"> 衬衫</a>&nbsp;&nbsp;<a href="#">针织衫</a>&nbsp;&nbsp;<a href="#">长袖T</a>&nbsp;&nbsp;<a href="#">韩版T</a>&nbsp;&nbsp;<a href="#">情侣衫</a>&nbsp;&nbsp;<a href="#">雪纺衬衫</a>&nbsp;&nbsp;<a href="#">韩版<br>衬衫</a>&nbsp;&nbsp;<a href="#">防晒衣</a>&nbsp;&nbsp;<a href="#">休闲套装</a>&nbsp;&nbsp;<a href="#">卫衣</a>&nbsp;&nbsp;<a href="#"> 背心/吊带</a>&nbsp;&nbsp;<a href="#">裙子</a>
    </li>
   </p>
    <img src="../picture/dress03.png" width="40" height="40">裙子<hr width="23%" align="left"/>
    <p>
        <li>
        <a href="#">连衣裙</a>&nbsp;&nbsp;<a href="#">半身裙 </a>&nbsp;&nbsp;<a href="#">长裙</a>&nbsp;&nbsp;<a href="#">短袖裙</a>&nbsp;&nbsp;<a href="#">蕾丝连衣裙</a>&nbsp;&nbsp;<a href="#">长袖裙</a>&nbsp;&nbsp;<a href="#">无袖/<br>背心裙</a>&nbsp;&nbsp;<a href="#">A字裙</a>&nbsp;&nbsp;<a href="#">牛仔裙</a>&nbsp;&nbsp;<a href="#">半身中长裙</a>&nbsp;&nbsp;<a href="#">半身短裙</a>&nbsp;&nbsp;<a href="#">包臀裙</a>
    </li>
    </p>
    <img src="../picture/dress04.png" width="40" height="40">裤子<hr width="23%" align="left"/>
    <p>
        <li>
        <a href="#">裤子</a>&nbsp;&nbsp;<a href="#">休闲裤</a>&nbsp;&nbsp;<a href="#">牛仔裤</a>&nbsp;&nbsp;<a href="#">打底裤</a>&nbsp;&nbsp;<a href="#">长裤</a>&nbsp;&nbsp;<a href="#">哈伦裤</a>&nbsp;&nbsp;<a href="#">阔腿裤</a>&nbsp;&nbsp;<a href="#">短裤/<br>热裤</a>&nbsp;&nbsp;<a href="#">连体裤</a>&nbsp;&nbsp;<a href="#">七/九分裤</a>&nbsp;&nbsp;<a href="#">牛仔短裤</a>&nbsp;&nbsp;<a href="#">西装裤</a>
    </li>
    </p>
    <img src="../picture/dress05.png" width="40" height="40">其他女装<hr width="23%" align="left"/>
    <li>
        <a href="#">胖M装</a>&nbsp;&nbsp;<a href="#">中老年</a>&nbsp;&nbsp;<a href="#">婚纱</a>&nbsp;&nbsp;<a href="#">礼服</a>&nbsp;&nbsp;<a href="#">旗袍</a>&nbsp;&nbsp;<a href="#">夜店</a>&nbsp;&nbsp;<a href="#">舞台装</a>&nbsp;&nbsp;<a href="#">唐装</a>&nbsp;&nbsp;<a href="#">职业<br></a>&nbsp;&nbsp;<a href="#">全球购</a>&nbsp;&nbsp;<a href="#">羊绒衫</a>&nbsp;&nbsp;<a href="#">毛衣</a>&nbsp;&nbsp;<a href="#">呢大衣</a>&nbsp;&nbsp;<a href="#">羽绒服</a>&nbsp;&nbsp;<a href="#">真皮皮衣</a>
    </li>
</ul>
</body>
</html>

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值