首頁 web前端 css教學 DIV CSS常用到的屬性、參數及說明_經驗交流

DIV CSS常用到的屬性、參數及說明_經驗交流

May 16, 2016 pm 12:04 PM
css div 參數 屬性

通用類別
overflow:hidden;自動隱藏超出的內容,防止撐開層和表格的範圍
!important
指定樣式規則的應用優先權
文字類別color: #FF0000;文字顏色font-family: "Arial", "Helvetica", "sans-serif";字體font-size: 9px;字號text-align:center; 居中(left為居左,right為居右) line-height:28px;行行高(可用150%值) font-style: italic;斜體(oblique偏斜體) font-weight: bold;服務粗體(bolder特粗,400粗值) font-variant: small-caps;小型大寫字母text- transform: capitalize;首字母大寫text-decoration: underline overline line-through blink;下劃線,上劃線,刪除線,閃爍text-indent: 2em;文字縮排2個字體高(或15px,即15像素)
  背景類別background-attachment: fixed;固定位置(scroll滾動) background: #0066CC;背景色(transparent透明) background: url(/image/more2.gif);背景圖片background-repeat: repeat;重複( repeat-x橫向重複,repeat-y縱向重複) background-position: center top;水平居中垂直頂部(left center水平居左垂直居中) background:url(/image/dtbg.gif) #FEFEFE
  no-repeat
  right bottom(2px 5px);
  背景圖片、
  背景顏色、圖片不重複、背景圖片從類別開始(圖片距左2px距上5px)
  框架位置右下角
clear: both;兩邊拒排浮動物件(left左邊拒排浮動物件,right右邊拒排浮動物件)
  float: left;浮動物件位置居左(right, 最新列車時刻表位置居右)
  position :relative; 相對位置,一般在上級框架中設定極品時刻表
  position:absolute; 絕對位置,配合上級框架的設定對本級框架設定,設定top、left值
  top:5px;頁面絕對或相對於框架頂端絕對位置
  left:10px; 頁面絕對或相對於框架左邊絕對位置
  width: 100px;寬100px
  height: 200px;寬100px
  height: 200px;寬100px
  height: 200px;高200px )
  margin 上海火車時刻表:10px 20px 10px 20px;
  上右下左頁邊距(值相同可省寫margin:10px)
  單獨指定用margin-top:10px; right、margin-bottom、margin-left)
  padding:20px 10px 10px 20p;
  上右下左內容離邊框的距離(值相同可省寫padding:10px)
 〕單獨用padding top:10px;(padding-right、padding-bottompadding-left)
  border:#ccc 1px solid 成都列車時刻表;
  四邊框顏色、線寬、實線(dotted虛線,dashed點畫線,doubleed雙線,ridge脊線)
  單獨指定用border-top:#ccc 1px solid;border-right:#ccc 1px solid
  等等
  項目清單類別list-style-position: outside;為外(inside內) list-style-image: url(/yh/image/more04.gif);項目符號圖像臨客時刻表list-style-type: disc;項目符號為圓點(circle圓圈,square方塊)
  擴充類別cursor: e-resize;滑鼠樣式filter: Blur(Add=4 , Direction=8, Strength=4);濾鏡filter: FlipH;橫向翻轉(FlipV gprs流量費縱向翻轉)
  單獨設定連結
  #bottool a:link{color:#fff};未存取的顏色
  #bottool a:visited{color:#fff};已訪問的顏色流量軟體
 #bottool a:hover{color:#ff0};滑鼠在連結上
  這麼多定義項, 其實常用也就下面幾類:指定寬高值width,height;指定背景:background;指定位置:float,特殊的用position結合top、left來定位;設定框架邊距:margin;設定容器內框距:padding幾項。其中在我的樣式定義中取消了overflow、 clear、!important程式的定義項。 1.取消overflow:hidden是因為經過反覆實驗,該定義項只能隱藏超出容器高度的內容而不能隱藏超出寬度的內容。而我需要的就是要能自動隱藏超出容器寬度的內容,有時反而需要容器高度能隨內容的多寡而撐開容器高度。 2.取消clear定義項是因為在實際應用中很真正達到理解的容器與容器的排列關係,框架或容器的位置還是用float、position、top、left等精確定位。 3、!important
  指定樣式規則的應用優先權。這個主要用於在IE和其它的瀏覽器要區別顯示出的效果,我的網站就是想固定顯示效果,所以不存在什麼優先權。
  我對DIV CSS也還在研究之中,有不當之處請大家跟貼指正,有完善的地方也請跟貼完善。我認為用DIV CSS來佈局網站,最重要的是佈局想法問題,不同的設計方案,設計的繁簡大不一樣。我專注於框架或容器的通用性,設計出幾種容器的樣式,就像FS4中的標籤樣式,然後在需要的地方調用這個樣式就行了,以達到通用性而不是專用性。今天就來談談這些,以後再專門談談這個佈局設計思路問題。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

