第五章 CSS3美化网页元素

1,制作北大青鸟课程介绍页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北大青鸟</title>
    <style>

        body{background: linear-gradient(to left,#ececec,#ffffed);}
        div:nth-of-type(1){color: #5c9815;line-height: 30px;}
        div:nth-of-type(2){color: #f26522;line-height: 30px;}
        span{color: #FFFFFF}
        .title{background:#668800;}
        .title1{background: #0D7114}
        .title2{background:deepskyblue }
        .title3{background:blue }
        .title4{background:#220088;}
        .title5{background: #ff5511;}
        .title6{background: #FF0000;}
        .title7{background: #ff0088;}
        .title8{background: #880000;}
        .title9{background: #7700bb;}
        .title10{background: #550088;}
    </style>
</head>
<body>
<img src="css/title.gif">
<p><img src="css/img_01.png"></p>
<div><span class="title" >逆向课程设计:</span>以企业需求决定课程设计内容,确保训练
     内容及深度和企业需求<br>一致<br>
     <span class="title1">模拟学员学习路线:</span>强调难点和复杂技能点的反复训练,力求
     学习效果和学习体<br>验<br>
     <span class="title2">互联网作为教学环境:</span> 学员的日常教学和训练均在互联网线上进行<br>
     <span class="title3">学习挡板监控网上学习效果:</span> 每个学习阶段设置线上线下测试,严密监控
     学习效<br>果<br>
    <span class="title4">真实开发项目经验积累:</span> 采用专业互联网企业提供的真实项目作为模拟开发</div>
<p><img src="css/img_02.png"></p>
<div><span class="title5">实用性——</span>以就业岗位需求为导向,重点讲解企业80%的时间在使用的20%<br>的技术<br>
     <span class="title6">权威性——</span>与来自百度等知名企业的专家联合开发<br>
     <span class="title7">专业性——</span>引进业内资深人才和典型行业开发项目<br>
    <span class="title8"> 真实性——</span>在互联网真实环境下进行教学和训练<br>
     <span class="title9">易学性——</span>在线培训模式,24小时专家在线解答疑难问题<br>
     <span class="title10">完整性——</span>利用SNS虚拟社区:学习、人脉双丰收</div>
</body>
</html>

2,制作席慕容的诗《初相遇》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初相遇</title>
    <style>
        body{line-height: 40px;background: linear-gradient(to left,#caeffe,#FFFFED);
        width: 600px;}
        .h1{color: #999999;font-size: 24px;font-family: 楷体;}
        h2,span{vertical-align: middle;}
        h1{color: #1F87CC ;text-shadow:black 2px 2px 2px;}
        p .title,.back span{color:blue;font-size: 24px;
        text-shadow:rgba(0,0,0,0.5)3px 3px 3px;font-weight: bold}
        p .title1,.back1 span{color: #1F87CC;font-size: 24px;
        font-weight: bold;font-style: italic;}
        p.title2,.back2 span{color: #0D7114;text-decoration: underline;
        font-family: 宋体}
    </style>
</head>
<body>
<h1 style="text-align: center">初相遇<span class="h1">  文/席慕容</span></h1>
<p style="text-indent: 2em"><span class="title">美</span>丽的梦和美丽的诗一样,
    都是可遇而不可求的,常常在最没能料到<br>的时刻里出现。</p>
<p class="back1" style="text-indent: 2em">我喜欢那样的梦,在梦里,一切都可以
    重新开始,一切都可以慢慢解<br>释,心里 甚至还能感觉到,所有被浪费的
    时光竟然都能重回时的狂喜与感<br>激。<span>胸怀  中满溢着幸福,只因你就在我眼前
    </span>,对我微笑<br>,一如当年。</p>
<p class="back2" style="text-indent: 2em"><span>我喜欢那样的梦,明明知道你已为我跋涉千里
    ,却又觉得芳草鲜美,落<br>落英缤纷,好像你我才初相遇。</span></p>
</body>
</html>

3,制作淘宝女装分类页面

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

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值