HTML+CSS简易淘宝页面

效果图

HTML+CSS简易淘宝页面_第1张图片

HTML代码



	
		
		淘宝界面
		/* 注意这个外部链接引入css的名字与自己的相同*/
	
	
		

		
您是不是想找:Java | Python | C++ | JavaScript | html
价格: -
包邮 消协 品质       

CSS代码

/*全局选择器,控制字体大小统一     */
* {
	font-size: 14px;
}

#top {
	width: 1000px;
	height: 220px;
	margin: 0 auto;
}

#main {
	width: 1000px;
	height: 500px;
	margin: 0 auto;
}

/* a标签显示了超链接,这里采用鼠标hover显示下划线的效果*/
#top1 a {
	color: black;
	text-decoration: none;
}

#top1 a:hover {
	text-decoration: underline;
	/*鼠标放上去显示下划线*/
}

/*top1的a与top3的a不同这里分别处理*/
#top3 a {
	color: black;
	/*字体颜色黑色,由于文字都用a标签包裹,这里只能通过a标签精准调节,注意优先级*/
	text-decoration: none;
	/*下划线去掉*/
}

#top3 a:hover {
	text-decoration: underline;
	/*鼠标放上去显示下划线*/
}

/*分配top1、top2和top3全局*/
#top1 {
	height: 30px;
	border-radius: 5px;
	background-color: red;
	text-indent: 2em;
	/*文字缩进2字符*/
	line-height: 30px;
	/*背景框高度是30px,所以这里也是写30,保证居中*/
}

#top2 {
	height: 100px;
	margin-top: 10px;
}

#top3 {
	height: 30px;
	border-radius: 5px;;
	background-color: red;
	text-indent: 2em;
	line-height: 30px;
}

#top4 {
	height: 40px;
	border-radius: 5px;
	border: 1px solid gainsboro;
	/*实心框线*/
	line-height: 40px;
	text-indent: 2em;
}

/*主体部分全局控制*/
#main table p {
	font-size: 12px;
	line-height: 5px;
	/*控制行间距,也可以直接控制p标签的margin*/
	margin-bottom: 0;
	/*p标签自带的有外边距,这里需要将底部的margin去除,将外框和该标签底部的间距消除*/
}

#main table td {
	border: 1px solid gainsboro;
	padding: 10px;
	/*内边距,图片文字距离父容器的距离*/
	border-radius: 5px;
}

你可能感兴趣的:(js)


¥ 75.6 包邮

世界上最好的商品

图书专卖店

如实描述4.9


¥ 268.5 包邮

世界上最好的商品

图书专卖店

如实描述4.8


¥ 69.8 包邮

世界上最好的商品

>图书专卖店

如实描述4.8


¥ 53.21包邮

世界上最好的商品

>图书专卖店

如实描述4.8


¥ 7.65包邮

世界上最好的商品

>图书专卖店

如实描述4.8


¥ 73.3 包邮

世界上最好的商品

>图书专卖店

如实描述4.8


¥ 84.9包邮

世界上最好的商品

>图书专卖店

如实描述4.8


¥ 31.8 包邮

世界上最好的商品

>图书专卖店

如实描述4.8


¥ 42.35 包邮

世界上最好的商品

>图书专卖店

如实描述4.8


¥ 82包邮

世界上最好的商品

>图书专卖店

如实描述4.8