1. 快捷导航shortcut制作
1.1 如何分块
分析如下
1.2 如何添加“| ”分隔符
1.3 如何添加小箭头
字体图标下载地址： IcoMoon App - Icon Font, SVG, PDF & PNG Generator选好以后打开文件夹复制fonts文件和style.css文件的第一个css代码复制fonts到我自己的fonts文件
复制style.css的第一个：@font-face{……}到我的common.css第一行，注意路径前面加上…/
/* 版心 */.w{width: 1200px;margin: 0 auto;}.fl{float: left;}.fr{float: right;}.style_red{color:#c81623;}.shortcut{height: 31px;line-height: 31px;background-color: #f1f1f1;font-size: 15px;}.shortcut ul li{float: left;}.shortcut .fr ul li:nth-child(even){width: 1px;height: 17px;background-color: rgb(90, 90, 90);margin: 7px 12px;}.arrow-icon::after {content: '';font-family: 'icomoon';margin-left: 6px;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>昕之优选购物网站-正品低价、品质保障、配送及时、轻松购物！</title><meta name="description"content="昕之优选购物网站-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" /><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" /><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/common.css"/><link rel="shortcut icon" href="images/logo.ico" type="image/x-icon" /></head><body><!-- 头部导航栏 --><div class="shortcut"><div class="w"><!-- 左侧 登录注册--><div class="fl"><ul><li>昕之优选欢迎您！ </li><li><a href="">请登录</a> <a href="" class="style_red">免费注册</a></li></ul></div><!-- 右侧 导航列表--><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">个人主页</li><li></li><li>会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注我们</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></div></body></html>
