《Web前端開發基礎》課件-視頻11 塊級元素與行內元素轉換_第1頁
《Web前端開發基礎》課件-視頻11 塊級元素與行內元素轉換_第2頁
《Web前端開發基礎》課件-視頻11 塊級元素與行內元素轉換_第3頁
《Web前端開發基礎》課件-視頻11 塊級元素與行內元素轉換_第4頁
《Web前端開發基礎》課件-視頻11 塊級元素與行內元素轉換_第5頁
已閱讀5頁，還剩2頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

盒子模型

--塊級元素與行內元素轉換01塊級元素轉為行內元素行內元素轉為塊級元素02相鄰兄弟選擇器03相鄰兄弟組選擇器04目錄塊級元素：總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。比如ul、li、ol、h1-h6、p等標簽行內元素：文字這類元素的各個字母之間橫向排列，到最右端會自動折行。這種標記本身不占有獨立的區域，僅是在其他元素的基礎上指出了一定的范圍。比如strong、a、i等標簽。塊級元素與行內元素也能相互轉換。使用display屬性。每個HTML元素都有一個display屬性，實際上每個元素正式通過這個屬性的預設值來確定默認的顯示方式的。最常用的3個屬性值：inline：按照行內元素的方式顯示。block：按照塊級元素的方式顯示none：不顯示，相當于網頁中沒有這個元素。1塊級元素轉換為行內元素<!DOCTYPEhtml><html>

<head>

<title>塊級元素轉為行內式元素</title>

<styletype="text/css">

.topList{

padding:20px30px;

width:100%;

background-color:#222;

}

li{

list-style:none;

}

.topListli>a{

color:white;

text-decoration:none;

}

</style></head>

<body>

<ulclass="topList">

<li><ahref="">首頁</a></li>

<li><ahref="">手機</a></li>

<li><ahref="">家電</a></li>

<li><ahref="">相機</a></li>

<li><ahref="">電腦</a></li>

</ul></body></html>加一行代碼，使變成下面的效果2行內元素轉換為塊級元素<!DOCTYPEhtml><html><head>

<title>行內式元素轉為塊級元素</title>

<styletype="text/css">

.topList{

padding:20px30px;

width:100%;

background-color:#222;

}

.topLista{

color:white;

text-decoration:none;

}

</style></head>

<body>

<divclass="topList">

<ahref="">首頁</a>

<ahref="">手機</a>

<ahref="">家電</a>

<ahref="">相機

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論