css實戰設置新聞內容
阿新 • • 發佈：2017-09-29
lis alt src 子元素 ros osi posit ont document
示例圖
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*父級上增加屬性overflow：hidden*/ /*在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）*/ /*使用成熟的清浮動樣式類，clearfix*/ /*.clearfix:after,.clearfix:before{ content: "";display: table;}*/ /*.clearfix:after{ clear:both;}*/ /*.clearfix{zoom:1;}*/ /*清除浮動的使用方法：*/ /*.con2{... overflow:hidden}*/ .news_list_con{ width:600px; height: 290px; border:1px solid #ddd; margin: 50px auto; overflow: hidden; /*overflow: hidden; 將多余的內容清除掉*/ /*}*/} .news_list_con h3{ height: 50px; width:560px; border-bottom: 1px solid #ddd; margin: 0px auto; color: #000; } .news_list_con h3 span{ display: inline-block; height:50px; border-bottom: 2px solid red;/*font: 18px/50px ‘Microsoft Himalaya‘; 字體大小 行高 和字體微軟雅黑*/ font: 18px/50px ‘Microsoft Himalaya‘; padding: 0 15px; position: relative; } .news_list_con ul{ list-style: none; /*list-style: none; 清除ul的點*/ padding: 0; width: 560px; height: 238px; margin: 6px auto; } .news_list_con ul li{ height:38px; border-bottom: 1px solid #ddd; } .news_list_con ul a{ float: left; height:38px; font: 14px/38px ‘Microsoft Himalaya‘; color: #000; text-decoration: none; /*text-decoration: none; 清除多余的線條*/ } .news_list_con ul span{ float: right; height:38px; font: 13px/38px ‘Microsoft‘; color: #000; } .news_list_con ul a:before{ /*content: ‘. ‘; 再前面加點*/ content: ‘. ‘; } .news_list_con ul a:hover{ color: red; } </style> </head> <body> <div class="news_list_con"> <h3><span>新聞列表</span></h3> <ul> <li><a href="#">特征布局：新聞列表所需知識點：盒子模型浮動</a><span>2017-09-29</span></li> <li><a href="#">特征布局：新聞列表所需知識點：盒子模型浮動</a><span>2017-09-29</span></li> <li><a href="#">特征布局：新聞列表所需知識點：盒子模型浮動</a><span>2017-09-29</span></li> <li><a href="#">特征布局：新聞列表所需知識點：盒子模型浮動</a><span>2017-09-29</span></li> <li><a href="#">特征布局：新聞列表所需知識點：盒子模型浮動</a><span>2017-09-29</span></li> <li><a href="#">特征布局：新聞列表所需知識點：盒子模型浮動</a><span>2017-09-29</span></li> </ul> </div> </body> </html>
css實戰設置新聞內容