前端入門實(shí)戰(zhàn)練習(xí)之騰訊云頁(yè)面實(shí)現(xiàn)

樣例圖

實(shí)現(xiàn)后的樣子如圖所示，ps：量的尺寸最開(kāi)始肯定是沒(méi)有的，都是寫一步，測(cè)一步，最后就成這樣啦

使用的工具是 PxCook，方便我們量取圖片設(shè)計(jì)尺寸

實(shí)現(xiàn)效果

初步實(shí)現(xiàn)大致樣式，明日進(jìn)行細(xì)節(jié)優(yōu)化，2022.4.3

圖中標(biāo)識(shí)位置尚未優(yōu)化，下面是該部分實(shí)現(xiàn)源碼

index.html

最新活動(dòng) | 產(chǎn)品 | 解決方案 | 定價(jià) | 文檔 | 企業(yè)中心 | 云市場(chǎng) | 開(kāi)發(fā)者支持 | 合作與生態(tài) | 客戶

style.css

* { margin: 0; padding: 0; } /* 導(dǎo)航 */ .nav { height: 40px; background-color: #2b303b; } .nav .container { padding-left: 240px; margin: 0 auto; width: 1680px; height: 40px; } .nav .container img { margin-top: 12px; } .nav .container a { text-decoration: none; /* 行高=上邊距+文字高度+下邊距 */ line-height: 40px; font-size: 16px; color: #ffffff; } .nav .container span { color: #ffffff; font-size: 16px; } /* 頁(yè)面上部分 */ .top { width: 1680px; height: 480px; background-image: url(./images/banner.png); } /* 頁(yè)面上部分 列表 */ .top .list { margin-left: 240px; width: 250px; height: 480px; background-color: #1b2a3f; font-size: 15px; color: #ffffff; } .top .list ul { padding-top: 54px; } .top .list li { list-style: none; padding-left: 20px; line-height: 40px; } .list a { color: #ffffff; text-decoration: none; } .arrows::after { content: '>'; /* padding-left: 138px; */ position: absolute; margin: 0 auto; } /* 頁(yè)面中間部分內(nèi)容 */ .middle { width: 1680px; height: 740px; background-color: #ffffff; } .middle h2 { text-align: center; padding-top: 45px; line-height: 23px; } .middle h4 { text-align: center; padding-top: 26px; line-height: 14px; } .middle .txt { margin: 31px auto 140px; border: 1px solid #cccccc; /* 圓角尺寸 */ border-radius: 15px; /* 自動(dòng)內(nèi)減 */ box-sizing: border-box; width: 1200px; height: 562px; } .box h1 { padding-left: 50px; padding-top: 46px; box-sizing: border-box; /* border-bottom: 2px solid #cccccc; */ /* 不再使用 border 控制,看做一個(gè)空 div 用偽元素控制 實(shí)現(xiàn)效果如下*/ } .box h1::after { content: ''; /* border 寬度 */ width: 128px; /* border 高度 */ height: 2px; background-color: #cccccc; /* border 位置 absolute(絕對(duì)定位) */ position: absolute; left: 295px; top: 745px; bottom: 918px; /* right: 0px; */ box-sizing: border-box; } .box p { line-height: 48px; padding-left: 50px; box-sizing: border-box; } .box img { float: right; margin-left: 76px; margin-right: 50px; } .txt .button { margin-left: 50px; margin-top: 30px; width: 164px; height: 49px; background-color: #ffffff; /* 自動(dòng)內(nèi)減 */ box-sizing: border-box; border: 2px solid #ffa50b; text-align: center; } .study a { /* a 標(biāo)簽 切換顯示模式 */ display: block; line-height: 48px; text-decoration: none; color: #000000; } .footer { width: 1680px; height: 400px; background-color: #2e3033; box-sizing: border-box; } .footer-left { float: left; margin-left: 100px; margin-top: 34px; width: 1155px; height: 222px; /* background-color: peru; */ } .footer-right { float: right; margin-top: 34px; margin-right: 135px; width: 200px; height: 192px; /* background-color: pink; */ } .footer-right a { line-height: 27px; } .footer-left ul { list-style: none; } .footer-left li { float: left; margin-right: 126px; width: 130px; height: 230px; /* background-color: white; */ } /* 第五個(gè)列表右側(cè) margin 值為 0 */ .footer-left li:nth-child(5) { margin-right: 0; } .footer-left b { color: #eeeeee; line-height: 44px; } .footer-left ul li a { text-decoration: none; color: #cccccc; line-height: 29px; } .footer-right .buy { margin-top: 24px; width: 191px; height: 36px; background-color: #00a4ff; line-height: 35px; text-align: center; } .footer-right a { text-decoration: none; color: #cccccc; }

后期重點(diǎn)解釋下過(guò)程中出現(xiàn)的問(wèn)題及解決方案，源碼相應(yīng)位置均有注釋。初次上手，懇請(qǐng)各位大佬斧正

注：以上練習(xí)題目來(lái)自黑馬程序員，僅供學(xué)習(xí)交流使用，侵刪致歉

參考資料：

WEB 前端視頻課程

CSS HTML 小程序

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。