《淘寶項目開發筆記十》

《淘寶項目開發筆記十》

今天接着前天筆記九的寫，今天是要完成如下內容：
一樣的，先不寫代碼，先分析結構：
這裏有點，相對位置左移動。

其它沒有什麼特別的了。

/* 右邊內容 */
.firstRight{
	width: 290px;
	height: 621px;
	margin-top: 10px;
	/* background-color: #6c6c6c; */
}
/* 用戶 */
.user{
	width: 290px;
	height: 140px;
	background-image: url(../images/user_bg.png);
	text-align: center;
	padding-top: 5px;
}

.user .headimg img{
	border-radius: 50%;
}
.user .textHi{
	line-height: 16px;
}

.user .goldMember a{
    display: inline-block;
    font-size: 12px;
    border-radius: 9px;
    padding: 0 10px 0 20px;
    margin: 0 2px;
}

.user .goldMember .gold{
	background:#ffe4dc url(../images/ico.png) 0 -572px no-repeat;
}
.user .goldMember .member{
	background:#ffe4dc url(../images/ico.png) 0 -528px no-repeat;
}

.user .login .loginBt{
	width: 92px;
}

.user .login button{
	width: 75px;
	height: 25px;
	line-height: 25px;
	margin: 12px 2px 0 2px;
	color: #fff;
	font-weight: bold;
	border-radius: 4px;
	border: none;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}


/* 舉報 */
.report .textreport{
	display: block;
	height: 26px;
	line-height: 26px;
	color: #f40;
	background: #ffe4dc;
	text-align: center;
}
.report .textreport i{
	font-size: 12px;
	/* 垂直居中調整 */
	vertical-align: 1px;
	/* 相對定位 */
	position: relative;
	/* 相對自身向左平移30像素 */
	left: 30px;
}


/* 公告區 */
.notice{
	width: 290px;
	/* height: 108px; */
	/* background-color: #97d30c; */
}

.notice .textNotice{
	text-align: center;
	font-size: 0;
	padding-top: 10px;
}


.notice .textNotice li{
	/* 讓li標籤在一排展示出來 */
	display: inline-block;
	font-size: 12px;
	line-height: 20px;
	padding: 0 4px;
	margin: 0 10px;
}

.notice .textNotice li a:hover{
	color: #f40;
}

.notice .textNotice .active{
	font-weight: bold;
	border-bottom: 2px solid #f40;
	/* background-color: #000; */
}

.notice .warm{
	margin: 0 12px;
	padding-top: 10px;
}


.notice .warm span{
	height: 25px;
	line-height: 25px;
	overflow: hidden;
	float: left;
	width: 130px;
}

.notice .warm .warm1{
	width: 100%;
	color: #ff5000;
}