第五章 CSS3美化網頁元素
阿新 • • 發佈：2019-01-25
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>