今天完成的事
1.依照师兄的建议 采用任务8的效果图作为原型效果图
2.拆解任务8的轮播图架构与样式，并加入HTML文件中
<div id="slidershow"
class="carousel slide div2"
data-ride="carousel">
<!-- /*设置图片轮播的顺序*/-->
<ol class="carousel-indicators hidden-xs">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- /*设置轮播图片*/-->
<div class="item active">
<a href="##"><img src="image1.png"></a>
<!-- /*设置轮播图的标题与文字内容*/-->
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item">
<a href="##"><img src="image2.png"></a>
</div>
<div class="item">
<a href="##"><img src="image3.png"></a>
</div>
</div>
<!-- /*设置轮播图片控制器*/-->
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
3.不使用bootstrap的图片转而使用自己编写的伪元素来实现左右两个大箭头图形效果
.content {
content: "" !important;
display: block;
position: relative;
border: 4px solid white;
}
.banner {
margin-top: 0 ;
.glyphicon-chevron-right::before {
.content ;
transform: rotate(45deg);
}
.glyphicon-chevron-right::after {
.content ;
transform: rotate(-45deg);
top: 8px;
}
.glyphicon-chevron-left::before {
.content ;
transform: rotate(-45deg);
}
.glyphicon-chevron-left::after {
.content ;
transform: rotate(45deg);
top: 8px;
}
}
4.后面在缩小时发现轮播图在移动端效果下会随着屏幕宽度的减少而向下移动 同时左右箭头按钮的伪元素效果也变形
5.给导航栏在移动端下添加了一些栅格系统的宽度样式 使其在移动端达到了正常效果
@media only screen and (max-width: 430px) {
.tel-word {
display: none !important;
}
}/*使电话号码部分在屏幕宽度小于430px以下时display为none*/
6检查后发现隐藏的导航栏在移动端状态下会显现并挤压到轮播图的位置使其下移
明天的计划
1.调整移动端隐藏导航栏的样式 使其不与轮播图位置冲突
2.拆解出主体部分的架构与样式
3.完成任务14
遇到的问题
1.轮播图使用以前任务8的版本 而刚开始使用的是官网bootstrap的css
使用不同版本的bootstrap 导致轮播图不能自动轮播
后面将任务8中引用的js与jQuery引入之后解决
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
现在对于有关于JS的知识还没有接触 得继续加油
今天的收获
1.通过组件化的方式，不同时候、不同来源、不同人编写的组件都能使用在同一个文件里并且有效的组合
大大提高了效率
2.学到了CSS3的calc功能
clac（）用来计算指定长度 宽与高都可以使用
元素可以通过百分比、px等单位定义高宽，而calc()可以通过计算得出高宽。如下：
width: calc(100% - 10px);
- 可以使用”+”、”-“、”*”、”/”运算符进行运算
- 可以混合使用百分比、em、px、rem等单位进行计算
- 注意运算符前后使用空格
css3的calc()实现自适应布局
https://blog.csdn.net/r1283/article/details/50433931
返回列表
评论