《淘宝项目开发笔记八》

《淘宝项目开发笔记八》

今天接着前天笔记七的写，今天是要完成如下內容：

同样拿到图样，不要急于写代码，先分析结构，把结构分析清楚再去写，会事半功倍！
以下代码纯手打：


以下为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;
}

来源：CSDN

作者：粗制滥造@二两雪花

链接：https://blog.csdn.net/qq_44152977/article/details/104161451