html:(13):ol-li和div作用
生活随笔
收集整理的這篇文章主要介紹了
html:(13):ol-li和div作用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用ol，添加圖書銷售排行榜
如果想在網(wǎng)頁中展示有前后順序的信息列表，怎么辦呢？如，當當網(wǎng)上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標簽來制作有序列表來展示。
語法：
<ol><li>信息</li><li>信息</li>...... </ol>舉例：
下面是一個熱點課程下載排行榜：
<ol><li>前端開發(fā)面試心法 </li><li>零基礎(chǔ)學習html</li><li>JavaScript全攻略</li> </ol><ol>在網(wǎng)頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始，如下圖所示：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p標簽</title> </head> <body> <ol><li>我的第一個列表信息。</li><li>我的第一個列表信息。</li> </ol> </body> </html>運行結(jié)果
認識div在排版中的作用
在網(wǎng)頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當于一個容器。
語法：
<div>…</div>
確定邏輯部分：
什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標簽作為容器。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style>div.hot{font-size:13px;float:left;padding-right:6px;border-right:2px solid blue;}div.new{font-size:13px;float:right;} </style> <title>div標簽</title> </head> <body> <div><div class="hot"><h2>熱門課程排行榜</h2><ol><li>前端開發(fā)面試心法 </li><li>零基礎(chǔ)學習html</li><li>javascript全攻略</li></ol></div><div class="new"><h2>最新課程排行</h2><ol><li>版本管理工具介紹—Git篇 </li><li>Canvas繪圖詳解</li><li>QQ5.0側(cè)滑菜單</li></ol></div> </div> </body> </html>運行結(jié)果
?
總結(jié)
以上是生活随笔為你收集整理的html:(13):ol-li和div作用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 界址点号_界址点及四至优化
- 下一篇： java学习（93）：线程的创建方法二