1. 程式人生 > >CSS基本佈局16例

CSS基本佈局16例

單行單列

  • 單行單列 單行單列1:採用float浮在左上角,固定寬度。
  • 單行單列 單行單列2:固定在左上角,固定寬度,採用的是絕對(absolute)定位。
  • 單行單列 單行單列3:固定在左上角,不固定寬度,採用百分比(%)定義寬度來自適應頁面。
  • 單行單列 單行單列4(推薦):固定寬度,採用在body樣式中定義居中屬性(text-align: center;)實現適應頁面自動居中。

單行兩列

  • 單行兩列 單行兩列1:兩列都固定寬度。第一列浮在左上角,第二列浮在第一列右邊。
  • 單行兩列 單行兩列2:兩列都百分比寬度,但不滿屏。第一列固定在左上角,第二列浮在第一列右邊。
  • 單行兩列 單行兩列3:兩列都百分比寬度,滿屏。兩列都採用絕對定位。
  • 單行兩列 單行兩列4
    :兩列都百分比寬度,滿屏。第一列浮在左上角,第二列浮在右上角。
  • 單行兩列 單行兩列5:兩列都百分比寬度,滿屏。第一列浮在左上角,第二列浮在第一列右邊。

單行三列

  • 單行三列 單行三列1:左右列都絕對定位(右列定位在右上)。左列和右列固定寬度,中間列自適應頁面。
  • 單行三列 單行三列2:左列定位在左上,右列定位在右上,中間列浮在左列右面。左列和右列固定寬度,中間列自適應頁面。
  • 單行三列 單行三列3:三列都絕對定位。左列和右列固定寬度,中間列根據內容自適應。
  • 單行三列 單行三列4(推薦):類似樣式2,只是將margin: 20px屬性增加在body樣式中,解決了中間列在Netscape6.0中置頂的問題。
  • 單行三列 單行三列5:左右列絕對定位,中間列自適應。寬度滿屏。

頂行三列

相關推薦

CSS基本佈局16

單行單列 單行單列1:採用float浮在左上角,固定寬度。 單行單列2:固定在左上角,固定寬度,採用的是絕對(absolute)定位。 單行單列3:固定在左上角,不固定寬度,採用百分比(%)定義寬度來自適應頁面。 單行單列4(推薦):固定寬度,採用在body樣

【筆記】學習CSS佈局16——inline-block佈局

你可以使用 inline-block 來佈局。有一些事情需要你牢記: vertical-align 屬性會影響到 inline-block 元素,你可能會把它的值設定為 top 。 你需要設定每一列的寬度 如

4-基本佈局+CSS樣式屬性+盒子模型

***********************回顧一下***************************** ---行級佈局---- 1. div是塊級元素,獨佔一行空間,寬度預設沾滿父級元素 2. div的高度由子級元素來決定 ---列級佈局--- 1. 浮動元素與兄

WEB前端-HTML-CSS-後臺管理頁面佈局

作為一個後臺管理頁面,不必太過複雜,一般只需要三部分: 1、上層標籤塊; 2、左側選單塊; 3、中部內容顯示塊; 今天簡要給大家分享一個佈局中的一個小case; 需求:要求上層標籤塊、左側選單

CSS-基本語法/引用/文本設置/選擇器/

樣式 indent 12px 常用 字號 before 設置 css代碼 結合 CSS-基本語法/引用/文本設置 css基本語法及頁面引用 css基本語法 css的定義方法是: 選擇器 { 屬性:值; 屬性:值; 屬性:值;} 選擇器是將樣式和頁面元素關聯起來的

CSS基本語法

blue col 對齊方式 所在 文本 優先 盒子模型 坐標 調用 CSS常用選擇器1、頁面中,所有的CSS代碼,需要寫入到<style></style>標簽中。style標簽的type屬性應該選擇text/css2、CSS 註釋 CSS修改頁面中的

