企业公司门户网站首页设计（html+css静态实现，响应式布局，带源码）

发布时间：2024年01月22日

效果展示

在这里插入图片描述

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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="index.css" />
    <title>home_ch</title>
</head>

<body>
    <header>
        <div class="navbar">
            <div class="logo"><a href="#">Your company name or logo</a></div>
            <ul class="links">
                <li><a href="index">Home</a></li>
                <li><a href="services">services</a></li>
                <li><a href="team">Our Team</a></li>
                <li><a href="contact">Contact Us</a></li>
            </ul>
            <a href="#" class="action_btn">中文/English</a>
            <div class="toggle_btn">
                <i class="fa-solid fa-bars"></i>
            </div>
        </div>

        <div class="dropdown_menu">
            <li><a href="index">Home</a></li>
            <li><a href="services">services</a></li>
            <li><a href="team">Our Team</a></li>
            <li><a href="contact">Contact Us</a></li>
            <li><a href="#" class="action_btn">中文/English</a></li>
        </div>
    </header>
    <main>
        <section id="hero">
            <h1>Enable digital transformation for your enterprises</h1>
            <p>Excellence in quality, supremacy in win-win</p>
        </section>
    </main>
    <script>
        const toggleBtn = document.querySelector(".toggle_btn")
        const toggleBtnIcon = document.querySelector(".toggle_btn i")
        const dropDownMenu = document.querySelector(".dropdown_menu")

        toggleBtn.onclick = function () {
            dropDownMenu.classList.toggle("open")
            const isOpen = dropDownMenu.classList.contains('open')
            toggleBtnIcon.classList = isOpen
                ? 'fa-solid fa-xmark'
                : 'fa-solid fa-bars'
        }
    </script>
</body>

</html>

css源码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    height: 100vh;
    background-color: #000;
    background-image: url('https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1517&q=80');
    background-size: cover;
    background-position: center;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

a:hover {
    color: orange;
}

/* 导航栏 */
header {
    position: relative;
    padding: 0 2rem;
}

.navbar {
    width: 100%;
    height: 60px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar .links {
    display: flex;
    gap: 2rem;
}

.navbar .toggle_btn {
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

.action_btn {
    background-color: orange;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.action_btn:hover {
    scale: 1.05;
    color: #fff;
}

.action_btn:active {
    scale: 0.95;
}

/* 下拉式菜单 */
.dropdown_menu {
    display: none;
    position: absolute;
    right: 2rem;
    top: 60px;
    height: 0;
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open {
    height: 240px;
}


.dropdown_menu li {
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown_menu .action_btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 首页正文 */
section#index {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

#index h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* 响应式设计 */
@media(max-width: 992px) {

    .navbar .links,
    .navbar .action_btn {
        display: none;
    }

    .navbar .toggle_btn {
        display: block;
    }

    .dropdown_menu {
        display: block;
    }
}

@media(max-width: 576px) {
    .dropdown_menu {
        left: 2rem;
        width: unset;
    }
}

请注意，本设计和代码非作者原创，来自于https://www.bilibili.com/video/BV1Ss4y1n7DR/，建议问清原作者是否可商用等。

文章来源:https://blog.csdn.net/zhiaidaidai/article/details/135741144
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章