HTML+CSS基礎(chǔ)訓(xùn)練之實現(xiàn)一個“真實”的網(wǎng)頁

、任務(wù)介紹：

高保真的完成下圖布局：

二、分析布局

首先要分析一下各個模塊的布局

我們依舊使用的盒子模型。

首先先分為兩個大盒子（紅色邊框）header 盒子和 content 盒子。

其中content中相對對來說比較簡單，就需要添加需要的內(nèi)容文字就好啦。

header相對于基本作業(yè)要復(fù)雜一些。

在header中首先要分為兩個盒子（綠色邊框）第一個盒子head裝的是標題，下面的盒子info_box裝了三個盒子。包括信息盒子info、評論盒子comment_box評論盒子、分享盒子share_box。

評論盒子comment_box中分為 join div元素和 comment div元素

分享盒子share_box中分為sina （微博）qqzone（qq空間）wechat（微信）

大體的布局還是用div元素實現(xiàn)，其中信息盒子與評論盒子打算用p+span元素實現(xiàn)，分享盒子用div+“雪碧圖”實現(xiàn)。

標題框和內(nèi)容框的距離為40px。

三、完成html代碼

根據(jù)我們上面對各個模塊布局的分析，我們接下來就可以寫html代碼啦～其中在header的info盒子，其中信息盒子與評論盒子打算用p+span元素實現(xiàn)（語義化更好一點），分享盒子用div+“雪碧圖”實現(xiàn)。

（這里還是有需要的改進的地方，比如行前面的空格我是使用的空格鍵，應(yīng)該還有更好的方法，請大佬指教嘿嘿～）

代碼如下：

<html>

<head>
    <title>加分作業(yè)
    </title>

    <link rel="stylesheet" href="css/demo2.css">

</head>

<body>
    <div class="container">
        <div class="header">
            <p class="head">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
            <div class="info_box">
                <p class="info">
                    <span>2020年5月21日 08:38:23</span><br>
                    <span class="text">來源：</span>
                    <span class="sourse">蠟筆小新醬</span>
                    <span class="icon_1"> </span>
                </p>
                <div class="comment_box">
                    <p class="join"><span>0</span>人參與</p>
                    <p class="comment"><span>0</span>人評論</p>
                    </p>
                </div>
                <div class="share_box">
                    <div class="sina"></div>
                    <div class="qqzone"></div>
                    <div class="wechat"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <p><span>      我的名字是蠟筆小新，我今年五歲，我很快樂，我的媽媽是美牙，我的爸爸是廣治
            </span><br>我的朋友有</span><br/>      阿呆<br/>      風(fēng)間
                <br/>      正南<br/>      妮妮<br/>      小白<br/></p>

        </div>


    </div>
</body>

</html>

四、CSS美化

為了盡可能高保真，我們要測量一下各個模塊之間的距離。

標題框和內(nèi)容框的距離為40px

在整個標題盒子 header中，標題head和信息盒子info_box之間的距離30px

在信息盒子中，來源盒子info和評論盒子comment_box的距離是228px

評論盒子comment_box和分享盒子share_box之間的像素是30px

其中來源盒子info中的時間和來源之間的像素是10px

在評論盒子中的參與和評論之間的像素為20px

在分享盒子中每個圖片之間的距離為10px

css代碼如下：

* {
    margin: 0px;
    padding: 0px;
}

.container {
    width: 670px;
    height: 800px;
    margin: auto;
}

.head {
    font: bold 24px Microsoft Yahei;
    margin-top: 40px;
}

.info {
    font: 12px Microsoft Yahei;
    color: #999;
    margin: 25px 0 5px 0;
    line-height: 20px;
    width: 350px;
}

.header {
    height: 142px;
    width: 655px;
    border-bottom: 1px solid #828181;
    display: flex;
    flex-direction: column;
}

.content p {
    line-height: 40px;
    font: Microsoft Yahei;
    color: #636363;
    margin-top: 40px;
}

.content p span {
    line-height: 15px;
}

.icon_1 {
    background: url("../img/icon_1.png") no-repeat 2px center;
    padding: 19px;
}

.info_box {
    display: flex;
}

.comment_box {
    display: flex;
    color: #999;
    margin: 40px 30px 5px 0;
}

.comment_box p {
    font: Microsoft Yahei;
    font-weight: lighter;
    font-size: 12px;
}

.share_box {
    display: flex;
    font-size: 12px;
    height: 40px;
    margin: 32px 0px 5px 0;
}

.join {
    margin: 0px 20px;
}

