當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML / CSS 实践练习

發(fā)布時間：2024/3/13 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML / CSS 实践练习小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2022.7.13 周三學(xué)習(xí)記錄博客

今日學(xué)習(xí)時長：3h

學(xué)習(xí)進(jìn)度：1、靜態(tài)網(wǎng)頁實踐練習(xí)（今日完成了頁眉、頁腳部分）；2、css中精靈圖的使用

css精靈圖

為了有效地減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了CSS 精靈技術(shù)。

核心原理：將網(wǎng)頁中的一些小背景圖像整合到一張大圖中，這樣服務(wù)器只需要一次請求就可以了。

精靈圖的使用：

精靈圖主要針對于小的背景圖片使用

主要借助于背景位置來實現(xiàn)—— background-position

一般情況下精靈圖都是負(fù)值。（網(wǎng)頁中的X Y 坐標(biāo)與數(shù)學(xué)不同）

網(wǎng)頁效果圖示例：

?精靈圖原圖素材：

<!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>

靜態(tài)網(wǎng)頁書寫練習(xí)

網(wǎng)頁效果示例：

今日只書寫了網(wǎng)頁的頁眉和頁腳部分

練習(xí)素材來源于b站教學(xué)視頻：第300P。圖片素材同樣來源于視頻中黑馬程序員pink老師前端入門教程，零基礎(chǔ)必看的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"><title>品優(yōu)購商城-綜合網(wǎng)購首選-正品低價、品質(zhì)保障、配送及時、輕松購物！</title><meta name="description"content="品優(yōu)購商城-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷、誠信的服務(wù)，為您提供愉悅的網(wǎng)上購物體驗!" /><meta name="keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東" /><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>品優(yōu)購歡迎您！ </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">我的品優(yōu)購</li><li></li><li>品優(yōu)購會員</li><li></li><li>企業(yè)采購</li><li></li><li class="arrow-icon">關(guān)注品優(yōu)購</li><li></li><li class="arrow-icon">客戶服務(wù)</li><li></li><li class="arrow-icon">網(wǎng)站導(dǎo)航</li></ul></div></div> </section>   <header class="header w"><div class="logo"><h1><a href="index.html" title="品優(yōu)購商城">品優(yōu)購商城</a></h1></div><div class="search"><input type="search" name="" id="" placeholder="語言開發(fā)"><button>搜索</button></div><div class="hotwords"><a href="#" class="style_red">優(yōu)惠購首發(fā)</a><a href="#">億元優(yōu)惠</a><a href="#">9.9元團(tuán)購</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> <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> <footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li></ul></div><div class="mod_help"><dl><dt>服務(wù)指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>幫助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品優(yōu)購客戶端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">關(guān)于我們</a> | <a href="#">聯(lián)系我們</a> | 聯(lián)系客服 | 商家入駐 | 營銷中心 | 手機品優(yōu)購 | 友情鏈接 | 銷售聯(lián)盟 | 品優(yōu)購社區(qū) |品優(yōu)購公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平區(qū)建材城西路金燕龍辦公樓一層郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br>京ICP備08001421號京公網(wǎng)安備110108007702</div></div></div></footer> </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; } /* 快捷導(dǎo)航模塊 */ .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; }

總結(jié)

以上是生活随笔為你收集整理的HTML / CSS 实践练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

html
css