CSS+HTML - 搭建小米商城首页 - 总结

目录

第三方字体样式

字段间分割线的样式实现

搭建网站前的reset操作

鼠标悬浮出现浮框

- 购物车部分例子

- 重点步骤总结

块与块之间的分割线

块颜色的根据位置不同而不同

悬浮上移+阴影

---

第三方字体样式

fontawesome - 字体库

扫描二维码关注公众号，回复： 3597727 查看本文章

iconfont - 字体库

在浏览器中按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;
}

- 重点步骤总结

1. 祖盒和悬浮出现部分盒使用定位布局
2. 祖盒position（布局）为 relative 辅助 隐藏部分的 absolute 布局
3. 设定隐藏部分的样式
4. 清浮动隐藏需要隐藏部分 
       height: 0;
       overflow: hidden;
5. 可以适当设置过渡动画 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)
}