網頁佈局準則

時間 2021-02-19

標籤 php css html 前端 chrome json 瀏覽器服務器前端工程師 svg 欄目 HTML 简体版

原文原文鏈接

1、網頁佈局思路

　　　　經過盒子模型，知道大部分html標籤是一個盒子；php

　　　　經過css浮動，定位，可讓每一個盒子排列成網頁；css

　　　　一個完整的網頁是由標準流、浮動、定位一塊兒完成佈局的，每一個都有本身專門的用法；html

　一、網頁佈局準則

　　　　　　多個塊級元素縱向排列找標準流；前端

　　　　　　多個塊級元素橫向排列找浮動；chrome

　　　　　　爲了約束浮動元素的位置，網頁佈局通常採用：json

　　　　　　　　一、先用標準流的父元素上下排列，以後內部子元素採用浮動左右排列；瀏覽器

　　　　　　　　二、一個盒子浮動了，他的兄弟元素也浮動；服務器

　　　　　　　　三、浮動的盒子只會影響浮動盒子後面的標準流，不影響前面的；前端工程師

　　　　1). 標準流

　　　　　　可讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流佈局；svg

　　　　2). 浮動

　　　　　　可讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動佈局；

　　　　3). 定位

　　　　　　定位最大的特色是有層疊的概念，就是可讓多個盒子先後疊壓來顯示。可是每一個盒子須要測量數值。若是元素自由在某個盒子內移動就用定位佈局；

　二、層級

　　　　　　經過z-index屬性能夠用來設置元素的層級，表示盒子擺放的先後次序；

- - 層級越高，越優先顯示；
  - 只有元素開啓了定位，z-index屬性纔可使用；
  - 若是定位元素層級同樣，則結構上下面元素會蓋住上面；
  - 父元素的層級再高，也不會蓋住子元素；

　三、佈局流程

　　　　　　爲了提升網頁製做的效率，佈局時一般有如下的總體思路：

- - 必須肯定頁面的版心（可視區），測量可知；
  - 分析頁面中的行模塊，以及每一個行模塊中的列模塊，頁面佈局的第一準則；
  - 一行中的列模塊常常浮動佈局，先肯定每一個列的大小，以後肯定列的位置，頁面佈局第二準則；
  - 製做HTML結構。咱們仍是遵循，先有結構，後有樣式的原則。結構永遠最重要，因此，先理清佈局結構，在寫代碼尤其重要，須要積累；
  - 而後開始運用盒子模型的原理，經過DIV+CSS佈局來控制網頁的各個模塊。

　　　　　　注意：去掉列表默認的樣式

　　　　　　無序和有序列表前面默認的列表樣式，在不一樣瀏覽器顯示效果不同，並且也比較難看，因此，咱們通常上來就直接去掉這些列表樣式就好了。代碼以下

li { list-style: none; }

　　四、常見佈局技巧

　　　　　　巧妙利用一個技術更快更好的佈局：

　　　　　　　　一、margin負值的運用

　　　　　　　　二、文字圍繞浮動元素

　　　　　　　　三、行內塊的巧妙運用

　　　　　　　　四、CSS三角強化

　　　　　　　　　　1.讓每一個盒子margin 往左側移動 -1px 正好壓住相鄰盒子邊框

　　　　　　　　　　2.鼠標通過某個盒子的時候，提升當前盒子的層級便可（若是沒有有定位，則加相對定位（保留位置），若是有定位，則加z-index）

<style>
    ul li {
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        margin-left: -1px;
}
    ul li:hover {
        position: relative;
        border: 1px solid blue;
        /* 若是li有定位，則利用z-index提升層級 */
        z-index: 1;
}
</style>

　　　　　　　　案例：盒子居中

<style>
    * {
        margin: 0;
        padding: 0;
        }
     .box {
         width: 300px;
         height: 70px;
         background-color: pink;
         margin: 0 auto;
         padding: 5px;
        }
     .pic {
         float: left;
         width: 120px;
         height: 60px;
         margin-right: 5px;
        }
     .pic img {
         width: 100%
        }
</style>

<body>
    <div class="box">
        <div class="pic">
            <img src="" alt="">
        </div>
    </div>
</style>

2、CSS屬性書寫順序

　　　　一、佈局定位屬性：display /position /float /clear /visibility /overflow

　　　　二、自身屬性：width /height /margin /padding /border /background

　　　　三、文本屬性：color /font /text-decoration /text-align /vertical-align /white-space /break-word

　　　　四、其餘屬性（CSS3）：content cursor /border-radius /box-shawdow /text-shadow /

background：linear-gradient...

