《淘寶項目開發筆記九》

《淘寶項目開發筆記九》

今天接着前天筆記八的寫，今天是要完成如下內容：

同樣拿到圖樣，不要急於寫代碼，先分析結構，把結構分析清楚再去寫，會事半功倍！
以下代碼純手打：


以下爲CSS代碼，沒有特別說明，

/* 淘寶頭條 */
.firstLeft .news{
	width: 890px;
	height: 100px;
	/* background:black; */
	margin-top: 10px;
	box-sizing: border-box;
	padding: 13px 13px 13px 20px;
}

.firstLeft .news .touTiao{
	margin-top: 15px;
}


.firstLeft .news .todayNews{
	background: url(../images/news_logo.png) no-repeat;
	width: 129px;
	height: 26px;
	/* 文本縮進 */ 
	text-indent: -9999px;
	overflow: hidden;
	color: #999;
	line-height: 24px;
}

.firstLeft .news .textLife{
	color: #999;
	line-height: 24px;
}
.firstLeft .news .weiMan{
	/* 父級定寬，以便子集浮動 */
	width: 680px;
	/* 父級相對定位，方便子集絕對定位 */
	position: relative;

}

.firstLeft .news .weiMan img{
	margin-right: 15px;
	width: 130px;
	height: 73px;
}


.firstLeft .news .textWeiMan{
	line-height: 28px;
	font-size: 16px;
	font-weight: normal;
}
.firstLeft .news .textWeiMan:hover,
.firstLeft .news .moreThan:hover{
	color: #ff5000;
}

.firstLeft .news .textHello{
    line-height: 18px;
	font-size: 14px;
	color: #999;
}

.firstLeft .news .moreThan{
	position: absolute;
	right: 0px;
	top: 0;
	color: #999;
}