第一题:制作北大青鸟课程介绍页面。
.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">初相遇 <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> <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> </p> <img src="../picture/dress02.png" width="40" height="40">上装<hr width="23%" align="left"/> <p> <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> <a href="#">裙子</a> </li> </p> <img src="../picture/dress03.png" width="40" height="40">裙子<hr width="23%" align="left"/> <p> <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> </p> <img src="../picture/dress04.png" width="40" height="40">裤子<hr width="23%" align="left"/> <p> <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> </p> <img src="../picture/dress05.png" width="40" height="40">其他女装<hr width="23%" align="left"/> <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="#">职业<br>装</a> <a href="#">全球购</a> <a href="#">羊绒衫</a> <a href="#">毛衣</a> <a href="#">呢大衣</a> <a href="#">羽绒服</a> <a href="#">真皮皮衣</a> </li> </ul> </body> </html>