整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
高保真的完成下圖布局：
首先要分析一下各個模塊的布局
我們依舊使用的盒子模型。
首先先分為兩個大盒子（紅色邊框）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（外邊距）。
SS 可以添加背景顏色和背景圖片，以及來進行圖片設置。
背景圖片(image)
語法：
background-image : none | url (url)
參數：
none : 無背景圖（默認的）
url : 使用絕對或相對地址指定背景圖像
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
小技巧： 我們提倡 背景圖片后面的地址，url不要加引號。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數：
repeat : 背景圖像在縱向和橫向上平鋪（默認的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
背景位置(position)
語法：
background-position : length || length ? background-position : position || position
參數：
length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位
position : top | center | bottom | left | center | right
說明：
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。
如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。
注意：
實際工作用的最多的，就是背景圖片居中對齊了。
背景附著
語法：
background-attachment : scroll | fixed
參數：
scroll : 背景圖像是隨對象內容滾動
fixed : 背景圖像固定
說明：
設置或檢索背景圖像是隨對象內容滾動還是固定的。
背景簡寫
background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最后一個參數是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內容不收影響。
導航欄案例
使用技巧：在一行內的盒子內，我們設定行高等于盒子的高度，就可以使文字垂直居中。
望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
【技術等級】初級
【承接文章】《在CSS中使用background屬性，調整頁面和塊背景，系統講解背景屬性》
本文承接上一篇文章中所講到的background屬性，通過幾個簡單實用的小例子，學些背景效果的各種實現方式。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。
所承接的上一篇文章中，主要介紹了下列背景屬性：
background-color
background-image
background-repeat
background-position
background-attachment
本文在上一篇文章的基礎上，復習和鞏固這五個屬性的具體用法。
首先制作一張水印效果的圖片。該圖片的內容透明度較低，圖片較小。本例中制作了一個寬度為290像素，高度為205像素的圖片。該圖片的文件名為back01.jpg。圖片內容為兩行文本，顏色為黑色，同時調整了兩行文本的不透明度。圖片效果如下所示，大家也可以根據自己喜好利用Photoshop隨意制作。
例1素材圖片 back01.jpg
為頁面添加如下代碼在<head></head>標記對中：
<style type="text/css">
body{background-image:url("back01.jpg");}
</style>
由于圖片本身的尺寸遠遠小于整個頁面的大小，所以在默認情況下，該圖片會在頁面中平鋪以產生下列背景效果。
例1最終效果圖
首先制作一張花邊圖片。該圖片包含一個花邊圖樣，圖片較小。本例中制作了一個寬度為172像素，高度為36像素的圖片。該圖片的文件名為back02.jpg。圖片效果為：
例2 素材圖 back02.jpg
為頁面添加如下代碼在<head></head>標記對中：
<style type="text/css">
body{
background-image:url("back02.jpg");
background-repeat:repeat-x;
}
</style>
由于圖片本身的尺寸遠遠小于整個頁面的大小，同時又設置為水平方向平鋪，所以該圖片會在頁面中產生下列背景效果。
例2最終效果圖
首先制作一張漸變圖片。該圖片包含自上而下的藍白漸變。本例中制作了一個寬度為1像素，高度為200像素的圖片。該圖片的文件名為back03.jpg。圖片效果為：
例3 素材圖片 back03.jpg
為頁面添加如下代碼在<head></head>標記對中：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
}
</style>
由于圖片的寬度遠遠小于整個頁面的寬度，同時又設置了水平方向平鋪，所以該圖片該圖片會在頁面中產生下列背景效果。
同時，由于頁面本身的顏色默認為白色，因此，該漸變色下方的白色與頁面背景顏色融合。因此，當頁面過長產生垂直滾動條后，不會影響背景顏色的自然過渡。
那么，若需要給頁面背景添加自上而下的白藍漸變，應該如何設置呢？漸變色下方的藍色與頁面背景無法融合，會產生明顯的藍白邊界。該問題的解決方法是將頁面的背景顏色由默認的白色調整為漸變色下方的顏色即可。代碼如下：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
background-color:# 8181fc; //漸變色下方的藍色
}
</style>
首先制作一張可以居中放置的圖片。本例中制作了一個寬度為500像素，高度為500像素的圖片。該圖片的文件名為back04.jpg。圖片效果為：
例4 素材圖片 back04.jpg
實現該效果的代碼如下所示。
<style type="text/css">
body{
background-image:url("back04.jpg"); //加載圖片
background-repeat:no-repeat; //設置不平鋪
background-position:center center; //位置在頁面中心
background-attachment:fixed; //頁面滾動時圖片固定
}
</style>
下一篇文章中，小海老師會帶領大家學習CSS中功能強大的圖片精靈技術（CSS Sprite）。對于渴望在前端開發道路上前進的你一定不能錯過！
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
