会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132433个问题
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解(旧) 17071楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="icon" href="小米images/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/mi.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="小米images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航部分开始-->
<div class="black-nav">
    <div class="black-nav-left">
        <ul>
            <li>
                <a href="#">小米商城</a>
            </li>
            <li>
                <a href="#">MIUI</a>
            </li>
            <li>
                <a href="#">loT</a>
            </li>
            <li>
                <a href="#">云服务</a>
            </li>
            <li>
                <a href="#">天星数科</a>
            </li>
            <li>
                <a href="#">有品</a>
            </li>
            <li>
                <a href="#">小爱开发平台</a>
            </li>
            <li>
                <a href="#">企业团购</a>
            </li>
            <li>
                <a href="#">资质证照</a>
            </li>
            <li>
                <a href="#">协议规则</a>
            </li>
            <li>
                <a href="#">下载app</a>
            </li>
            <li>
                <a href="#">智能生活</a>
            </li>
            <li>
                <a href="#">select Location</a>
            </li>
        </ul>
    </div>
    <div class="black-nav-right">
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">
                <img src="小米images/692a6c3b0a93a24f74a29c0f9d68ec71.png" alt="">购物车</a>
                <div class="cart-list">
                </div>
            </li>
        </ul>
    </div>
</div>
<!--黑色导航部分结束-->
</body>
</html>
/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    background: red;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*头部样式结束*/
/*黑色导航开始*/
.black-nav{
    width: 100%;
    height: 40px;
    background:#b0b0b0;
}
.black-nav-left{
    margin-left: 100px;
    width: 789px;
}
.black-nav-right{
    margin-left: 100px;
    height: 40px;
    position: relative;
}
.black-nav-left a,.black-nav-right a{
    color: white;
    float: left;
    font-size: 12px;
    padding: 3px;
    line-height: 40px;
}
.black-nav-right img {
    height: 40px;
}
a:hover{
    color: deepskyblue;
}
.cart-list{
    width: 316px;
    height: 78px;
    background: deeppink;
    position: absolute;
    top: 40px;
    left:660px;
    display: none;
}
.black-nav-right li:hover>.cart-list{
    display: block;
}
/*黑色导航结束*/

现在我的鼠标放到第一个列表上的时候,为什么字体颜色不变成蓝色了呢

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 17072楼
Python 全系列/第二阶段:Python 深入与提高/GUI编程(隐藏) 17073楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="icon" href="小米images/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/mi.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="小米images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航部分开始-->
<div class="black-nav">
    <div class="black-nav-left">
        <ul>
            <li>
                <a href="#">小米商城</a>
            </li>
            <li>
                <a href="#">MIUI</a>
            </li>
            <li>
                <a href="#">loT</a>
            </li>
            <li>
                <a href="#">云服务</a>
            </li>
            <li>
                <a href="#">天星数科</a>
            </li>
            <li>
                <a href="#">有品</a>
            </li>
            <li>
                <a href="#">小爱开发平台</a>
            </li>
            <li>
                <a href="#">企业团购</a>
            </li>
            <li>
                <a href="#">资质证照</a>
            </li>
            <li>
                <a href="#">协议规则</a>
            </li>
            <li>
                <a href="#">下载app</a>
            </li>
            <li>
                <a href="#">智能生活</a>
            </li>
            <li>
                <a href="#">select Location</a>
            </li>
        </ul>
    </div>
    <div class="black-nav-right">
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">
                <img src="小米images/692a6c3b0a93a24f74a29c0f9d68ec71.png" alt="">购物车</a></li>
        </ul>
    </div>

</div>
<!--黑色导航部分结束-->
</body>
</html>
/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    background: red;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*头部样式结束*/
/*黑色导航开始*/
.black-nav{
    width: 100%;
    height: 40px;
    background:#b0b0b0;
}
.black-nav-left{
    margin-left: 100px;
    width: 789px;
}
.black-nav-right{
    margin-left: 100px;
    height: 40px;
}
.black-nav-left a,.black-nav-right a{
    color: white;
    float: left;
    font-size: 12px;
    padding: 3px;
    line-height: 40px;
}
.black-nav-right img {
    height: 40px;
}
a:hover{
    color: deepskyblue;
}
/*黑色导航结束*/

为什么我在购物车前面加了图片,购物车三个字就不能垂直居中了

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 17076楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="icon" href="小米images/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/mi.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="小米images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航部分开始-->
<div class="black-nav">
    <div class="black-nav-left">
        <ul>
            <li>
                <a href="#">小米商城</a>
            </li>
            <li>
                <a href="#">MIUI</a>
            </li>
            <li>
                <a href="#">loT</a>
            </li>
            <li>
                <a href="#">云服务</a>
            </li>
            <li>
                <a href="#">天星数科</a>
            </li>
            <li>
                <a href="#">有品</a>
            </li>
            <li>
                <a href="#">小爱开发平台</a>
            </li>
            <li>
                <a href="#">企业团购</a>
            </li>
            <li>
                <a href="#">资质证照</a>
            </li>
            <li>
                <a href="#">协议规则</a>
            </li>
            <li>
                <a href="#">下载app</a>
            </li>
            <li>
                <a href="#">智能生活</a>
            </li>
            <li>
                <a href="#">select Location</a>
            </li>
        </ul>
    </div>
    <div class="black-nav-right">
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">购物车</a></li>
        </ul>
    </div>

</div>
<!--黑色导航部分结束-->
</body>
</html>
/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    background: red;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*头部样式结束*/
/*黑色导航开始*/
.black-nav{
    width: 100%;
    height: 40px;
    background:#b0b0b0;
}
.black-nav-left{
    margin-left: 100px;
    width: 789px;
}
.black-nav-right{
    margin-left: 100px;
}
.black-nav-left a,.black-nav-right a{
    color: white;
    float: left;
    font-size: 12px;
    padding: 3px;
    line-height: 40px;
}
/*黑色导航结束*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}

为什么注册登录哪里设置了margin-left但是没有生效呢

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 17077楼
Python 全系列/第四阶段:函数式编程和核心特性/生成器和装饰器 17080楼
Python 全系列/第十九阶段:数据分析-数据管理/numpy 17082楼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
   
    <style>
        .top{
            width:100%;
            height:100px;
            border:1px solid red;
            float: left;
            text-align:right;
        }
        .top_a{
            color:gray;
            font-size:12px;
            text-decoration:none;
        }
        a:hover{
            color:red;
            text-decoration:underline;
        }
        .tips{
            width:100%;
            height:40px;
            border:1px dotted indianred;
            background-color: pink;
            text-align:center;
            line-height:40x;
        }
        .center{
            width:100%;
            height:500px;
            background-image:url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
            background-repeat:no-repeat;
            background-position:center;
            background-color: rgba(255,0,0,.5);
        }
    </style>
   
</head>
<body>
    <div class="top">
        <a href="" class="top_a">登录界面,调查问卷</a>
    </div>
    <div class="tips">

        <span>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!</span>

    </div>
    <div class="center"></div>
</body>
</html>

图片.png

Python 全系列/第七阶段:网页编程基础/CSS 样式 17084楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 17085楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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