HTML / CSS 实践练习
生活随笔
收集整理的這篇文章主要介紹了
HTML / CSS 实践练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2022.7.13 周三學習記錄博客
今日學習時長：3h
?
?
學習進度：1、靜態網頁實踐練習（今日完成了頁眉、頁腳部分）；2、css中精靈圖的使用
css精靈圖
為了有效地減少服務器接收和發送請求的次數，提高頁面的加載速度，出現了CSS 精靈技術。
核心原理：將網頁中的一些小背景圖像整合到一張大圖中，這樣服務器只需要一次請求就可以了。
精靈圖的使用：
網頁效果圖示例：
?精靈圖原圖素材：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>精靈圖</title><style>span {display: inline-block;background: url(images/abcd.jpg) no-repeat;}.p {width: 100px;height: 112px;background-position: -493px -276px;}.i {width: 60px;height: 108px;background-position: -327px -142px;}.n {width: 108px;height: 109px;background-position: -215px -141px;}.k {width: 105px;height: 114px;background-position: -495px -142px;}</style> </head> <body><span class="p"></span><span class="i"></span><span class="n"></span><span class="k"></span> </body> </html>靜態網頁書寫練習
網頁效果示例：
今日只書寫了 網頁的頁眉和頁腳部分
練習素材來源于b站教學視頻：第300P。圖片素材同樣來源于視頻中黑馬程序員pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動端前端視頻教程_嗶哩嗶哩_bilibili
?
HTML代碼展示：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 網站TDK SEO優化 --><title>品優購商城-綜合網購首選-正品低價、品質保障、配送及時、輕松購物！</title><meta name="description"content="品優購商城-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" /><meta name="keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東" /><!-- 引入favicon圖標 --><link rel="shortcut icon" href="favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"> </head> <body> <!-- 快捷導航模塊 --> <section class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您！ </li><li><a href="#">請登錄</a> <a href="register.html" class="style_red">免費注冊</a></li></ul></div><div class="fr"><ul><li>我的訂單</li><li></li><li class="arrow-icon">我的品優購</li><li></li><li>品優購會員</li><li></li><li>企業采購</li><li></li><li class="arrow-icon">關注品優購</li><li></li><li class="arrow-icon">客戶服務</li><li></li><li class="arrow-icon">網站導航</li></ul></div></div> </section> <!-- 快捷導航模塊 結束 --> <!-- header頭部模塊制作 開始 --> <header class="header w"><!-- logo模塊 --><div class="logo"><h1><a href="index.html" title="品優購商城">品優購商城</a></h1></div><!-- search搜索模塊 --><div class="search"><input type="search" name="" id="" placeholder="語言開發"><button>搜索</button></div><!-- hotwords模塊制作 --><div class="hotwords"><a href="#" class="style_red">優惠購首發</a><a href="#">億元優惠</a><a href="#">9.9元團購</a><a href="#">美滿99減30</a><a href="#">辦公用品</a><a href="#">電腦</a><a href="#">通信</a></div><!-- 購物車模塊 --><div class="shopcar">我的購物車<i class="count">8</i></div> </header> <!-- header頭部模塊制作 結束 --><!-- nav模塊制作 開始 --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分類</div></div><div class="navitems"><ul><li><a href="#">服裝城</a></li><li><a href="#">服裝城</a></li><li><a href="#">服裝城</a></li><li><a href="#">服裝城</a></li><li><a href="#">服裝城</a></li><li><a href="#">服裝城</a></li><li><a href="#">服裝城</a></li><li><a href="#">服裝城</a></li></ul></div></div> </nav> <!-- nav模塊制作 end --><!-- 底部模塊的制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li></ul></div><div class="mod_help"><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>幫助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品優購客戶端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">關于我們</a> | <a href="#">聯系我們</a> | 聯系客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 | 品優購社區 |品優購公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br>京ICP備08001421號京公網安備110108007702</div></div></div></footer><!-- 底部模塊的制作 end --> </body> </html>css代碼展示：
/* 聲明icon */ @font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?tomleg');src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?tomleg') format('truetype'),url('../fonts/icomoon.woff?tomleg') format('woff'),url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;} /* 版心 */ .w {width: 1200px;margin: 0 auto; } .fl {float: left; } .fr {float: right; } .style_red {color: #c81623; } /* 快捷導航模塊 */ .shortcut {height: 31px;line-height: 31px;background-color: #f1f1f1; } .shortcut ul li {float: left; }.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0; } .arrow-icon::after {content: '\e91e';font-family: 'icomoon';margin-left: 6px; }/* header 部分開始 */ .header {position: relative;height: 105px;} .logo {position: absolute;top: 25px;width: 171px;height: 61px;} .logo a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat;text-indent: -9999px;overflow: hidden; } .search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a; } .search input {float: left;width: 454px;height: 32px;padding-left: 10px; } .search button {float: left;width: 80px;height: 32px;background-color: #b1191a;font-size: 16px;color: #fff; } .hotwords {position: absolute;top: 66px;left: 346px; } .hotwords a {margin: 0 10px; } .shopcar {position: absolute;right: 60px;top: 25px;width: 140px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #dfdfdf;background-color: #f7f7f7; } .shopcar::before {content: '\e93a';font-family: 'icomoon';margin-right: 5px;color: #b1191a; } .shopcar::after {content: '\e920';font-family: 'icomoon';margin-left: 10px; } .count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0; }/* nav部分開始 */ .nav {height: 47px;border-bottom: 2px solid #b1191a; } .nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a; } .nav .navitems {float: left; } .dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px; } .dropdown .dd {width: 210px;height: 465px;background-color: #c81623;margin-top: 2px; } .dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px; } .dropdown .dd ul li:hover {background-color: #fff; } .dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;color: #fff;font-family: 'icomoon';content: '\e920';font-size: 14px; } .dropdown .dd ul li a {font-size: 14px;color: #fff; } .dropdown .dd ul li:hover a {color: #c81623; } .navitems ul li {float: left; } .navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px; }/* 底部模塊開始 */ .footer {height: 415px;background-color: #f5f5f5;padding-top: 30px; } .mod_service {height: 80px;border-bottom: 1px solid #ccc; } .mod_service ul li {float: left;width: 300px;height: 50px;padding-left: 35px; } .mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url(../images/icons.png) no-repeat -252px -2px;margin-right: 8px; } .service_txt h4 {font-size: 14px; } .service_txt p {font-size: 12px; } .mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px; } .mod_help dl {float: left;width: 200px; } .mod_help dl:last-child {width: 90px;text-align: center; } .mod_help dl dt {font-size: 16px; margin-bottom: 10px; } .mod_copyright {text-align: center;padding-top: 20px; } .links {margin-bottom: 15px; } .links a {margin: 0 3px; } .copyright {line-height: 20px; }總結
以上是生活随笔為你收集整理的HTML / CSS 实践练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 程序猿喝酒
- 下一篇： 2017年html5行业报告,云适配发布