HTML之淘宝界面案例

特殊符号

<<br/>	
><br/>	大于号-->
&<br/>	
®<br />	
©<br />	
<br />	
¥<br/>	
<br/>	
百度    京东<br />	
百度京东<br />		
百度京东		

使用HTML和CSS编写淘宝界面(案例)

HTML之淘宝界面案例_第1张图片
代码
注意里面的注释


<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝页面title>
		<style type="text/css">
			/*全局选择器,控制字体大小统一,方便排版*/
			* {
				font-size: 14px;
			}
			
			/*控制main和top的颜色及尺寸,方便调节,后面可以再将背景色去掉*/
			#top {
				width: 1000px;
				height: 220px;
				/* background-color: #87CEEB; */
				margin: 0 auto;/*上下外边距为0,左右自动对齐(居中)*/
			} 
			#main {
				width: 1000px;
				height: 500px;
				/* background-color: #DEB887; */
				margin: 0 auto;
			}
			
			/*a标签标示了超链接,这里采用鼠标Hover显示下划线的效果*/
			#top1 a{
				color: black;/*字体颜色黑色,由于文字都用a标签包裹,这里只能通过a标签精准调节,注意优先级*/
				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: #888;
				text-indent: 2em;/*文字缩进2字符*/
				line-height: 30px;/*背景框高度是30px,所以这里也是写30,保证居中*/
			}
			#top2{
				height: 100px;
				margin-top: 10px;
			}
			#top3{
				height: 30px;
				border-radius: 5px;
				background-color: #888;
				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;
			}
		style>
	head>
	<body>
		
		
		<div id="top">
			
			
			<div id="top1">
				<div style="float: left;">
					
					<a href="#" style="color: red;">亲,请登录a> <a href="##">免费注册a> <a href="###">手机逛淘宝a>
				div>
				<div style="float: right;">
					<a href="#" style="color: red;">淘宝网首页a> <a href="##">我的淘宝a> <a href="###">购物车a> <a href="#">收藏夹a> <a href="#">商品分类a>
					<a href="#">卖家中心a href="#"> <a href="#">联系客服a> <a href="#">网站导航a>       
				div>	
			div>
			
			
			<div id="top2">
				
				<div style="float: left; margin-left: 10px;"> 
					<img src="../img/logo.bmp"/>
				div>
				
				<div style="float: left; margin-left: 100px;">
					
					<div style="margin-top: 20px;">
						<input type="text" name="search" style="width: 500px; height: 25px; border: 1px solid gray; outline: none; border-radius: 2px;"/>
						<input type="submit" value="搜索"/>
					div>
					
					<div>
						客厅灯 冲锋衣 床垫 沙发垫 电脑桌 鞋柜
					div>
				div>
			div>
			
			
			<div id="top3">
				您是不是想找:<a href="#">客厅灯a> | <a href="#">冲锋衣a> | <a href="#">床垫a> | <a href="#">沙发垫a> | <a href="#">电脑桌a> | <a href="#">鞋柜a>
			div>
			
			
			<div id="top4" style="margin-top: 3px;">
				
				<div style="float: left;">
					价格: <input type="text" name="price1"/> - <input type="text" name="price2"/>
				div>
				<div style="float: right">
					<input type="checkbox" name="ck1" value="1" />包邮
					<input type="checkbox" name="ck1" value="2" />消协
					<input type="checkbox" name="ck1" value="3" />品质
					      
				div>
			div>
		div>
		
		
		<div id="main">
			
			<table width="100%">
				
				<tr align="center">
					<td>
						<img src="../img/002.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/003.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/004.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/005.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/006.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
				tr>
				<tr align="center">
					<td>
						<img src="../img/007.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/008.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/009.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/010.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
					<td>
						<img src="../img/011.png" width="150px"/><br/>
						
						<p style="color: orange;">¥ 40 包邮p>
						<p>世界上最好的商品p>
						<p style="color: gray;">浪色服饰专营店p>
						<p style="color: gray;" align="right">如实描述4.8p>
					td>
				tr>		
			table>
		div>
	body>
html>

你可能感兴趣的:(Web)