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

、任務(wù)介紹：

高保真的完成下圖布局：

二、分析布局

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

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

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

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

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

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

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

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

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

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

三、完成html代碼

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

（這里還是有需要的改進(jì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美化

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

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

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

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

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

其中來源盒子info中的時(shí)間和來源之間的像素是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標(biāo)簽。作為行內(nèi)元素span標(biāo)簽使用起來也很方便，作為一個小容器，可以把容器分為多個小容器，方便容器中個別部分應(yīng)用樣式，對于容器中其他部分實(shí)現(xiàn)特別的效果。其中在評論盒子中用到。如下圖。我們可以看到 0人參與 0人評論可以用p元素一行完成，但是有一個問題，“0”的字體和顏色和別的字不太一樣。我們在實(shí)現(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è)置背景圖片的時(shí)候使用雪碧圖。

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

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

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

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

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

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

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

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

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

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

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

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

六、優(yōu)化

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

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

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

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

添加鼠標(biāo)懸停效果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時(shí)，一定要寫這句：

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

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

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

TML標(biāo)簽：

所有內(nèi)容都在<html></html>標(biāo)簽之內(nèi)；
<head></head>內(nèi)放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中。
<head></head>內(nèi)的<title></title>中設(shè)置的是頁面的標(biāo)題，<title></title>只能放在<head></head>中；
<body></body>是頁面的主體，大部分顯示內(nèi)容都定義在這里。

HTML注釋：：

注釋不允許嵌套

html常用標(biāo)簽:

h標(biāo)簽（標(biāo)題），HTML定義了<h1></h1>到<h6></h6>六個h標(biāo)簽，分別表示不同大小的字體。h1最大，h6最小。
<br/>只是回車，<p>是段落。<p>前后會有比較大的空白，而<br/>則沒有。
<center>居中顯示.
<b>、<strong>粗體，<i>、<em>斜體。<u>下劃線。
<sub>2</sub>下標(biāo)，如：H<sub>2</sub>O
<sup>2</sup>上標(biāo)，如：10<sup>2</sup>
<font></font>字體標(biāo)簽，<font color=“red“ size=“7” face=“隸書”>紅色</font>。color（設(shè)置顏色） size（1-7） face（設(shè)置字體,設(shè)置字體是注意用戶計(jì)算機(jī)中必須有該字體才能正常顯示）
<hr> color size（厚度） width（長度） align=left/center/right （默認(rèn)為劇中顯示）
<pre> 預(yù)格式化保持本色;
HTML特殊字符：<（小于號，less than）；>（大于號，greater than）； （空格）。
超鏈接：<a>標(biāo)簽的一些常用屬性：href、title、target、name
插入圖片：<img src=“路徑”/>
列表：dl→(定義列表)，ul→(無序列表)， ol→(有序列表)。
表格：<table>；創(chuàng)建行：<tr>；創(chuàng)建單元格：<td>；表頁眉：<thead>；表主體：<tbody>；表頁腳：<tfoot>；表頭：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox表單標(biāo)簽：（復(fù)選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。

meta標(biāo)簽：（包括在head標(biāo)簽中。主要用來描述頁面自身信息,元信息）

<meta name="keywords" content="C#學(xué)習(xí)資料,4k8k.net,.net開發(fā),軟件開發(fā),編程自學(xué)網(wǎng)"/>
<meta name="description" content="免費(fèi)更新最新C#相關(guān)技術(shù)知識，主要包括：.net基礎(chǔ),網(wǎng)頁前端,三層架構(gòu),SQL數(shù)據(jù)庫..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網(wǎng)頁編碼
<meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網(wǎng)頁。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網(wǎng)頁。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。
<meta name="名字" content="值" />關(guān)于網(wǎng)頁的描述信息。
<meta http-equiv="名字" content="值" />模擬http響應(yīng)頭信息。

C#編程自學(xué)_做最好的.net自學(xué)資料站_更多文章請?jiān)L問：http://www.4k8k.net/

歡迎訂閱。

作為一個前端，經(jīng)常寫html文檔，但是卻很少去在意頭部的標(biāo)簽有哪些，也很少在意每個標(biāo)簽的作用，下面我們來詳細(xì)了解下。

頭部的標(biāo)簽，也就是寫在<head><head/>里。通常會有6個標(biāo)簽：　

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標(biāo)題</title>

<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">

body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head> 
<body> 文檔內(nèi)容...... </body> 
</html>

一、<title>元素。

1.title 標(biāo)簽定義了文檔的標(biāo)題，在HTML文檔中是必須的。它會展示在瀏覽器的工具欄上。

2.如果要展示一個圖標(biāo)，可以再加一個<link>標(biāo)簽，<link>標(biāo)簽的 rel屬性為“icon”,后面的

href跟上圖片的地址。

<link rel="icon" href="圖片url">

二、<base>元素。

base標(biāo)簽描述了基本的鏈接地址，該標(biāo)簽作為HTML文檔中所有的鏈接的默認(rèn)鏈接

　<head>
　　<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" /> 
  </head> 　　
  <body> 　
   　<img src="banner7.jpg"/>
  </body>

上面的img標(biāo)簽的src鏈接的地址就是base里的地址加上img里的地址。

三、<link>元素。

link標(biāo)簽定義了文檔與外部資源之間的關(guān)系，它通常用于鏈接到樣式表。

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

四、<style>元素。

style標(biāo)簽定義了HTML文檔的樣式，這個我們經(jīng)常會使用到，都不會陌生。

五、<meta>元素。

meta標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。它常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者，和其他元數(shù)據(jù)。

元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。

// 編碼格式定義
<meta charset="utf-8"> 
// 為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="頭部標(biāo)簽 & 使用">
// 定義網(wǎng)頁作者:
<meta name="author" content="Runoob">
// 每30秒鐘刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30">

// 視圖層的參數(shù)定義
<meta
name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
 //    content屬性值 :
  //    width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width
  //    height:同width
  //    intial-scale:頁面首次被顯示是可視區(qū)域的縮放級別，取值1.0則頁面按實(shí)際尺寸顯示，無任何縮放
  //   maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級別，
  //   maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實(shí)際尺寸之上。
  //   user-scalable:是否可對頁面進(jìn)行縮放，no 禁止縮放

六、<script>元素。

script標(biāo)簽用于加載腳本文件，比如說javascript,可以直接書寫js,也能用于鏈接外部的js文件。

<script>
    document.write("Hello World!")
</script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

在線咨詢

上一篇：PHP基礎(chǔ)知識講座：第2課，如何在HTML頁面中嵌入PHP代碼
下一篇：JavaScript 經(jīng)典「紅寶書」，幾代前端人的入門選擇

您的項(xiàng)目需求

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