.qqzone {
    margin-left: 10px;
}

.wechat {
    margin-left: 10px;
}

.comment_box span {
    font-family: 'Georgia';
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: red;
}

.sina {
    background-position: 0px 0px !important;
}

.qqzone {
    background-position: 0px -32px !important;
}

.wechat {
    background-position: 0 -66px !important;
}

.share_box div {
    width: 40px;
    height: 30px;
    background: url(../img/icon_3.jpg);
}

五、CSS美化分析

1.使用行內(nèi)元素span標簽。作為行內(nèi)元素span標簽使用起來也很方便，作為一個小容器，可以把容器分為多個小容器，方便容器中個別部分應(yīng)用樣式，對于容器中其他部分實現(xiàn)特別的效果。其中在評論盒子中用到。如下圖。我們可以看到 0人參與 0人評論可以用p元素一行完成，但是有一個問題，“0”的字體和顏色和別的字不太一樣。我們在實現(xiàn)的過程中可以再多寫幾個div 然后重新布局但是那樣太麻煩了，直接使用行內(nèi)元素就可以搞定。

html代碼如下：

 <p class="join"><span>0</span>人參與</p>
 <p class="comment"><span>0</span>人評論</p>

css美化：

.comment_box {
    display: flex;
    color: #999;
    margin: 40px 30px 5px 0;
}
.comment_box span {
    font-family: 'Georgia';
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: red;
}

2.在分享盒子share_box中設(shè)置背景圖片的時候使用雪碧圖。

先來說一說雪碧圖是怎么回事

首先把網(wǎng)頁中一些背景圖片整合到一張圖片文件中（png格式）

再利用CSS的"background-image"引入圖片，配合"background- repeat"禁止平鋪

最后利用css的"background-position"進行背景精確的定位出背景圖片的位置（默認起始位置為background-position:0% 0%；如果background-position屬性值之設(shè)置一個，那么另一個默認為center。

我們需要加載的圖片素材是這樣的

而我們最后要的效果是這樣的，是三張分開的圖片，但是都是上面圖片的一部分

此時我們就可以用雪碧圖啦～先設(shè)置 sina wechat qqzone 這三個盒子的大小并使這三個盒子都以這張雪碧圖為背景：

.share_box div {
    width: 40px;
    height: 30px;
    background: url(../img/icon_3.jpg);
}

后在各個div中使用background-position進行定位。就是定位到我們想要的部分。

.sina {
    background-position: 0px 0px !important;
}
.qqzone {
    background-position: 0px -32px !important;
}
.wechat {
    background-position: 0 -66px !important;
}

特別要注意一點在給div添加定位時，要寫！important提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。這樣才可以定位到不同圖片的坐標。

使用雪碧圖的優(yōu)點：如果圖片來源于網(wǎng)頁的話，就可以減少http請求的次數(shù)，提高頁面加載速度。方便修改。

六、優(yōu)化

根據(jù)我們以上的效果，我們可以進行一下優(yōu)化。比如添加背景圖片～或者添加鼠標懸停的效果。

在這里，我（突發(fā)奇想）設(shè)計了此頁面的一個深色模式（其實就是把白底黑字換成暗底白色來）還有一些鼠標懸停的效果。

添加背景圖片的css代碼如下：

