发表于： 2019-11-30 23:09:17
2 1002
今天完成的事情：
任务10
明天计划的事情：
任务11，css预处理语言
遇到的问题：
收获：
1.导航栏
思路
首先写底栏（灰色横杠），然后使用grid布局分割为四个，使用position:absolute设置1,2,3,4小圆点的位置，当前步骤更改颜色
HTML
<div class="nav">
<div class="nav-1">
<div class="long-1 n-link">
<div class="c-1 n-link">1</div>
</div>
<div class="long-1">
<div class="c-1">2</div>
</div>
<div class="long-1">
<div class="c-1">3</div>
</div>
<div class="long-1">
<div class="c-1">4</div>
</div>
</div>
<ul class="txt">
<li class="t-item t-link">1.定制纸箱</li>
<li class="t-item">2.选择数量</li>
<li class="t-item">3.上传附件</li>
<li class="t-item">4.确认下单</li>
</ul>
</div>
CSS
.nav {
display: grid;
grid-template-rows: 50px 1rem;
/* 分割导航栏和对应文字 */
align-items: center;
justify-items: flex-end;
height: 60px;
padding-right: 18vw;
margin-bottom: 5vh;
}
.nav-1 {
display: grid;
grid-template-columns: repeat(4,10vw);
/* 灰色横杠分割为四份，四个格子中放置对应div.long-1 */
justify-content: flex-start;
width: 40vw;
height: 5px;
border-radius: 2.5px;
background: #ccc;
}
.long-1 {
position: relative;
width: 10vw;
height: 5px;
border-radius: 2.5px;
}
.c-1 {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
/* 设置每个数字原点（被div.long-1包含）的位置——对应top、left 50%后，再设置自身反向移动自身50%的宽高，保证居于中心 */
width: 12.5px;
height: 12.5px;
border-radius: 50%;
font-size: .5rem;
text-align: center;
line-height: 12.5px;
color: white;
background: #ccc;
}
.n-link {
background: rgb(247,125,0);
}
.t-link {
color: rgb(247,125,0);
}
.txt {
display: grid;
grid-template-columns: repeat(4,10vw);
justify-items: center;
align-items: center;
color: #999;
}
2.修改表单样式
单选框
思路
设置原本的input display：none；然后利用::after、::before 伪元素选择器制造label前后的元素，设置样式。
HTML
<input type="radio" name="box-type" value="type-1" id="type-1">
<label for="type-1">对口箱</label>
<!-- 在本处给input使用了id，当label标签的for属性与input的id相同时，二者就被连接起来，选中label即选中该input -->
CSS
/* 单选框 */
label {
position: relative;
/* 这里设置label position为relative，是因为使用::after、::before 伪元素选择器制造的元素父元素默认是label元素，而后续选择器制造的元素采用position：absolute定位，这样可以使它们相对各自的label定位 */
display: flex;
align-items: center;
margin-right: 0.625rem;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
/* input[type="radio"]选择器 给元素加上了属性值的限定 */
label::before {
/* 伪元素选择器before，在元素之前创建一个元素 */
display: inline-block;
content: "";
/* content: ""; 这个元素的内容为空 */
width: 0.8125rem;
height: 0.8125rem;
border-radius: 50%;
border: 1px solid rgb(17,119,219);
margin-right: 5px;
/* 设定该元素样式：一个蓝色圆环 */
}
input[type="radio"]:checked+label::before {
background: rgb(17,119,219);
}
/* input[type="radio"]:checked+label::before
当input被选中时(:checked)，他的第一个兄弟元素(element+)的before元素被选择 */
/*兄弟选择器中，h1+p 是指选择h1的兄弟元素中第一个p元素 */
/*兄弟选择器中，h1~p 是指选择h1的兄弟元素中所有p元素 */
input[type="radio"]:checked+label::after {
position: absolute;
top: 50%;
left: 0.3rem;
transform: translateY(-50%);
display: inline-block;
content: "";
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
background: #fff;
}
/*after创建的元素被设定为小白点，处于圆环中心 */
下拉列表
HTML
<div class="select">
<select name="more">
<option>查看详情</option>
<option>对口箱</option>
<option>飞机盒</option>
</select>
<div class="select-1"></div>
<div class="select-2"></div> <!--图标，通过绝对定位定位-->
</div>
CSS
/* 下拉列表 */
select {
width: 100px;
height: 1.5625rem;
border: #CCC solid 1px;
padding-left: 10px;
color: #999;
}
.select {
position: relative;
}
.select-1 {
position: absolute;
top: 50%;
right: 3px;
transform: translateY(-50%);
display: inline-block;
width: 15px;
height: 15px;
border-radius: 2px;
background: rgb(17,119,219);
pointer-events: none;
/* pointer-events: none;设定元素的作用，当我们不设置这个值的时候，点击下拉列表框上自己写的按钮，不会出现下拉框，当设置其为none时，自写按钮就只起到图标的作用，点击和点击下拉框的其他地方效果相同 */
}
.select-2 {
position: absolute;
top: 50%;
right: 5.5px;
transform: translateY(-50%);
widows: 0;
height: 0;
border-top: solid 7px #fff;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
pointer-events: none;
}
3.纯css响应式导航栏
只有这个地方需要使用boostrap，所以干脆放弃框架，使用css写
思路
当width小到一定程度后，汉堡按钮出现，主要使用二者的hover效果来达成
HTML
<div class="header">
<div class="icon">
<div class="icon-1"></div>
<div class="icon-2"></div>
<div class="icon-3"></div>
</div>
<!--汉堡按钮-->
<ul class="list">
<li><button class="list-1 link-1">首页</button></li>
<li><button class="list-1">在线定制</button></li>
<li><button class="list-1">标准箱</button></li>
<li><button class="list-1 list-11">品质保障</button></li>
</ul>
</div>
CSS
@media screen and (max-width: 400px) {
.list {
display: none;
}
.list li {
width: 100%;
}
.list .list-1 {
width: 100%;
height: 25px;
border-radius: 0;
border: none;
background: rgb(240,240,240);
}
.list .list-1:hover {
color: #fff;
background: #ccc;
}
.link-1 {
color: #000;
}
/* 修改div.list display为none后，设置对应小宽度样式 */
.header {
position: absolute;
width: 100%;
height: 100px;
}
.icon {
position: absolute;
top: 10px;
right: 15px;
width: 40px;
height: 30px;
border-radius: 5px;
border: solid 3px #fff;
cursor: pointer;
}
.icon-1,
.icon-2,
.icon-3 {
position: absolute;
right: 7px;
width: 20px;
border-bottom: solid 3px #fff;
}
.icon-1 {
top: 4px;
}
.icon-2 {
top: 11px;
}
.icon-3 {
top: 18px;
}
/* 设置汉堡按钮图标 */
.icon:hover+.list {
position: absolute;
top: 40px;
z-index: 2;
display: flex;
flex-direction: column;
width: 100vw;
height: 100px;
padding: 0;
}
/* 同样是兄弟选择器的效果，这两个样式相同，在按钮:hover后列表出现，同时当列表:hover后列表也是同样样式，设置列表和按钮无距离紧贴着，那么就可以达成下拉导航的效果 */
.list:hover {
position: absolute;
top: 40px;
z-index: 2;
display: flex;
flex-direction: column;
width: 100vw;
height: 100px;
padding: 0;
}
}
返回列表
评论