会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132384个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
  <!-- 外部引入,首选 rel为icon左上角网页图标,icon一般是16*16像素-->
    <link rel="icon" href="images/favicon.ico">
    <!--外部引入,href里全局样式-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mi1.css">
</head>
<body>

<!--

准备工作:
1)css样式提前存好,备调用
2)页面图片下载
首先用火狐浏览器下载页面全部图片,方法:浏览器页面找空白的地方-&#45;&#45;右击查看页面信息-&#45;&#45;找标签-&#45;&#45;媒体-&#45;&#45;全选-&#45;&#45;另存为-&#45;&#45;
-->


<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航开始-->
<div class="black-nav">
    <div class="wrap">
        <!--左侧的无序列表-->
        <ul class="black-nav-left">
            <li><a href="#">小米商城</a><span>|</span></li>
            <li><a href="#">MIUI</a><span>|</span></li>
            <li><a href="#">loT</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">天星数科</a><span>|</span></li>
            <li><a href="#">有品</a><span>|</span></li>
            <li><a href="#">小爱开放平台</a><span>|</span></li>
            <li><a href="#">企业团购</a><span>|</span></li>
            <li><a href="#">资质证照</a><span>|</span></li>
            <li><a href="#">协议规则</a><span>|</span></li>
            <li>
                <a href="#">下载APP</a><span>|</span>
                <div class="download">
                    <img src="images/download.png" alt="">
                    <p>小米商城APP</p>
                </div>
                <div class="stri"></div>
            </li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">SelectLocation</a></li>
        </ul>
        <!--右侧的无序列表-->
        <ul class="black-nav-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a></li>
            <!--cart是购物车-->
            <li class="cart">
                <a href="#">购物车(0)</a>
                <div class="cart-list">
                    购物车中还没有商品,赶紧选购吧!

                </div>
            </li>
        </ul>

    </div>

</div>

<!--黑色导航结束-->
</body>
</html>
/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    /*background-color: red ;*/
    /*溢出部分隐藏掉*/
    overflow: hidden;
    position: relative;
}
.header img{
    /*只设置高度,宽度等比例缩放*/
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
/*头部样式结束*/

/*黑色导航样式开始*/
.black-nav{
    width: 100%;
    height: 40px;
    line-height: 40%;
    background-color:#333 ;
    color:#b0b0b0;
    font-size: 12px;
}
.wrap{
    width: 1226px;
    margin: 0 auto;
}
.black-nav-left{
    float: left;
}
/*整个容器右浮*/
.black-nav-right{
    float: right;
}
.black-nav li{
    float: left;
    /*是相对于download的父元素进行定位*/
    position: relative;
}
.black-nav a{
    color: #b0b0b0;
}
.black-nav a:hover{
    color: #fff;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    position: relative;
}
.cart:hover{
    background-color: #fff;
}
.cart:hover a{
    color: #ff6700;
}
.cart-list{
    width: 316px;
    height: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0;
    top: 40px;
    color: #424242;
   /* 隐藏溢出的文字*/
    overflow: hidden;
    transition: all .3s ;

}
/*鼠标悬停在cart,指向cart-list显示*/
.cart:hover>.cart-list{
    height: 100px;
    /*一行文字垂直居中,行高等于高*/
    line-height: 100px;

}
/*下载APP*/
.download{
    width: 124px;
    /*本身是设置了高度,因为需要实现文字溢出隐藏,故先把高度变为0*/
    height: 0;
    background-color: #fff;
    box-shadow: 0 1px 5px #aaa;
   /* 为了下载APP不自动撑开父元素宽度,进行绝对定位*/
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
    /*高度设置为0后,设置文字溢出部分隐藏*/
    overflow: hidden;
    transition: all .3s;
    position: relative;

}
.download>img{
    width: 90px;
    margin:18px auto 12px ;
}
.download>p{
    color: #333;
    font-size: 14px;
    line-height: 14px;
}
.black-nav-left>li:hover>.download{
    height: 148px;

}
.stri{
    /*绘制下三角形*/
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left:8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    /*元素隐藏*/
    display: none;
}
.black-nav-left>li:hover>.stri{
    display: block;
}
/*黑色导航样式结束*/


WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 17941楼
JAVA 全系列/(旧的隐藏)第二十一阶段:百战商城项目(Spring Cloud最新架构)/百战商城项目 17942楼
JAVA 全系列/(旧的隐藏)第二十一阶段:百战商城项目(Spring Cloud最新架构)/百战商城项目 17945楼
JAVA 全系列/(隐藏)第二十三阶段:数字货币交易所项目/服务中台_后台管理系统的开发 17948楼
JAVA 全系列/(隐藏)第二十三阶段:数字货币交易所项目/服务中台_后台管理系统的开发 17949楼

1.pn

为什么我填写的数值是5,下面实现的是6

2.png


Python 全系列/第一阶段:Python入门/控制语句 17952楼
JAVA 全系列/第八阶段:Linux入门到实战/Git 17953楼
JAVA 全系列/第一阶段:JAVA 快速入门/控制语句、方法、递归算法 17955楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637