HTML+CSS基礎訓練之實現一個“真實”的網頁

、任務介紹：

高保真的完成下圖布局：

二、分析布局

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

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

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

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

header相對于基本作業要復雜一些。

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

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

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

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

標題框和內容框的距離為40px。

三、完成html代碼

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

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

代碼如下：

<html>

<head>
    <title>加分作業
    </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/>      風間
                <br/>      正南<br/>      妮妮<br/>      小白<br/></p>

        </div>


    </div>
</body>

</html>

四、CSS美化

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

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

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中設置背景圖片的時候使用雪碧圖。

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

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

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

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

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

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

此時我們就可以用雪碧圖啦～先設置 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提升指定樣式規則的應用優先權。這樣才可以定位到不同圖片的坐標。

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

六、優化

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

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

添加背景圖片的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;
}

七：效果展示

高保真：

優化圖：

總結和反思：

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

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

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

2，通過這次實驗我更進一步的體會到了盒子模型的一些特點，對boder margin padding 有了更深一步的理解?？梢园押凶幽Ｐ拖氤梢粋€裝在快遞盒子里新手機盒。新手機是我們的內容，手機和手機盒的泡沫就是padding（內邊框），手機盒子的紙殼就是border（邊框），最后手機盒子和快遞盒子之間的距離就是margin（外邊距）。

TML標簽：

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

HTML注釋：：

注釋不允許嵌套

html常用標簽:

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

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

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

C#編程自學_做最好的.net自學資料站_更多文章請訪問：http://www.4k8k.net/

歡迎訂閱。

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</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> 文檔內容...... </body> 
</html>

一、<title>元素。

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

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

href跟上圖片的地址。

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

二、<base>元素。

base標簽描述了基本的鏈接地址，該標簽作為HTML文檔中所有的鏈接的默認鏈接

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

上面的img標簽的src鏈接的地址就是base里的地址加上img里的地址。

三、<link>元素。

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

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

四、<style>元素。

style標簽定義了HTML文檔的樣式，這個我們經常會使用到，都不會陌生。

五、<meta>元素。

meta標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。它常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。

元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。

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

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

六、<script>元素。

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

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

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。