一、網頁布局思路

　　　　通過盒子模型，知道大部分html標簽是一個盒子；

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

　　　　一個完整的網頁是由標準流、浮動、定位一起完成布局的，每個都有自己專門的用法；

　1、網頁布局準則

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

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

　　　　　　為了約束浮動元素的位置，網頁布局一般采用：

　　　　　　　　1、先用標準流的父元素上下排列，之后內部子元素采用浮動左右排列；

　　　　　　　　2、一個盒子浮動了，他的兄弟元素也浮動；

　　　　　　　　3、浮動的盒子只會影響浮動盒子后面的標準流，不影響前面的；

　　　　1). 標準流

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

　　　　2). 浮動

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

　　　　3). 定位

　　　　　　定位最大的特點是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示，但是每個盒子需要測量數值，如果元素自由在某個盒子內移動就用定位布局；

　2、層級

　　　　　　通過z-index屬性可以用來設定元素的層級，表示盒子擺放的前后次序；

- - 層級越高，越優先顯示；
  - 只有元素開啟了定位，z-index屬性才可以使用；
  - 如果定位元素層級一樣，則結構上下面元素會蓋住上面；
  - 父元素的層級再高，也不會蓋住子元素；

　3、布局流程

　　　　　　為了提高網頁制作的效率，布局時通常有以下的整體思路：

- - 必須確定頁面的版心（可視區），測量可知；
  - 分析頁面中的行模塊，以及每個行模塊中的列模塊，頁面布局的第一準則；
  - 一行中的列模塊經常浮動布局，先確定每個列的大小，之后確定列的位置，頁面布局第二準則；
  - 制作HTML結構，我們還是遵循，先有結構，后有樣式的原則，結構永遠最重要，所以，先理清布局結構，在寫代碼尤為重要，需要積累；
  - 然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊，

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

　　　　　　無序和有序串列前面默認的串列樣式，在不同瀏覽器顯示效果不一樣，而且也比較難看，所以，我們一般上來就直接去掉這些串列樣式就行了，代碼如下

li { list-style: none; }

　　4、常見布局技巧

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

　　　　　　　　1、margin負值的運用

　　　　　　　　2、文字圍繞浮動元素

　　　　　　　　3、行內塊的巧妙運用

　　　　　　　　4、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 >
        <div >
            <img src="" alt="">
        </div>
    </div>
</style>

二、CSS屬性書寫順序

　　　　1、布局定位屬性：display /position /float /clear /visibility /overflow

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

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

　　　　4、其他屬性（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;
}

三、CSS高級技巧

　3.1、精靈圖

　　　　1、由來：

　　　　　　一個網頁中往往會應用很多小的背景影像作為修飾，當頁面中的影像過多時，服務器就會頻繁地接收和發送請求圖片，造成服務器請求壓力過大，這將大大的降低頁面的加載速度；

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

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

　　　　4、使用精靈圖核心：

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

　　　　　　（2）移動背景圖片位置，主要借助于背景位置來實作---background-position ；移動的距離就是這個目標圖片的 x 和 y 坐標，注意網頁中的坐標有所不同；

　　　　　　（3）一般情況下精靈圖都是負值，（千萬注意網頁中的坐標： x軸右邊走是正值，左邊走是負值， y軸往下是正值，同理，）

　　　　5、優點：

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

　　　　6、缺點：

- - 圖片檔案還是比較大的，
  - 圖片本身放大和縮小會失真，
  - 一旦圖片制作完畢想要更換非常復雜，

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

　3.2、字體圖示

　　　　1、特點：字體圖示可以為前端工程師提供一種方便高效的圖示使用方式，展示的是圖示，本質屬于字體，

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

　　　　　　注意：字體圖示不能代替精靈技術，只是對作業中圖示部分技術的提升和優化；

　　　　2、使用場景：主要用于顯示網頁中通用、常用的一些小圖示，

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

　　　　3、字體圖示的下載：

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

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

　　　　　　（3）awesome圖示

　　　　4、字體圖示的引入：

　　　　　　（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里，直接生成最新的字體圖示；

四、CSS 初始化

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

　　　　不同瀏覽器對有些標簽的默認值是不同的，為了消除不同瀏覽器對HTML文本呈現的差異，照顧瀏覽器的兼容；

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

　　　　比如：

　　　　　　黑體 \9ED1\4F53

　　　　　　宋體 \5B8B\4F53

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

五、品優購專案規劃

　　　　假如需要設計一款網頁，作業流程如下：

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

