靜態(tài)頁面布局總結（新手）

sushi 發(fā)布于2019-08-29 17:30 / 1469人閱讀

摘要：學習一個月了，對和頁面的靜態(tài)布局進行一次總結總體來說靜態(tài)頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態(tài)的頁面的布局就不會有太大的問題再說布局之前先說一下元素的顯示模式分類。

學習HTML一個月了，對HTML和Css頁面的靜態(tài)布局進行一次總結

總體來說靜態(tài)頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，
那么對于靜態(tài)的頁面的布局就不會有太大的問題
再說布局之前先說一下元素的顯示模式分類。
    元素的顯示模式分類可以分為塊級元素，行內元素，行內塊級元素。
    塊級元素是垂直排列的，每個元素會獨占一行，行內元素和行內塊級元素不會獨占一行，會水平排列。
    當然元素的顯示模式是可以隨便轉換的。
下面先來說說垂直布局，
    垂直布局讓元素在頁面里面垂直排列，這個是比較簡單的，我們知道在正常情況下頁面里的
    塊級元素都是從上到下依次排列的，那么這個垂直布局就相對來說簡單點。只要把塊級元素依次寫在頁面中，
    那么瀏覽器會默認的讓這些塊級元素垂直排列，如果有行內塊級元素或行內元素
    則可以轉化為塊級元素來實現(xiàn)元素的垂直排列。
然后是來說水平布局，
    水平布局就是讓元素在頁面里面水平排列，這個比較垂直排列會相對復雜一些，因為水平排列會涉及到浮動，
    因此會出現(xiàn)很多問題，比如高度塌陷，覆蓋等。而且一般都是通過浮動來實現(xiàn)水平布局，所以會遇到很多問題，
    這就要求我們對浮動有一定的了解，下面我會寫一些布局的細節(jié)以及浮動的各種情況。
    首先最常用的就是居中顯示，各種居中方式中我們最常用的就是text-align：center ， 
    text-align：center可以讓下面幾種情況居中：
       可以讓該元素的文本內容水平居中，該元素中的行內元素和行內塊級元素，
       但是不能讓元素內部的塊級元素水平居中
       垂直居中，用的最多的是讓line-height=元素的height，還有vertical-align，
       也是垂直對齊，他一般是讓圖片右邊的文本對齊圖片的上中下。
    然后用的多的就是內外邊距了，就是margin和padding，很好的理解和運用內外邊距能夠
    讓你很方便的實現(xiàn)開頭或結尾的一些距離等。
     然后就是定位了，頁面布局的定位最常用的就是浮動（float）和定位（position），
     感興趣的可以去我的日記了有詳細的介紹。
     本人學習前段一個月，完全的菜鳥，希望大家多多指點。

云服務器 GPU云服務器頁面布局 html頁面布局 aspx頁面布局 php開發(fā)頁面布局

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114369.html

靜態(tài)頁面布局總結（新手）

摘要：學習一個月了，對和頁面的靜態(tài)布局進行一次總結總體來說靜態(tài)頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態(tài)的頁面的布局就不會有太大的問題再說布局之前先說一下元素的顯示模式分類。學習HTML一個月了，對HTML和Css頁面的靜態(tài)布局進行一次總結總體來說靜態(tài)頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態(tài)的頁面...

MasonEast 2019-08-02 12:11 評論0 收藏0
移動端布局與適配

摘要：實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內容放在這些網(wǎng)格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內容放在這些網(wǎng)格內。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內容置于網(wǎng)格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
分享一些遇到的好文章

摘要：移動端布局總結移動端全兼容的移動端知識涵蓋偽類等全移動端不得不講的頭標簽移動端自適應方案移動端適配總結布局新舊混合寫法詳解兼容微信使用實現(xiàn)手淘頁面的終端適配淘寶彈性布局方案實踐理解所需的知識產(chǎn)生的小數(shù)像素問題高性能動畫動畫的性能優(yōu)化處理和動移動端rem布局總結移動端全兼容的flexbox 移動端知識(涵蓋、css、偽類等)【全】移動端不得不講的頭標簽移動端自適應方案移動端適...

Tikitoo 2019-08-20 14:49 評論0 收藏0
設計架構

摘要：先來看一張系統(tǒng)前后端架構模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設計方案，希望具有參考價值。，和都是常見的軟件架構設計模式，它通過分離關注點來改進代碼的組織方式。如何無痛降低 if else 面條代碼復雜度相信不少同學在維護老項目時，都遇到過在深深的 if else 之間糾纏的業(yè)務邏輯。面對這樣的一團亂麻，簡單粗暴地繼續(xù)增量修改常常只會讓復雜度越來越高，可讀性越來越差，有沒...

graf 2019-06-24 17:56 評論0 收藏0