小米首页实践开发中遇到的问题及解决方法
1.菜单栏的指向小三角问题
解决方法：使用矩形边框绘制三角形，用CSS设置矩形内容为空、边框设置一定的宽度(三角形的高)，并且设置一个方向的边框颜色，其他方向颜色为透明。
<style type="text/css">
.triangle1{
/* 方法一 */
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid;
border-width:100px;
}
.triangle2
{
/* 方法二 */
position: absolute;
/* 内容为空，表示宽为0*/
content: '';
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid #f00;
border-bottom: 100px solid transparent;
}
.triangle3{
/* 空心三角形箭头 */
position: absolute;
content: '';
width: 100px;
height: 100px;
border-right: 2px solid #489374;
border-bottom: 2px solid #489374;
}
</style>
</head>
<body>
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</body>
2.引用bootstrap框架做轮播向左箭头的位置问题
解决方法：打开浏览器的开发者工具，选中需要调整的模块，调整到合适的位置。
<!-- 大的轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="图/轮播.jpg">
</div>
<div class="item">
<img src="图/轮播1.jpg">
</div>
<div class="item">
<img src="图/轮播2.jpg">
</div>
<div class="item">
<img src="图/轮播3.jpg">
</div>
<div class="item">
<img src="图/轮播4.jpg">
</div>
</div>
<a class="lefts left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div>
注：用bootstrap一定要先引入后使用
3.点击图片弹出视频，无法关闭音频问题
解决方法：先设置HTML中audio里src为空，给图片添加点击事件并设置视频地址，给关闭按钮添加点击清除地址，这样音频会随视频关闭。
$(".video_middle_img1").click(function(){
$(".pop-up_box").show();
$(".content").fadeIn("slow");
//添加视频地址
$(".video_stop").attr("src","视频/小米MIX.mp4");
});
$(".false1").click(function(){
$(".pop-up_box").hide();
$(".content").fadeOut("slow");
//删除视频地址
$(".video_stop").removeAttr("src");
});
注：同理使用jquery也要先引入后使用
谢谢你的浏览，如有问题，欢迎留言