歡迎來到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.133025.buzz/wenji/w53769.shtml

德甲最新射手榜 河北11选5开奖结果 正规股票配资平台 黑龙江十一选五任五遗漏正好网 江西福彩快三今天 江西快3江西快三走势图 七星彩排列7走势图 11选5万能八码必中一注 贵州快三开奖结果基本走势图 极速赛车是正规的吗 江西多乐彩前三直遗漏 昨天福彩3d开奖结果 500万彩票网首页 北京快中彩软件下载 怎么看个股票指数 江西快三推荐和预测 秒速赛车是哪里开的