⼩⽶商城HTMLCSS项⽬练习⼩⽶商城HTML/CSS练习
前期准备
引⼊reset.css重置样式表，all.css图标字体，base.css公共样式表。
创建index.html以及与其名称相同的index.css。
根据经验，固定容器宽度，以免屏幕过⼤不实⽤。
给body添加min-width以免窗⼝过⼩发⽣溢出。
先确定结构（html），再具体编写样式。css设置文字垂直居中
过程中需要注意的点
向右浮动，顺序会反向。
⽂字垂直居中：
line-height：height;
容器中所有元素浮动会造成⾼度塌陷，解决⽅法：clearfix。
⽂字⽔平居中
text-align：center;
⽔平居中：通过计算设置margin。
⼦元素会从⽗元素继承⼀些不需要的性质，需要重设。
制作⼩三⾓：
利⽤伪元素
.triangle::after{
content:'';
width: 0;
height: 0;
/
* 设置四个⽅向的边框 */
border:6px solid transparent;
/* 去除上边框 */
border-top:none;
/* 设置下边框 */
border-bottom-color: #fff;
}
伪元素设置hover格式:
classa:honver::after
过渡效果：通过transition⾼度改变。 当height为auto时，transiton⽆效。
transition: height 0.3s;
隐藏logo中的⽂本
text-indent: -9999px;
⿏标移⼊，图⽚横向切换。
通过切换偏移量。
.header .logo{
position: relative;
float: left;
width: 55px;
height: 55px;
/* 隐藏home */
overflow: hidden;
/
* 隐藏logo中的⽂本 */
text-indent: -9999px;
}
.header .logo a{
position: absolute;
width: 55px;
height: 55px;
background-color: #ff6700;
background-image:url(../img/mi-logo.png); background-position: center;
/* transition对auto⽆效 */
left: 0px;
transition: left 0.3s;
}
.header .logo .home{
left: -55px;
background-image:url(../img/mi-home.png);
}
.header .logo:hover .mi{
left: 55px;
}
.header .logo:hover .home{
left: 0px;
}
移⼊a⼀定范围内hover：
a{
display:block;
}
弹出层：绑定li使得⿏标切换弹出层依旧在。
.nav .goods-info{
position: absolute;
/* 参照其包含块 */
width: 100%;
height: 0px;
/
* 达到隐藏效果 */
overflow: hidden;
background-color: #fff;
top:100px;
left: 0px;
transition: height 0.3s;
z-index: 9999;
}
.nav .show-goods:hover ~ .goods-info,
.nav .goods-info:hover{
height: 228px;
border-top: 1px solid rgb(224,224,224);
box-shadow: 0 5px 3px rgba(0,0,0,0.2);
}
搜索框
1. 按钮设置的是border-box：h和w设置的不是内容区⼤⼩⽽是总⼤⼩。
2. input获取焦点（:focus）后。
<!-- 创建搜索框容器 -->
<div class="search-wrapper">
<form action="#" class="search">
<!-- input和button属于⾏内块元素会出现空格 -->
<input type="text" class="search-inp">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
.search-wrapper .search-inp{
box-sizing: border-box;
float: left;
/* 去掉默认padding */
padding:0 10px;
border:none;
height: 50px;
width: 244px;
border: 1px solid rgb(224,224,224);
}
/* 设置input获取焦点后 */
.search-wrapper .search-inp:focus{
outline: none;
border-color: #ff6700;
}
.search-wrapper .search-inp:focus + .search-btn{
border-color: #ff6700;
}
.search-wrapper .search-btn{
float: left;
height: 50px;
width: 52px;
padding:0;
border: none;
background-color: #fff;
color:#616161;
font-size: 16px;
border: 1px solid rgb(224,224,224);
border-left: none;
}
.search-wrapper .search-btn:hover{
background-color: #ff6700;
color:#fff;
border:none;
}
⼯具条：粘滞定位
.back-top{
width: 26px;
height: 206px;
background-color: orange;
position: fixed;
bottom: 60px;
right: 50%;
margin-right: -639px;
}
right固定，left为auto。改变margin-left⽆法改变位置，因为left会⾃动改变。
设置⽹站图标。（⼀般存储在⽹站根⽬录下，叫做favicon.ico）。
<link rel="icon" href="./favicon.ico">
压缩项⽬代码，以加快速度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。