整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          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)簽:

          1. 所有內(nèi)容都在<html></html>標(biāo)簽之內(nèi);

          2. <head></head>內(nèi)放的是頭部信息,是對頁面的描述,不會直接顯示在頁面中。

          3. <head></head>內(nèi)的<title></title>中設(shè)置的是頁面的標(biāo)題,<title></title>只能放在<head></head>中;

          4. <body></body>是頁面的主體,大部分顯示內(nèi)容都定義在這里。

        1. HTML注釋:<!-- -->:

          1. 注釋不允許嵌套

        2. html常用標(biāo)簽:

          1. h標(biāo)簽(標(biāo)題),HTML定義了<h1></h1>到<h6></h6>六個h標(biāo)簽,分別表示不同大小的字體。h1最大,h6最小。

          2. <br/>只是回車,<p>是段落。<p>前后會有比較大的空白,而<br/>則沒有。

          3. <center>居中顯示.

          4. <b>、<strong>粗體,<i>、<em>斜體。<u>下劃線。

          5. <sub>2</sub>下標(biāo),如:H<sub>2</sub>O

          6. <sup>2</sup>上標(biāo),如:10<sup>2</sup>

          7. <font></font>字體標(biāo)簽,<font color=“red“ size=“7” face=“隸書”>紅色</font>。color(設(shè)置顏色) size(1-7) face(設(shè)置字體,設(shè)置字體是注意用戶計(jì)算機(jī)中必須有該字體才能正常顯示)

          8. <hr> color size(厚度) width(長度) align=left/center/right (默認(rèn)為劇中顯示)

          9. <pre> 預(yù)格式化 保持本色;

          10. HTML特殊字符:&lt;(小于號,less than);&gt;(大于號,greater than);&nbsp;(空格)。

          11. 超鏈接:<a>標(biāo)簽的一些常用屬性:href、title、target、name

          12. 插入圖片:<img src=“路徑”/>

          13. 列表:dl→(定義列表),ul→(無序列表), ol→(有序列表)。

          14. 表格:<table>;創(chuàng)建行:<tr>;創(chuàng)建單元格:<td>;表頁眉:<thead>;表主體:<tbody>;表頁腳:<tfoot>;表頭:<th>。

          15. rowspan(合并行)、colspan(合并列)

          16. <input>是主要的表單元素,type的可選值:submit(提交按鈕)、button(普通按鈕)、checkbox表單標(biāo)簽:(復(fù)選框)、file(文件選擇框)、hidden(隱藏字段)、image(圖片按鈕)、password(密碼框)、radio(單選按鈕)、reset(重置按鈕)、text(文本框)。

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

          1. <meta name="keywords" content="C#學(xué)習(xí)資料,4k8k.net,.net開發(fā),軟件開發(fā),編程自學(xué)網(wǎng)"/>

          2. <meta name="description" content="免費(fèi)更新最新C#相關(guān)技術(shù)知識,主要包括:.net基礎(chǔ),網(wǎng)頁前端,三層架構(gòu),SQL數(shù)據(jù)庫..."/>

          3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網(wǎng)頁編碼

          4. <meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網(wǎng)頁。

          5. <meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網(wǎng)頁。

          6. <meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。

          7. <meta name="名字" content="值" />關(guān)于網(wǎng)頁的描述信息。

          8. <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>

          主站蜘蛛池模板: 亚洲乱码一区二区三区国产精品| 亚洲a∨无码一区二区| 精品一区二区三区高清免费观看| 精品国产福利在线观看一区| 亚洲成AV人片一区二区密柚| 无码精品人妻一区二区三区免费看| 精品性影院一区二区三区内射| 天天躁日日躁狠狠躁一区| 中文字幕VA一区二区三区 | 精品一区二区三区水蜜桃| 亚洲乱码一区二区三区在线观看| 亚洲爆乳精品无码一区二区| 国产福利电影一区二区三区,亚洲国模精品一区 | 久久一本一区二区三区| 欧美一区内射最近更新| 精品欧洲av无码一区二区| 日韩人妻无码一区二区三区久久99| 精品国产一区二区三区香蕉事| 亚洲bt加勒比一区二区| 无码人妻少妇色欲AV一区二区| 国产综合一区二区在线观看| 日韩精品一区二区三区国语自制 | 久久91精品国产一区二区| 无码国产精成人午夜视频一区二区 | 色国产精品一区在线观看| 久久99国产精一区二区三区| 久久精品无码一区二区日韩AV| 日本一区二区在线不卡| 亚洲一区二区高清| 亚洲夜夜欢A∨一区二区三区| 国产一区二区三区在线影院| 精品少妇一区二区三区视频 | 美女视频一区二区| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 四虎在线观看一区二区| 欧洲精品一区二区三区在线观看| 国产一区二区三区免费看| 国产精品日本一区二区不卡视频| 蜜臀AV在线播放一区二区三区| 无码精品一区二区三区免费视频| 在线精品视频一区二区|