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

发布时间：2024年01月23日

效果

在这里插入图片描述

代码

contact.html

注意的ak后面的参数要换成自己的百度地图ak参数。

<!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" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=xxxx"></script>
    <link rel="stylesheet" href="contact.css" />
    <link rel="stylesheet" href="navbar.css" />
    <title>contact_ch</title>
</head>

<body>
    <header>
        <div include-html="navbar_eng.html"></div>
        <script src="navbar.js"></script>
    </header>

    <main>
        <section class="contact">
            <div class="content">
                <h2>Contact Us</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi esse aliquam ea quidem, consequatur commodi nam deleniti! Consequatur pariatur itaque perspiciatis blanditiis laboriosam harum molestiae doloremque rerum cum fuga. Harum?</p>
            </div>
            <div class="container">
                <div class="contactInfo">
                    <div class="box">
                        <div class="icon">
                            <i class="fa-solid fa-location-dot"></i>
                        </div>
                        <div class="text">
                            <h3>地址</h3>
                            <p>xxxx</p>
                        </div>
                    </div>

                    <div class="box">
                        <div class="icon">
                            <i class="fa fa-phone" aria-hidden="true"></i>
                        </div>
                        <div class="text">
                            <h3>电话</h3>
                            <p>86-xxxx</p>
                        </div>
                    </div>

                    <div class="box">
                        <div class="icon">
                            <i class="fa-solid fa-envelope"></i>
                        </div>
                        <div class="text">
                            <h3>邮箱</h3>
                            <p>xxxx@qq.com</p>
                        </div>
                    </div>
                </div>
                <!-- 在页面中创建一个div来显示地图 -->
                <div id="map">
                    <script>
                        // 在页面加载完成后初始化地图
                        window.onload = function () {
                            // 创建地图实例
                            var map = new BMap.Map("map");
                            // 设置地图中心点和缩放级别
                            map.centerAndZoom(new BMap.Point(113.948935, 22.535662), 15);
                            // 在地图上添加标记
                            var marker = new BMap.Marker(new BMap.Point(113.948935, 22.535662));
                            map.addOverlay(marker);
                        }
                    </script>
                </div>
            </div>
        </section>
    </main>

</body>


</html>

navbar_eng.html

<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>

contact.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 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;
}

.contact {
    position: relative;
    min-height: 100vh;
    padding: 50px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-size: cover;
}

.contact .content {
    max-width: 800px;
    text-align: center;
}

.contact .content h2 {
    font-size: 36px;
    font-weight: 500;
    color: #fff;
}

.contact .content p {
    font-weight: 300;
    color: #fff;
}

.container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.container .contactInfo {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.container .contactInfo .box {
    position: relative;
    padding: 20px 0;
    display: flex;
}

.container .contactInfo .box .icon {
    min-width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 22px;
}

.container .contactInfo .box .text {
    display: flex;
    margin-left: 20px;
    font-size: 16px;
    color: #fff;
    flex-direction: column;
}

.container .contactInfo .box .text h3 {
    font-weight: 500;
    color: #00bcd4;
}

#map {
    width: 40%;
    height: 400px;
    background: #fff;
}

@media(max-width: 991px) {
    .contact {
        padding: 50px;
    }

    .container {
        flex-direction: column;
    }

    .container .contactInfo {
        margin-bottom: 40px;
    }

    .container .contactInfo #map {
        width: 100%;
    }
}

navbar.css

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

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;
}

注意以上代码大部分源自https://www.bilibili.com/video/BV1TY4y1B7F8/，如有商用等行为，请先联系原作者。

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