.jdc {
    display: block;
    position: relative;
    float: left;
    
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    
    font-family: Arial,"Helvetica Neue",Helvetica,san-serif;
    color: #333;
    
    background: rgba(0,0,0,.5);
    border-radius: 10px;
}

3、CSS高級技巧

　3.一、精靈圖

　　　　一、由來：

　　　　　　一個網頁中每每會應用不少小的背景圖像做爲修飾，當頁面中的圖像過多時，服務器就會頻繁地接收和發送請求圖片，形成服務器請求壓力過大，這將大大的下降頁面的加載速度；

　　　　二、目的：爲了有效的減小服務器接收和發送請求的次數，提升頁面的加載速度，提升了訪問效率和用戶體驗，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧圖）

　　　　三、核心原理：將網頁中的一些小背景圖像整合到一張大圖中，這樣服務器就只須要請求一次就能夠了；

　　　　四、使用精靈圖核心：

　　　　　　（1）精靈技術主要針對於背景圖片，就是把多個小背景圖片整合到一張大圖片中，這個大圖片也稱爲 sprites 精靈圖或者雪碧圖；

　　　　　　（2）移動背景圖片位置，主要藉助於背景位置來實現---background-position ；移動的距離就是這個目標圖片的 x 和 y 座標，注意網頁中的座標有所不一樣；

　　　　　　（3）通常狀況下精靈圖都是負值。（千萬注意網頁中的座標： x軸右邊走是正值，左邊走是負值， y軸往下是正值，同理。）

　　　　五、優勢：

- - 將多個圖片整合爲一個，瀏覽器只發送一次請求，就能夠同時加載多個圖片；提升了訪問效率和用戶體驗；
  - 減少了圖片的總大小，提升請求的速度，增長了用戶體驗；

　　　　六、缺點：

- - 圖片文件仍是比較大的。
  - 圖片自己放大和縮小會失真。
  - 一旦圖片製做完畢想要更換很是複雜。

　　　　　　　　此時，有一種技術的出現很好的解決了以上問題，就是字體圖標 iconfont。

　3.二、字體圖標

　　　　一、特色：字體圖標能夠爲前端工程師提供一種方便高效的圖標使用方式，展現的是圖標，本質屬於字體。

- - 輕量級：一個字體圖標要比一系列的圖像都小，一但字體加載了，圖標就會立刻渲染出來，減小服務器請求；
  - 靈活性：本質是文字，能夠隨意改變顏色，產生陰影，透明效果，旋轉燈；
  - 兼容性：幾乎支持全部的瀏覽器；

　　　　　　注意：字體圖標不能代替精靈技術，只是對工做中圖標部分技術的提高和優化；

　　　　二、使用場景：主要用於顯示網頁中通用、經常使用的一些小圖標。

- - 結構和樣式比較簡單的小圖標，就用字體圖標；
  - 結構和樣式複雜的小圖片，就用精靈圖；

　　　　三、字體圖標的下載：

　　　　　　（1） icomoon 字庫 http://icomoon.io 國外服務器，打開網速較慢。

　　　　　　（2）阿里 iconfont 字庫 http://www.iconfont.cn/ 包含了淘寶圖標庫和阿里媽媽圖標庫。可使用 AI 製做圖標上傳生成。重點是，免費

　　　　　　（3）awesome圖標

　　　　四、字體圖標的引入：

　　　　　　（1）icomoon文件解壓後，將fonts文件夾複製到頁面根目錄下；

　　　　　　（2）在 CSS 樣式中全局聲明字體：把這些字體文件經過css（style.css）引入到咱們頁面中。（注意字體文件路徑的問題）

@font-face { 
    
    font-family: 'icomoon'; 
    src: url('fonts/icomoon.eot?7kkyc2'); 
    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), 
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'), 
    url('fonts/icomoon.woff?7kkyc2') format('woff'), 
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

}

　　　　　（3）html標籤內添加小圖標

span {
    content:'';
    font-family:"icomoon";/* 這裏面的字體需和 @font-face 裏面的一致 */
}

　　原來的文件夾不要刪，能夠追加字體圖標，在select.json裏，直接生成最新的字體圖標；

4、CSS 初始化

　　　　京東初始化，從 * ｛margin:0;padding:0｝開始；

　　　　不一樣瀏覽器對有些標籤的默認值是不一樣的，爲了消除不一樣瀏覽器對HTML文本呈現的差別，照顧瀏覽器的兼容；

