标签：xe62d 盒子 li &# ----- nbsp Day css 页面
1.项目的准备
css文件夹中两个css文件:base.css与common.css，其中common.css用于相同的样式
fonts文件夹用于存放各种图标
images用于存放样式图片
uplaod用于存放产品图片
2.左上角小图标的制作
截取一张图片(jpg格式或png格式)，在比特虫网站里进行格式转换，转换为ico格式
之后在<head>中写入代码
<link rel="shortcut icon" href="taobao1.ico" />
<!-- 左上角小图标 -->3.网站的SEO优化
（1）title网站标题
（2）descript网站说明
（3）keywords关键字
<meta name="description"
content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="keyword"
content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
<title>淘宝网-淘！我喜欢</title>4.快捷导航栏分析
整体是一个大盒子，大盒子里有左盒子和右盒子。
左盒子：里面两个li,其中第二个li中有三个a
右盒子：里面八个li（小竖线也是li），每个li里有一个a（因为li是块级元素，这样有助于调整间距，而a不是块级元素）
5.左盒子制作
首先是整体的大盒子
<div class="shortcut"><div class="shortcutLeft">
<ul>
<li class="chooseWhere">中国大陆 <span class="iconfont"></span></li>
<li>
<a href="#" class="denglu"> 亲，请登录 </a>
<a href="#">免费注册 </a>
<a href="#">手机逛淘宝</a>
</li>
</ul>
</div>使用阿里矢量图库，插入在字体的旁边
<span class="iconfont"> 注意引入图标的时候，@font-face中的url可能需要加"../"返回上级目录，直到找到fonts文件夹
使用左浮动，使元素排列在一行上。 中间的空隙用
6.右盒子制作
<div class="shortcutRight">
<ul>
<li><a href="#">我的淘宝 <span class="iconfont"></a></li>
<li><a href="#"><span class="iconfont"> 购物车 <span class="iconfont"></a>
</li>
<li><a href="#"><span class="iconfont"> </span>收藏夹 <span
class="iconfont"></a>
</li>
<li><a href=#>商品分类</a></li>
<li><a href="#">免费开店</a></li>
<li class="shuxian"></li>
<li><a href="#">千牛卖家中心 <span class="iconfont"></a></li>
<li><a href="#">联系客服 <span class="iconfont"></a></li>
<li><a href="#">网站导航 <span class="iconfont"></a></li>
</ul>
</div>值得注意的是小竖线的制作:
.shortcutRight .shuxian{
width:1px;
height: 17px;
margin-top:9px;
margin-bottom: 9px;
margin-right:17px;
background-color: #dddddd;
}另外一个值得注意的问题是：右侧盒子同样使用左浮动，因为浮动相当于把元素一个一个地往一个方向放，而不是整体放，因此如果写成右浮动的话，会导致“我的淘宝”出现在最右侧
去除li前面小点的代码：
list-style: none;去除a的下划线的代码：
text-decoration: none;整体效果：
标签：xe62d,盒子,li,&#,-----,nbsp,Day,css,页面 来源： https://blog.csdn.net/Acc222222/article/details/118737406
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。