歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

良多網頁機關時分小一小部分布局除了應用其余標簽來組織,對span標簽決議使用也是不錯選擇。這里CSS5舉一個小實例簡介span組織小構造運用。

例如文章題目列表中,左邊為問題,右邊為對應頒布發表時間,造成擺布結構的機關,何等小一小部分假設決定div構造就大材小用了。

1)、span浸染實例代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>span 實例 CSS5</title> 
<style> 
ul,li{ padding:0; margin:0;list-style:none; } 
ul{ width:400px; padding:10px;border:1px solid #000} 
ul li{ line-height:30px; height:30px; text-align:left} 
ul li a{ float:left; width:300px; height:30px; overflow:hidden} 
ul li span{ float:right} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">文章問題表現</a><span>2016-09-11</span></li> 
<li><a href="#">接待會見CSS5web</a><span>2016-05-07</span></li> 
</ul> 
</body> 
</html> 

代碼疏解:

ul,li{ padding:0; margin:0;list-style:none; }

肯定ul和li默認CSS格局,比喻li后背間隔與無序圓點功效

ul{ width:400px; padding:10px;border:1px solid #000}

便于觀測功效對ul配置寬度與邊框,設置padding防備模式與Ul太緊貼。

ul li{ line-height:30px; height:30px; text-align:left}

配置Li高度,和內容垂直居中,設置形式靠左浮現

ul li a{ float:left; width:300px; height:30px; overflow:hidden}

對li里的li a設置靠左浮動,設置裝備擺設寬度與高度,以及設置裝備擺設匿伏橫跨寬度高度的內容。防備形式溢出

ul li span{ float:right}

對span設置裝備擺設靠右浮動

這樣完成了文章列表結構中,標題問題靠左,年光靠右。

如需轉載,請注明文章出處和來源網址:http://www.khijtf.live/wenji/w53769.shtml

江西多乐彩走势图今天 那个软件可快以赚钱吗 山西龙城麻将游戏 聚友贵州麻将下载安装 列支敦士登打工赚钱吗 杭州麻将下载排行 初中生当宣传员赚钱 全民麻将正式版 二级家具最赚钱的 搜狐资讯版看资讯赚钱 梦幻西游手游吧 古代什么生意赚钱 亚盛国际彩票网址 在家养一只母泰迪一年能赚钱吗 麻将怎么打视频教程 美团现在如何赚钱 麻将app跟好友一起玩