整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
案一:
html
<ul> <li class="active"> <em></em> <p><b>參與考試《第一期模擬考試》</b></p> <p><time>3小時50分鐘</time></p> </li> <li> <em></em> <p><b>學習文檔《LDO電路設計規(guī)范》</b></p> <p><time>3小時50分鐘</time></p> </li> <li> <em></em> <p><b>學習文檔《LDO電路設計規(guī)范》</b></p> <p><time>3小時50分鐘</time></p> </li> </ul>
Css:
*{margin:0;padding:0;}
ul{
margin:100px;
padding:0;
list-style: none;
}
ul li{
position:relative;
padding-left: 30px;
padding-bottom: 20px;
border-left:2px #999 solid;
}
ul li em{
position:absolute; left:-5px; top:0; width:8px;
height:8px;border-radius:8px;background:#999;
}
ul li.active em{ background: red;}
ul li p{margin:0;}
ul li time{color:#999;font-size:12px;}
實現(xiàn)原理:
給每一個li一個左邊框,em標簽使用樣式寫成原點,采用定位將原點定位到邊框線上
方案二:
Html
<ul> <li class="active"> <img src="2.png" alt="" /> <p><b>參與考試《第一期模擬考試》</b></p> <p><time>3小時50分鐘</time></p> </li> <li> <img src="1.png" alt="" /> <p><b>學習文檔《LDO電路設計規(guī)范》</b></p> <p><time>3小時50分鐘</time></p> </li> <li> <img src="1.png" alt="" /> <p><b>學習文檔《LDO電路設計規(guī)范》</b></p> <p><time>3小時50分鐘</time></p> </li> </ul>
Css
*{margin:0;padding:0;}
ul{
margin:100px;
padding:0;
list-style: none;
}
ul li{
position:relative;
padding-left: 30px;
padding-bottom: 20px;
border-left:2px #999 solid;
}
ul li img{
position:absolute;
left:-5px;
top:0;
width:10px;
height:10px;
border-radius:10px;
background:#999;
}
ul li p{margin:0;}
ul li time{color:#999;font-size:12px;}
實現(xiàn)原理:
給li一個左邊框,同時在結構中添加img作為原點,使用定位將圖片原點定位在指定位置上
來源：千鋒web前端
學生就可以看懂的css基礎知識系列，pre標簽里是筆記總結，動手實際操作一下會加強理解。有疑問留言交流哦。
av元素是什么？
Nav元素用于定義導航鏈接，是HTML5新增的元素，該元素可以將具有導航性質的鏈接歸納在一個區(qū)域中，使頁面元素的語義更加明確。其中的導航元素可以鏈接到站點的其他頁面或者當前頁的其他部分。
Nav元素可以用作頁面導航的鏈接組，在導航鏈接組里面有很多的鏈接，點擊每個鏈接可以鏈接到其他頁面或者當前頁面的其他部分，并不是所有的鏈接組都要被放在Nav元素里面，只需要把最主要的、基本的、重要的放在Nav元素里面即可。
比如說頁腳底部如果有個版權聲明，不建議使用Nav元素，而建議使用footer元素是最合適的。一個頁面中可用多個Nav元素作為整體或者不同部分的導航
示例代碼：
Nav元素示例代碼
在上面這段代碼中，通過在Nav元素內部嵌套無序列表ul來搭建導航結構。通常一個HTML頁面中可以包含多個Nav元素，作為頁面整體或不同部分的導航。
具體來說Nav元素可以用的場景如下：
1.傳統(tǒng)導航條：目前主流網站上都有不同層級的導航條，其作用是跳轉到網站的其他主頁面。
2.側邊欄導航：目前主流博客網站及電商網站都有側邊欄導航，目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。
3.頁內導航：它的作用是在本頁面幾個主要的組成部分之間進行跳轉。
4.翻頁操作：翻頁操作切換的是網頁的內容部分，可以通過單擊“上一頁”或“下一頁”切換，也可以通過單擊實際的頁數(shù)跳轉到某一頁。
除此Nav元素也可以用于其他重要的、基本的導航鏈接組中。并不是所有的鏈接組都要被放進Nav元素，只需要將主要的和基本的鏈接放進Nav元素即可。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
