Web前端项目之小米SU7官网制作

少年与梦JG

已于 2024-06-05 10:16:37 修改

阅读量1.7k

点赞数 11

文章标签：前端 html javascript css

于 2024-06-04 18:51:51 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79824834/article/details/139396359

版权

在经历了Web前端的一系列学习之后，想做一个网站来总结这段时间对前端的学习，于是想了个小米汽车主题，只展示部分重点代码，想看完整效果的我发布有视频，首页效果图如下：

下拉菜单栏的代码如下：

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xiaomi automobile</title>
</head>
<link rel="stylesheet" href="css\chencss\chenshouye.css">

<body vlink="white" alink="white" onload="init()">
    <div class="one" style="position:relative;">
        <div class="jpg1" style="position:absolute;z-index:2;"><img src="chenimg\小米.png" alt=""></div>
        <div class="container">
            <ul class="dropdown">
                <li>
                    <a href="xiaomi automobile.html">首页</a>
                </li>
                <li>
                    <a href="xiaomi automobile.html">小米SU7</a>
                    <ol>
                        <li><a href="xiaomiSU7 Original edition.html">小米SU7创始版</a></li>
                        <li><a href="Model comparison.html">车型对比</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">核心技术</a>
                    <ol>
                        <li><a href="dainJi.html">超级电机</a></li>
                        <li><a href="gaoYa.html">高压平台</a></li>
                        <li><a href="chaoJi.html">超级大压铸</a></li>
                    </ol>
                </li>
                <li>
                    <a href="xiaomiqichegongchang.html">小米汽车工厂</a>
                </li>
                <li>
                    <a href="mendianfenbu.html">门店分布</a>
                </li>
                <li>
                    <a href="#">服务介绍</a>
                    <ol>
                        <li><a href="fuwubaozhang.html">服务保障</a></li>
                        <li><a href="chodianbunneng.html">充电补能</a></li>
                        <li><a href="jinrongshisuan.html">金融试算</a></li>
                    </ol>
                </li>
                <li>
                    <a href="login.html">登录</a>
                </li>
                <div class="zhuce">
                <li>
                    <a href="regurition.html">注册</a>
                </li>
                </div>
            </ul>
        </div>
    </div>

CSS部分：

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}
.one {
    width: 100%;
    height: 80px;
    background-color: #2B363C;
    z-index: 999;
}

.container {
    width: 800px;
    height: 80px;
    margin-left: 320px;
}

.jpg1 {
    float: left;
}

ul {
    list-style: none;
}

* {
    margin: 0;
    padding: 0;

}

.one {
    width: 100%;
    height: 80px;
    background-color: #2B363C;
    z-index: 999;
}

.container {
    width: 800px;
    height: 80px;
    margin: 0 auto;
}

.jpg1 {
    float: left;
}

ul {
    list-style: none;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
ol {
    list-style: none;
}

.dropdown {
    width: 1200px;
    height: 80px;
    background-color: #2B363C;
}

.dropdown>li {
    width: 150px;
    height: 50px;
    float: left;
    line-height: 80px;
    text-align: center;
}
.zhuce{
    position: absolute;
    margin-left: 1030px;
    margin-top: 27.3px;
}

a {
    color: white;
    font-size: 20px;
    text-decoration-line: none;
}

ol {
    background-color: #2c2e2f;
    display: none;
}

.dropdown>li:hover>ol {
    display: block;
    opacity: 0.7;
}

ol>li:hover {
    background-color: #273137;
}

下拉菜单就是运用简单的div标签的class属性，将其当成一个盒子，灵活运用ul和ol的性质，运用CSS的知识来使其能够下拉等。

轮播部分代码如下：

CSS部分：

.box {
    width: 100%;
    height: 260px;

最低0.47元/天解锁文章