　　　　簡單理解： CSS初始化是指重設瀏覽器的樣式。 (也稱爲CSS reset）

　　　　好比：

　　　　　　黑體 \9ED1\4F53

　　　　　　宋體 \5B8B\4F53

　　　　　　微軟雅黑 \5FAE\8F6F\96C5\9ED1

5、品優購項目規劃

　　　　假如須要設計一款網頁，工做流程以下：

　　　　用戶提需求——美工PS設置原型圖和效果圖——前端利用代碼連接作成靜態網頁（代碼連接）——後臺工程師改成動態網頁（JSP動態服務器代碼）；

　　　　流程

- - 品優購項目總體介紹（製做首頁、列表頁、註冊頁三個頁面）電商類網站
  - 品優購項目學習目的（裏面包含技術較多，能極大鍛鍊咱們佈局技術）
  - 開發工具以及技術棧（切圖用ps，代碼用Vscode，測試用chrome，大量使用HTML5+CSS3）

　　一、品優購項目搭建工做

　　　　一、須要建立以下文件夾：

名稱	說明
項目文件夾	shoping
樣式類圖片文件夾，不常常更換	images
樣式文件夾	css
產品類圖片文件夾，常常更換	upload
字體類文件夾	fonts
腳本文件夾	js

名稱	說明
首頁	index.html
css初始化樣式文件	base.css
css公共樣式文件	common.css

　　　　有些網站初始化的不太提倡 * { margin: 0; padding: 0; }　　

　　　　好比新浪：

　　　　　　　　html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

　　二、模塊化開發

　　　　所謂的模塊化：將一個項目按照功能劃分，一個功能一個模塊，互不影響且重複使用；

　　　　代碼也如此，有些樣式和結構在不少頁面都會出現，好比頁面頭部和底部，大部分頁面都有。此時，能夠把這些結構和樣式單獨做爲一個模塊，而後重複使用;

　　　　這裏最典型的應用就是 common.css 公共樣式。寫好一個樣式，其他的頁面用到這些相同的樣式;

　　　　common.css 公共樣式裏面包含版心寬度、清除浮動、頁面文字顏色等公共樣式。

　　三、網站 favicon 圖標

　　　　favicon.ico 通常用於做爲縮略的網站標誌，它顯示在瀏覽器的地址欄或者標籤上。目前主要的瀏覽器都支持 favicon.ico 圖標。

- - 製做favicon圖標
  - favicon圖標放到網站根目錄下
  - HTML頁面引入favicon圖標

　　　　　　一、製做favicon圖標

　　　　　　　　（1）把品優購圖標切成 png 圖片。

　　　　　　　　（2）把 png 圖片轉換爲 ico 圖標，這須要藉助於第三方轉換網站，例如比特蟲：http://www.bitbug.net/

　　　　　　二、favicon圖標放到網站根目錄下

　　　　　　三、 HTML頁面引入favicon圖標

　　　　　　　　（1）在html 頁面裏面的 <head> </head>元素之間引入代碼。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

　　四、網站 TDK 三大標籤SEO優化

　　　　SEO（Search Engine Optimization）漢譯爲搜索引擎優化，是一種利用搜索引擎的規則提升網站在有關搜索引擎內天然排名的方式。

　　　　SEO 的目的是對網站進行深度的優化，從而幫助網站獲取免費的流量，進而在搜索引擎上提高網站的排名，提高網站的知名度。頁面必須有三個標籤用來符合 SEO 優化。

　　　　有SEO專門人員，標籤由咱們寫；

　　　　網站TDK三大標籤SEO優化

　　　　一、title 網站標題

　　　　　　title 具備不可替代性，是咱們內頁的第一個重要標籤，是搜索引擎瞭解網頁的入口和對網頁主題歸屬的最佳判斷點。

　　　　　　建議：網站名（產品名）- 網站的介紹（儘可能不要超過30個漢字）

　　　　　　例如：

　　　　　　　　l 京東(JD.COM)-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物！

　　　　　　　　l 小米商城 - 小米5s、紅米Note 四、小米MIX、小米筆記本官方網站

　　　　二、description 網站說明

　　　　　　簡要說明咱們網站主要是作什麼的。

　　　　　　咱們提倡，description 做爲網站的整體業務和主題歸納，多采用「咱們是…」、「咱們提供…」、「×××網做爲…」、「電話：010…」之類語句。

　　　　　　例如：

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、 家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物 體驗!" />

　　　　三、keywords 關鍵字

　　　　　　keywords 是頁面關鍵詞，是搜索引擎的關注點之一。

　　　　　　keywords 最好限制爲 6～8 個關鍵詞，關鍵詞之間用英文逗號隔開，採用關鍵詞1,關鍵詞2 的形式。

　　　　　　例如：

<meta name= " keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配 件,手錶,存儲卡,京東" />

　　　　　　對於咱們前端人員來講，咱們只須要準備好這三個標籤，具體裏面的內容，有專門的 SEO 人員準備

　　　　　　網站的首頁通常都是使用 index 命名，好比 index.html 或者 index.php 。

　　　　　　咱們開始製做首頁的頭部和底部的時候，根據模塊化開發，樣式要寫到common.css裏面。

　　　　四、LOGO SEO 優化

　　　　　　一、 logo 裏面首先放一個 h1 標籤，目的是爲了提權，告訴搜索引擎，這個地方很重要。

　　　　　　二、 h1 裏面再放一個連接，能夠返回首頁的，把 logo 的背景圖片給連接便可。

　　　　　　三、爲了搜索引擎收錄咱們，咱們連接裏面要放文字（網站名稱），可是文字不要顯示出來。

　　　　　　　　l 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，而後 overflow:hidden ，淘寶的作法。

　　　　　　　　l 方法2：直接給 font-size: 0; 就看不到文字了，京東的作法。

　　　　　　四、最後給連接一個 title 屬性，這樣鼠標放到 logo 上就能夠看到提示文字了

　　五、footer 底部製做

　　　　l footer 頁面底部盒子通欄給一個高度和灰色的背景

　　　　l footer 裏面有一個大的版心

　　　　l 版內心麪包含 1 號盒子，mod_service 是服務模塊，mod 是模塊的意思

　　　　l 版內心麪包含 2 號盒子，mod_help 是幫助模塊

　　　　l 版內心麪包含 3 號盒子，mod_copyright 是版權模塊

　　六、main 主體模塊製做

　　　　之前書寫的就是模塊化中的公共部分。

　　　　main 主體模塊是 index 裏面專有的，注意須要新的樣式文件 index.css 。

　　　　l main 盒子寬度爲 980 像素，位置距離左邊 220px (margin-left ) ，給高度就不用清除浮動

　　　　l main 裏面包含左側盒子，左浮動，focus 焦點圖模塊

　　　　l main 裏面包含右側盒子，右浮動，newsflash 新聞快報模塊

　　七、推薦模塊製做

　　　　l 大盒子 recom 推薦模塊 recommend

　　　　l 裏面包含 2 個盒子，浮動便可

　　　　l 1 號盒子 recom_hd

　　　　l 2 號盒子 recom_bd ，注意裏面的小豎線

　　八、樓層區 floor 製做

　　　　注意這個 floor ，不要給高度，內容有多少，算多少

　　　　第一樓是家用電器模塊：裏面包含兩個盒子

　　　　l 1 號盒子 box_hd，給一個高度，有個下邊框，裏面分爲左右 2 個盒子

　　　　l 2 號盒子 box_bd，不要給高度

　　　　　　① box_hd 模塊

　　　　　　l 有高度能夠不用清除浮動

　　　　　　l 左邊 h3 ，盒子左浮動

　　　　　　l 右邊 tab_list ，右浮動，由於用到 tab 切換效果，因此裏面要用 ul 和 li 來作

　　　　　　② box_bd 模塊

　　　　　　l 根據 tab 切換的原理， tab_content 裏面包含內容部分。這個內容能夠經過ul佈局

　　　　　　l 分爲 5 個大列，列的寬度不一致

　　九、品優購列表頁製做

　　　　（1）品優購列表頁製做準備工做

　　　　　　\1. 列表頁面是新的頁面，咱們須要新建頁面文件 list.html 。

　　　　　　\2. 由於列表頁的*頭部*和*底部*基本一致，因此咱們須要把首頁中的頭部和底部的結構複製過來。

　　　　　　\3. 頭部和底部的樣式也須要，所以 list.html 中還須要引入 common.css 。

　　　　　　\4. 須要新的 list.css 樣式文件，這是列表頁專門的樣式文件。

　　　　（2）列表頁 header 和 nav 修改

　　　　　　l 秒殺盒子 sk（ second kill ）定位便可

　　　　　　l 1 號盒子左側浮動 sk_list 裏面包含 ul 和 li

　　　　　　l 2 號盒子左側浮動 sk_con 裏面包含 ul 和 li

　　　　（3）列表頁主體 sk _container

　　　　　　l 1 號盒子 sk _container 給寬度 1200，不要給高度

　　　　　　l 2 號盒子 sk_hd ，插入圖片便可

　　　　　　l 3 號盒子 sk_bd ，裏面包含不少的 ul 和 li

　　十、品優購註冊頁製做

　　　　（1）註冊頁類名命名

　　　　　　　註冊頁面： register.html

　　　　　　　注意：註冊頁面比較隱私，爲了保護用戶信息，咱們不須要對當前頁面作SEO優化。

　　　　（2）註冊頁佈局

　　　　（3）registerarea 佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。