css布局練習

css練習布局，並完成一下布局:

要求:主要練習布局，並且精簡**（瀏覽器載入時 提公升瀏覽器載入速度）

>

>
charset
="utf-8"
>
>
2title
>
rel=
"stylesheet"
type
="text/css"
href
="style1-1.css"
>
head
>
>
"a1"
>
class
="h1"
>
div>
style
="height
:18px
">
div>
class
="img1"
>
src=
"./style2.png"
>
div>
class
="img2"
>
src=
"./style3.png"
>
div>
class
="img3"
>
src=
"./style4.png"
>
div>
class
="img4"
>
src=
"./style5.png"
>
div>
class
="img5"
>
src=
"./style6.png"
>
div>
class
="img6"
>
src=
"./style7.png"
>
div>
class
="img1"
>
src=
"./style8.png"
>
div>
class
="img2"
>
src=
"./style9.png"
>
div>
class
="img3"
>
src=
"./style10.png"
>
div>
class
="img4"
>
src=
"./style11.png"
>
div>
class
="img5"
>
src=
"./style12.png"
>
div>
class
="img6"
>
src=
"./style13.png"
>
div>
div>
body
>
html
>
2.css部分：
#a1.h1.img1
.img2
.img3
.img4
.img5
.img6

總結：可能是自己練習還不夠熟練，在做的過程中遇到了乙個問題，**只需要設定前兩行，但是由於自己摳圖尺寸不統一 導致在寫高的時候也不是一樣的，寫前兩行時沒有出現問題 但是在直接新增後兩行時出現問題float:left 左對齊因為前兩行高度屬性不一致，導致出現空白，無法正常左對齊排列。

解決辦法：需要把盒子高度height:調整一致

CSS簡單布局練習（一）

本文稱布局如以下模式的頁面為工字形頁面，主要由四個div構成。通過更改寬高資料或者定義板塊比例可以呈現不同頁面效果。html如下，先構造四個div分別表示上 左中 右中 下 頁尾 header headerdiv center class center left leftdiv class cent...

Css高階練習 實現抽屜網樣式布局

全部42區 段子挨踢1024 你問我答 註冊登入 最熱最新 人類發布 即時排序 24小時 3天 發布 大臉撐在小胸 剛在以色列大使館經歷史上最嚴的安檢。過完常規掃瞄還有二 次安檢，包裡所有東西都掏出來，唇膏擰開，粉盒開啟，潤喉糖開啟，錢包裡所有卡和錢摸 一遍，紙巾摸一遍，包包鍊子每乙個扣都仔細摸過。...

CSS布局入門 css

css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位，通過層的margin,padding,border等屬性來控制版塊的間距。分析乙個典型的定義div例子 sample 說明如下 下面是這個層...