高保真的完成下圖布局:
首先要分析一下各個模塊的布局
我們依舊使用的盒子模型。
首先先分為兩個大盒子(紅色邊框)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)化圖:
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>
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。