css基本語法及頁面引用

式表 pre class 創建 pos width 樣式 tex type css基本語法 css的定義方法是: 選擇器 { 屬性:值; 屬性:值; 屬性:值;} 選擇器是將樣式和頁面元素關聯起來的名稱,屬性是希望設置的樣式屬性每個屬性有一個或多個值。代碼示例: d

Cisco 的基本配置實之五----交換機的路由功能與DHCP 功能

sign 網關 tin enter com -- config cisco assigned 5、配置交換機的路由功能 說明:只有在三層交換機上才有路由功能,其他的二層接入交換機要想在不同的vlan之間傳送數據需要通過trunk口到核心交換機上進行完路由交換後才可以。

思科交換機基本配置實講解(123)

系統 face 模擬 action 千兆 詳解 終端 輸出 打開終端 1、基本概念介紹 IOS: 互聯網操作系統,也就是交換機和路由器中用的操作系統 VLAN: 虛擬lan VTP: VLAN TRUN

30個優秀的CSS技術和實 By 彬Go 2008-12-04

偽類 cat oranges apple 比較 技術分享 markup 改變 精通 在這裏可發現很多與眾不同的技術,比如:圖片集、陰影效果、可擴展按鈕、菜單等…這些實例都是使用純CSS和HTML實現的。單擊每個實例的標題可以被轉向到該技術實例的相關教程或說明頁面(英

Css基本樣式

overflow 哪些 居左 put 所有 type 設置 text list 去掉ul的小圓點list-style: none;-------------------------------------------文本居中:text-align:center;text-a

CSS基本屬性

col 屬性 clas pre wid style ott round bsp 背景屬性   背景顏色 div{ height: 200px; width: 200px; background-color: #ccc; }   背景圖片 div

華為NAT基本配置實詳解

步驟 pc2 quit ip nat add 設備互聯 ext roc 配置實例 實驗需求:PC-1/2 要 ping 通 PC-3 ; 實驗步驟:1.設備互聯、IP地址規劃、加電;2.設備配置#內網設備終端設備PC1:ip 192.168.10.1mask 255.255

VRRP協議與keepalived基本原理實演示

int ip地址 sta ipvs ffffff centos6.4 搶占模式 進行 conn VRRP是什麽?VRRP(Virtual Router Redundancy Protocol,虛擬路由器冗余協議)是一種容錯協議,保證當主機的下一條路由器出現故障時,由另一臺路

CSS基本知識

分開 col tle -- body 定義 type text 參考 CSS規則有兩個主要部分組成:選擇器,一條或多條聲明 選擇器通常是需要改變樣式的HTML元素 每條聲明由一個屬性和一個值組成 屬性是希望設置的樣式屬性。每個屬性有一個值。屬性和值之間用冒號分開。 CSS

css 常用佈局

「前端那些事兒」③ CSS 佈局方案 我們在日常開發中經常遇到佈局問題,下面羅列幾種常用的css佈局方案 話不多說,上程式碼! 居中佈局 以下居中佈局均以不定寬為前提,定寬情況包含其中 1、水平居中     a) inlin

DIV+CSS常見佈局操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常見佈局操作</title> <style> .topheight

CSS+DIV佈局(二)

佈局的三種方式 一.常規流 以前沒有學佈局的時候,屬於常規流 元素按照常規顯示方式顯示,塊級元素垂直排列、行內元素就是水平排列   二.浮動 float:left; float:right: float:none; 典型應用兩個div水平排列 ******************

CSS+DIV佈局(一)

*************************使用CSS+DIV佈局*******************************   ********************************盒模型******************************* html中每一個元素

Android常用的基本佈局

Android常用的5中基本佈局  Android的基本佈局是搭建Android介面很重要的一環,你所有的控制元件都必須在佈局基本佈局下面來控制,選擇合適的佈局,對你的介面搭建有很大的幫助。   這5中基本佈局是:       &n