目录

第三方字体样式
<https://blog.csdn.net/qq_33961117/article/details/82997480#%E7%AC%AC%E4%B8%89%E6%96%B9%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F>

字段间分割线的样式实现
<https://blog.csdn.net/qq_33961117/article/details/82997480#%E5%AD%97%E6%AE%B5%E9%97%B4%E5%88%86%E5%89%B2%E7%BA%BF%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%AE%9E%E7%8E%B0>

搭建网站前的reset操作
<https://blog.csdn.net/qq_33961117/article/details/82997480#%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99%E5%89%8D%E7%9A%84reset%E6%93%8D%E4%BD%9C>

鼠标悬浮出现浮框
<https://blog.csdn.net/qq_33961117/article/details/82997480#%E9%BC%A0%E6%A0%87%E6%82%AC%E6%B5%AE%E5%87%BA%E7%8E%B0%E6%B5%AE%E6%A1%86>

- 购物车部分例子
<https://blog.csdn.net/qq_33961117/article/details/82997480#-%20%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%83%A8%E5%88%86%E4%BE%8B%E5%AD%90>

- 重点步骤总结
<https://blog.csdn.net/qq_33961117/article/details/82997480#-%20%E9%87%8D%E7%82%B9%E6%AD%A5%E9%AA%A4%E6%80%BB%E7%BB%93>

块与块之间的分割线
<https://blog.csdn.net/qq_33961117/article/details/82997480#%E5%9D%97%E4%B8%8E%E5%9D%97%E4%B9%8B%E9%97%B4%E7%9A%84%E5%88%86%E5%89%B2%E7%BA%BF>

块颜色的根据位置不同而不同
<https://blog.csdn.net/qq_33961117/article/details/82997480#%E5%9D%97%E9%A2%9C%E8%89%B2%E7%9A%84%E6%A0%B9%E6%8D%AE%E4%BD%8D%E7%BD%AE%E4%B8%8D%E5%90%8C%E8%80%8C%E4%B8%8D%E5%90%8C>

悬浮上移+阴影
<https://blog.csdn.net/qq_33961117/article/details/82997480#%E6%82%AC%E6%B5%AE%E4%B8%8A%E7%A7%BB%2B%E9%98%B4%E5%BD%B1>

第三方字体样式

fontawesome - 字体库 <http://fontawesome.dashgame.com/>



iconfont - 字体库
<http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2>
在浏览器中按f12打开【开发人员工具】,找到【console(控制台)】 输入以下代码,再按回车,稍等片刻即可把全部图标加入购物车 var ll =
document.getElementsByClassName('icon-gouwuche1'); for (var i=0;
i<ll.length;i++){ ll[i].click(); }


字段间分割线的样式实现


<div class="topbar-nav"> <a href="javascript:void(0)">小米商城</a> <span>|</span>
<a href="javascript:void(0)">MIUI</a> <span>|</span> <a
href="javascript:void(0)">IoT</a> <span>|</span> <a
href="javascript:void(0)">云服务</a> <span>|</span> <a
href="javascript:void(0)">金融</a> <span>|</span> <a
href="javascript:void(0)">有品</a> <span>|</span> <a
href="javascript:void(0)">小爱开放平台</a> <span>|</span> <a
href="javascript:void(0)">政企服务</a> <span>|</span> <a
href="javascript:void(0)">Select Region</a> </div>
搭建网站前的reset操作
html,body,p,h1,h2,h3,h4,h5,h6,form{ margin: 0; padding: 0; } a{ color: #333;
/*清除下划线*/ text-decoration: none; } img{ /*用于配合i标签使用*/
/*清除图片样式,多个img同行显示,方式为居中显示*/ border: none; vertical-align: middle; } ul{
/*清除列表的样式*/ list-style: none; margin: 0; padding: 0; } i{
/*i标签作为字体图片使用,使用em标签实现斜体*/ font-style: normal; vertical-align: middle; }
/*对表单标签进行reset操作*/ textarea{ /*不可手动调节文本窗口大小*/ resize: none; }
select,input,textarea,button{ /*清除外框,用于自定义的前置操作*/ outline: none;
vertical-align: middle; } button{ /*清除按钮样式,用于按钮样式自定义的前置操作*/
-webkit-appearance:none; padding: 0; margin: 0; }
鼠标悬浮出现浮框



- 购物车部分例子
<!--购物车结构--> <div class="topbar-cart"> <a href="javascript:void(0)"> <i
class="fa fa-shopping-cart"></i> 购物车 <span>(0)</span> </a> <div
class="topbar-cart-menu"> <div class="topbar-cart-txt">
<span>购物车中还没有商品,赶紧选购吧!</span> </div> </div> </div> /*wrap下 右侧购物车cart*/
.topbar-cart{ width: 120px; float: right; font: normal 12px/40px 'Arial';
background-color: #424242; /*辅助 topbar-cart-menu布局*/ position: relative; }
.topbar-cart:hover{ background-color: #fff; } .topbar-cart a{ display: block;
line-height: 40px; color: #b0b0b0; } .topbar-cart:hover a{ color: #ff6700; }
.topbar-cart i{ font-size: 20px; margin: 0 5px 0 20px; } /*控制位置层*/
.topbar-cart-menu{ width: 316px; /*相对于cart进行布局*/ position: absolute; top: 40px;
right: 0; /*显示的等级*/ z-index: 10; } /*控制高度(过渡效果)层*/ .topbar-cart-txt{ /*height:
100px;*/ background-color:#fff; text-align: center; line-height: 100px;
box-shadow: 0 3px 5px -3px rgba(0,0,0,0.7); /*没有高度,作为清浮动操作*/
/*存在高度,overflow只隐藏超出高度*/ height: 0; overflow: hidden; /*设置过渡动画*/ transition:
.1s; } .topbar-cart:hover .topbar-cart-txt{ height: 100px; }
- 重点步骤总结

* 祖盒和悬浮出现部分盒使用定位布局
* 祖盒position(布局)为 relative 辅助 隐藏部分的 absolute 布局
* 设定隐藏部分的样式
* 清浮动隐藏需要隐藏部分 
    height: 0;
    overflow: hidden;
* 可以适当设置过渡动画 transition: .1s;
块与块之间的分割线


/*所属块的右边框显示样式,并排除最后一个块显示*/ .header-item-child-wrap .goods:not(:last-child) img
{ border-right: 1px solid #ddd; }
块颜色的根据位置不同而不同


/*位置伪类,偶数位*/ .nav-list-details-li:nth-child(2n) { background-color: #eee; }
/*位置伪类,单数位*/ .nav-list-details-li:nth-child(2n - 1) { background-color: #ddd; }
悬浮上移+阴影


.ad-list a:hover{ /*上移,变大*/ transform: translateY(-1px) scale(1.02); /*阴影*/
box-shadow: 0 10px 30px -5px rgba(0,0,0,0.7) }