欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

小米首页实践开发中遇到的问题及解决方法

程序员文章站 2022-06-04 14:33:11
...

小米首页实践开发中遇到的问题及解决方法

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也要先引入后使用

谢谢你的浏览，如有问题，欢迎留言

上一篇： 初学python和机器学习，想知道怎样才能达到自己独立编写程序的能力？

下一篇： 15个常用的javaScript正则表达式

推荐阅读