　　　　流程

- - 品優購專案整體介紹（制作首頁、串列頁、注冊頁三個頁面）電商類網站
  - 品優購專案學習目的（里面包含技術較多，能極大鍛煉我們布局技術）
  - 開發工具以及技術堆疊（切圖用ps，代碼用Vscode，測驗用chrome，大量使用HTML5+CSS3）

　　1、品優購專案搭建作業

　　　　1、需要創建如下檔案夾：

名稱	說明
專案檔案夾	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}

　　2、模塊化開發

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

　　　　代碼也如此，有些樣式和結構在很多頁面都會出現，比如頁面頭部和底部，大部分頁面都有，此時，可以把這些結構和樣式單獨作為一個模塊，然后重復使用;

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

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

　　3、網站 favicon 圖示

　　　　favicon.ico 一般用于作為縮略的網站標志，它顯示在瀏覽器的地址欄或者標簽上，目前主要的瀏覽器都支持 favicon.ico 圖示，

- - 制作favicon圖示
  - favicon圖示放到網站根目錄下
  - HTML頁面引入favicon圖示

　　　　　　1、制作favicon圖示

　　　　　　　　（1）把品優購圖示切成 png 圖片，

　　　　　　　　（2）把 png 圖片轉換為 ico 圖示，這需要借助于第三方轉換網站，例如位元蟲：http://www.bitbug.net/

　　　　　　2、favicon圖示放到網站根目錄下

　　　　　　3、 HTML頁面引入favicon圖示

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

<link rel="shortcut icon" href="https://www.cnblogs.com/xinxinzi/archive/2021/02/22/favicon.ico" type="image/x-icon"/>

　　4、網站 TDK 三大標簽SEO優化

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

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

　　　　有SEO專門人員，標簽由我們寫；

　　　　網站TDK三大標簽SEO優化

　　　　1、title 網站標題

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

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

　　　　　　例如：

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

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

　　　　2、description 網站說明

　　　　　　簡要說明我們網站主要是做什么的，

　　　　　　我們提倡，description 作為網站的總體業務和主題概括，多采用“我們是…”、“我們提供…”、“×××網作為…”、“電話：010…”之類陳述句，

　　　　　　例如：

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

　　　　3、keywords 關鍵字

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

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

　　　　　　例如：

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

　　　　　　對于我們前端人員來說，我們只需要準備好這三個標簽，具體里面的內容，有專門的 SEO 人員準備

　　　　　　網站的首頁一般都是使用 index 命名，比如 index.html 或者 index.php ，

　　　　　　我們開始制作首頁的頭部和底部的時候，根據模塊化開發，樣式要寫到common.css里面，

　　　　4、LOGO SEO 優化

　　　　　　1、 logo 里面首先放一個 h1 標簽，目的是為了提權，告訴搜索引擎，這個地方很重要，

　　　　　　2、 h1 里面再放一個鏈接，可以回傳首頁的，把 logo 的背景圖片給鏈接即可，

　　　　　　3、為了搜索引擎收錄我們，我們鏈接里面要放文字（網站名稱），但是文字不要顯示出來，

　　　　　　　　l 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘寶的做法，

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

　　　　　　4、最后給鏈接一個 title 屬性，這樣滑鼠放到 logo 上就可以看到提示文字了

　　5、footer 底部制作

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

　　　　l footer 里面有一個大的版心

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

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

　　　　l 版心里面包含 3 號盒子，mod_copyright 是著作權模塊

　　6、main 主體模塊制作

　　　　以前書寫的就是模塊化中的公共部分，

　　　　main 主體模塊是 index 里面專有的，注意需要新的樣式檔案 index.css ，

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

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

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

　　7、推薦模塊制作

　　　　l 大盒子 recom 推薦模塊 recommend

　　　　l 里面包含 2 個盒子，浮動即可

　　　　l 1 號盒子 recom_hd

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

　　8、樓層區 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 個大列，列的寬度不一致

　　9、品優購串列頁制作

　　　　（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

　　10、品優購注冊頁制作

　　　　（1）注冊頁類名命名

　　　　　　　注冊頁面： register.html

　　　　　　　注意：注冊頁面比較隱私，為了保護用戶資訊，我們不需要對當前頁面做SEO優化，

　　　　（2）注冊頁布局

　　　　（3）registerarea 布局

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/262429.html

標籤：其他

上一篇：一個巧合，我把檔案寫進了代碼里

下一篇：JavaScript基礎