会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132376个问题
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 7846楼

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            position: relative;
            text-align: center;
        }

        .nav ul {
            overflow: hidden;
            clear: both;
        }

        .nav ul li {
            list-style: none;
            float: left;
            padding: 25px 30px;
        }
        .nav ul li a {
            color: #333;
            text-decoration: none;
            font-size: 25px;
        }

        .nav-list {
            width: 100%;
            height: 300px;
            position: absolute;
            left: 0;
            display: none;
        }
        .nav li:hover>.nav-list {
            display: block;
        }
        .nav li:hover>a {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">手机</a>
                <div class="nav-list" style="background-color:skyblue";></div>
            </li>
            <li>
                <a href="#">平板</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">配件</a>
                <div class="nav-list"  style="background-color:skyblue";></div>
            </li>
            <li>
                <a href="#">服务器</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">下载</a>
                <div class="nav-list"  style="background-color:skyblue";></div>
            </li>
        </ul>
    </div>

image.png


WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 7847楼

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background-color: #666;
        }

        .nav ul {
            width: 1000px;
            margin: 0 auto;
        }

        .nav ul li {
            list-style: none;
            float: left;
            padding: 0 20px;
        }
       
        .nav ul::after {
            content: "";
            margin: 0 auto;
            display: block;
            clear: both;
        }
        .nav ul li a {
            text-decoration: none;
            font-size: 20px;
            color: #b0b0b0;

        }

        .nav ul li:hover {
            background-color: #222;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <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>
        </ul>
        <p>hahah</p>
    </div>
</body>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 7848楼
WEB前端全系列/第五阶段:前后端交互/服务器 7850楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/常用类 7851楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 7853楼
WEB前端全系列/第二阶段:JavaScript编程模块/算法与数据 7854楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 7856楼
WEB前端全系列/第十阶段:Nodejs编程模块/Node.js基础 7857楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Spring旧 7858楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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