特殊符号
<<br/> <!--<小于号-->
><br/> <!-->大于号-->
&<br/> <!--&与-->
®<br /> <!--®已注册商标-->
©<br /> <!--©版权标记-->
™<br /> <!--™包含注册商标R，亦包含直接使用未经商标局核准注册的未注册商标-->
¥<br/> <!--¥人民币-->
∧<br/> <!--∧异或-->
百度 京东<br /> <!--小空格-->
百度 京东<br /> <!--大空格-->
百度  京东 <!--中空格-->
使用HTML和CSS编写淘宝界面（案例）
代码
注意里面的注释
<!DOCTYPE html>
<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，一个左浮动，一个右浮动--><div id="top1"><div style="float: left;"><!--三个部分都要设置超链接，可以使用a标签，添加href--><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，都向左浮动，搜索框部分注意调整左外边距与顶外边距的距离--><div style="float: left; margin-left: 10px;"> <img src="../img/logo.bmp"/></div><!--搜索框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><!--顶部第三部分，左边相对图片的位置距离20px隔开--><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.8</p></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.8</p></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.8</p></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.8</p></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.8</p></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.8</p></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.8</p></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.8</p></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.8</p></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.8</p></td></tr> </table></div></body>
</html>