.container {
    width: 670px;
    height: 500px;
    margin: auto;
    background-position: center;
    background-image: url(../img/bgimg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

添加鼠標懸停效果css代碼如下：

.sourse:hover {
    color: red;
    cursor: pointer;
    text-decoration: underline;
}
.comment_box p:hover {
    cursor: pointer;
    text-decoration: underline;
    color: red;
}
.share_box div {
    cursor: pointer;
}

七：效果展示

高保真：

優(yōu)化圖：

總結(jié)和反思：

1，添加css時，一定要寫這句：

* {
    margin: 0px;
    padding: 0px;
}

否則會頁面的內(nèi)容不會貼頂，就是總是和頁面頂部有一些距離。

2，通過這次實驗我更進一步的體會到了盒子模型的一些特點，對boder margin padding 有了更深一步的理解。可以把盒子模型想成一個裝在快遞盒子里新手機盒。新手機是我們的內(nèi)容，手機和手機盒的泡沫就是padding（內(nèi)邊框），手機盒子的紙殼就是border（邊框），最后手機盒子和快遞盒子之間的距離就是margin（外邊距）。

嘍啊，各位小伙伴們，

又到了有趣實用的隱藏功能學(xué)習(xí)時間啦~

今天在分享功能之前，我想問一下大家

是否會在日常生活中頻繁使用到「Samsung Pay」呢？

如果你的答案是Yes，那你可就來對地方啦！！

Samsung Pay是一種快捷，簡單，安全的三星手機專屬應(yīng)用，

支持著銀行卡，交通卡，二維碼，智能門卡等多種支付方式，

為用戶帶來了安全，便攜的移動支付體驗。

而這次，Samsung Pay更是與中國銀聯(lián)

攜手推出了「免輸卡號綁卡」服務(wù)，

為大家的銀行卡綁定操作步驟

提供了更加簡單方便的綁卡方式~

那么如何開啟使用免輸卡號綁卡功能呢？

首先，打開「Samsung Pay」>>「首頁」>>

「信用卡/借記卡」>>「導(dǎo)入銀行卡」，

并進行相關(guān)的實名認證，

大家就可以在里面看到各大銀行的身影啦~

之后，選擇你想授權(quán)的具體銀行，

并選擇相應(yīng)的銀行卡點擊同意激活，

最后的最后，進行一次短信驗證，

就可以輕松綁定銀行卡到Samsung Pay上啦~

是不是超方便呀~~

怎么樣？

有沒有對三星不斷豐富本地化的生態(tài)服務(wù)所心動呢？

有了免輸卡號綁卡功能之后，

不僅減少了綁定銀行卡時輸入卡號，

姓名等個人信息的繁瑣步驟，

還為大家?guī)砀颖銛y的Samsung Pay操作體驗，

真的是愛了愛了~~

*需使用帶有“銀聯(lián)”標識的卡片。

*某些銀行/機構(gòu)的部分卡片類型可能暫不支持，請聯(lián)系銀行/機構(gòu)，確認卡片是否適用。

*支持此功能的設(shè)備需將Samsung Pay升級至4.1.24及以上版本，每一型號是否支持的功能以Samsung Pay APP內(nèi)提示為準。

文章轉(zhuǎn)載三星蓋樂世社區(qū)：

https://www.samsungmembers.cn/thread-1343417-4-10.html 作者：泡泡土

#34;夏哉ke"：chaoxingit.com/5056/

前端必學(xué)：40個精選案例實戰(zhàn)，一課吃透HTML5 + CSS3 + JavaScript

引言

前端開發(fā)是現(xiàn)代Web應(yīng)用開發(fā)的重要組成部分，掌握HTML5、CSS3和JavaScript是入門前端開發(fā)的基礎(chǔ)。本文將介紹40個精選的實戰(zhàn)案例，幫助你系統(tǒng)學(xué)習(xí)和應(yīng)用這些技術(shù)。通過這些案例，你將深入理解各種前端技術(shù)的應(yīng)用場景和實際操作，為成為優(yōu)秀的前端開發(fā)人員打下堅實的基礎(chǔ)。

HTML5 實戰(zhàn)案例

基本結(jié)構(gòu)和語義化標簽：構(gòu)建一個簡單的靜態(tài)網(wǎng)頁，使用<header>、<nav>、<section>、<footer>等HTML5標簽。
表單驗證：利用HTML5表單驗證屬性如required、pattern等，實現(xiàn)一個注冊表單。
視頻播放器：使用<video>標簽嵌入視頻，并添加播放、暫停、全屏等控制功能。
Canvas繪圖：通過Canvas API繪制簡單的圖形，如矩形、圓形等，實現(xiàn)動態(tài)效果。
本地存儲：使用localStorage或sessionStorage實現(xiàn)一個簡單的記事本功能，保存用戶輸入的數(shù)據(jù)。

CSS3 實戰(zhàn)案例

響應(yīng)式布局：利用CSS3媒體查詢和彈性布局（Flexbox）實現(xiàn)一個響應(yīng)式網(wǎng)頁，適應(yīng)不同設(shè)備的屏幕尺寸。
動畫效果：使用CSS3動畫和過渡效果，如淡入淡出、旋轉(zhuǎn)、縮放等，增強用戶體驗。
陰影和圓角：應(yīng)用CSS3的box-shadow和border-radius屬性，美化按鈕或圖片的外觀。
多列布局：使用CSS3多列布局（column-count和column-gap）創(chuàng)建類似報紙的多列文本布局。
自定義字體：通過@font-face引入自定義字體文件（如WOFF或WOFF2），使網(wǎng)頁字體更具個性化。

JavaScript 實戰(zhàn)案例

DOM操作：使用JavaScript操作DOM元素，動態(tài)改變頁面內(nèi)容或樣式。
事件處理：綁定常見的DOM事件（點擊、鼠標移入移出等），實現(xiàn)交互效果。
輪播圖：利用JavaScript編寫一個簡單的輪播圖組件，支持自動播放和手動切換。
數(shù)據(jù)請求與展示：使用Fetch API或XMLHttpRequest獲取遠程數(shù)據(jù)，并在頁面中展示。
表單處理：通過JavaScript驗證表單數(shù)據(jù)，實現(xiàn)更復(fù)雜的表單交互，如動態(tài)添加表單項或條件判斷。

綜合實戰(zhàn)案例

網(wǎng)頁時鐘：利用HTML5的Canvas繪制時鐘表盤，JavaScript實現(xiàn)實時更新時鐘指針位置。
天氣預(yù)報小工具：通過API獲取天氣數(shù)據(jù)，使用CSS3設(shè)計氣泡式樣式，JavaScript展示天氣信息。
Todo List：實現(xiàn)一個簡單的任務(wù)清單應(yīng)用，支持任務(wù)增刪改查操作，數(shù)據(jù)使用localStorage保存。
在線畫板：結(jié)合Canvas和事件處理，實現(xiàn)一個支持繪圖、橡皮擦和顏色選擇的在線畫板。
響應(yīng)式導(dǎo)航欄：使用Flexbox和媒體查詢創(chuàng)建一個適應(yīng)不同屏幕尺寸的導(dǎo)航菜單。

高級實戰(zhàn)案例

網(wǎng)頁拖放：利用HTML5的Drag and Drop API實現(xiàn)拖放功能，如圖片上傳或元素排序。
地圖交互：集成第三方地圖API（如Google Maps API），實現(xiàn)地圖標記、路線規(guī)劃等功能。
WebSocket通訊：使用WebSocket API實現(xiàn)實時聊天應(yīng)用，實現(xiàn)客戶端和服務(wù)器之間的雙向通信。
音頻可視化：利用Web Audio API獲取音頻數(shù)據(jù)，通過Canvas實時繪制音頻頻譜圖。
Web動態(tài)效果：結(jié)合CSS3動畫和JavaScript，實現(xiàn)頁面滾動時元素的動態(tài)加載和特效展示。

進階實戰(zhàn)案例

響應(yīng)式圖片展示：使用srcset和sizes屬性優(yōu)化圖片加載，根據(jù)設(shè)備像素比和屏幕大小自動選擇最優(yōu)圖片。
WebGL 3D場景：利用Three.js等WebGL庫創(chuàng)建一個簡單的3D場景，如旋轉(zhuǎn)的立方體或球體。
數(shù)據(jù)可視化：使用D3.js或Chart.js等庫，實現(xiàn)數(shù)據(jù)的圖表展示和動態(tài)更新。
移動端交互：開發(fā)一個基于觸摸事件的移動端應(yīng)用，如滑動菜單、手勢識別等。
單頁應(yīng)用（SPA）：使用React、Angular或Vue.js等前端框架，開發(fā)一個簡單的單頁應(yīng)用，實現(xiàn)路由控制和組件化開發(fā)。

實用工具和技巧

代碼優(yōu)化和壓縮：使用工具如Webpack或Parcel進行前端代碼的優(yōu)化、壓縮和打包。
跨瀏覽器兼容性：利用Autoprefixer等工具自動處理CSS前綴，確保在各大瀏覽器中的兼容性。
性能優(yōu)化：使用Chrome DevTools等工具進行性能分析，優(yōu)化頁面加載速度和響應(yīng)時間。
前端安全：實施前端安全措施，如跨站腳本（XSS）攻擊防護、數(shù)據(jù)加密等。
版本控制：使用Git進行代碼版本控制，結(jié)合GitHub或GitLab進行團隊協(xié)作和代碼托管。

結(jié)語

通過上述40個實戰(zhàn)案例，你可以全面掌握HTML5、CSS3和JavaScript的核心技術(shù)和應(yīng)用場景。在學(xué)習(xí)過程中，建議結(jié)合實際項目或練習(xí)，不斷深化理解和提升實踐能力。前端開發(fā)是一個快速發(fā)展的領(lǐng)域，持續(xù)學(xué)習(xí)和探索新技術(shù)將幫助你成為一名優(yōu)秀的前端工程師。

在線咨詢

上一篇：vue 做大文件切片上傳
下一篇：Mark，國外免費下載PPT模板網(wǎng)站，國內(nèi)少有人知道

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商