软件2班20240418






html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./mycss.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav wrapper ">
        <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>


    </div>
    <div class="banner wrapper">
        <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>


    </div>
 


</body>
</html>
css 复制代码
/* body{
    background-color: aqua;
} */
/* 去掉  内外边距   盒子自应*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 盒子宽度自适应 */
}
/*去掉  链接    下划线 */
a{
    text-decoration: none;
}
/* 去掉无序列表   黑点 */
li{
    list-style: none;
  

}
/* 定版心 */
.wrapper{
    width: 1200px;
    margin: 0 auto;



}
.nav{
    height: 80px;
    /* background-color: pink; */


}
/* 利用  浮动针对性   处理 块级标签 */
.nav li{
    float: left;
    overflow: hidden;
    /* 清除浮动影响 */
    width: 220px;
    height: 80px;
    /* background-color: aqua; */
    margin-right: 25px;
    text-align: center;
    line-height: 80px;
    font-size: 28px;

}
/* 后代选择器  空格 隔开 */
.nav li:nth-child(n+5){
    /* background-color: yellow; */
    margin-right: 0;
}
.nav li a{
    color: #333333;
}
.nav li a:hover{
    color: red;
} 

.banner{
    /* height: 700px; */
    background-color: pink;
    border-top: #d33535;
    border-width: 1px;
}
.banner li{
    float:left;
    overflow: hidden;
    width: 220px;
    height: 180px;
    /* background-color: ; */
    /* background-color: aqua; */
    margin-right: 25px;
    
}
.banner li:nth-child(n+5){
    margin-right: 0;
}
/* .banner li a{
    margin-top: 120px;
} */
相关推荐
好_快19 分钟前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快20 分钟前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快21 分钟前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel33 分钟前
webpack 核心编译器 十四 节
前端
excel40 分钟前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy12 小时前
macOS 命令行 原生挂载 webdav 方法
前端