h5兼容問題怎麼解決 h5兼容問題怎麼解決 Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括:使用響應式設計,允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具,在發布前測試兼容性。使用 Polyfill,為舊瀏覽器提供對新 API 的支持。遵循 Web 標準,使用有效的代碼和最佳實踐。使用 CSS 預處理器,簡化 CSS 代碼並提高可讀性。優化圖像,減小網頁大小並加快加載速度。啟用 HTTPS,確保網站的安全性。

ps漸變拾色器怎麼搞 ps漸變拾色器怎麼搞 Apr 06, 2025 pm 10:09 PM

漸變拾色器賦予設計師從圖像中提取和創建漸變的靈活性。它簡化了漸變創建、確保准確性、激發靈感、提升效率並提供跨平台支持,應用範圍廣泛,包括網站、平面設計、UI/UX 設計和數字藝術。

Bootstrap列表如何移除默認樣式? Bootstrap列表如何移除默認樣式? Apr 07, 2025 am 10:18 AM

Bootstrap 列表的默認樣式可以通過 CSS 覆蓋來移除。使用更具體的 CSS 規則和選擇器,遵循 "就近原則" 和 "權重原則",覆蓋 Bootstrap 默認的樣式。為避免樣式衝突,可使用更具針對性的選擇器。如果遇到覆蓋不成功的情況,可調整自定義 CSS 的權重。同時注意性能優化,避免過度使用 !important,撰寫簡潔高效的 CSS 代碼。

怎麼建立bootstrap框架 怎麼建立bootstrap框架 Apr 07, 2025 pm 12:57 PM

要建立 Bootstrap 框架,請按照以下步驟操作:通過 CDN 或安裝本地副本安裝 Bootstrap。創建一個 HTML 文檔,將 Bootstrap CSS 鏈接到 <head> 部分。添加 Bootstrap JavaScript 文件到 <body> 部分。使用 Bootstrap 組件並自定義樣式表以滿足您的需要。

Bootstrap圖片居中是否支持圖片縮放 Bootstrap圖片居中是否支持圖片縮放 Apr 07, 2025 am 07:42 AM

如何在 Bootstrap 中實現圖片居中和縮放:使用 d-flex justify-content-center 水平居中圖片。使用 align-items-center 和固定的父元素高度垂直居中圖片。使用 width 和 height 屬性控製圖片大小,或使用 max-width 和 max-height 限制最大尺寸。使用 img-fluid 類或響應式設計機制,例如媒體查詢,實現響應式縮放。優化圖片尺寸,使用 object-fit 屬性控制縮放方式,遵循最佳實踐,以確保性能和可維護性。

如何查看Bootstrap的網格系統 如何查看Bootstrap的網格系統 Apr 07, 2025 am 09:48 AM

Bootstrap的網格系統是一種用於快速構建響應式佈局的規則,包含三個主要類:container(容器)、row(行)和col(列)。默認情況下提供12列網格,每一列的寬度可以通過col-md-等輔助類進行調整,從而實現針對不同屏幕尺寸的佈局優化。通過使用偏移類和嵌套網格,可以擴展佈局的靈活性。在使用網格系統時,確保每個元素的嵌套結構正確, 並考慮性能優化,以提升頁面加載速度。只有深入理解和實踐,才能熟練掌握Bootstrap網格系統。

bootstrap導航欄怎麼設置 bootstrap導航欄怎麼設置 Apr 07, 2025 pm 01:51 PM

Bootstrap 提供了設置導航欄的簡單指南:引入 Bootstrap 庫創建導航欄容器添加品牌標識創建導航鏈接添加其他元素(可選)調整樣式(可選)

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

See all articles