• 日期: 2026-08-28
  • 标签: 常规
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机端网站模板 - 响应式设计，包含导航、幻灯片、图片列表等</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
<pre><code>    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    nav {
        background-color: #333;
        overflow: hidden;
    }

    nav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .active {
        background-color: #4CAF50;
    }

    .header {
        text-align: center;
        padding: 50px;
        background-image: url('https://via.placeholder.com/800x400');
        background-size: cover;
        background-position: center;
        color: #fff;
    }

    .slider {
        position: relative;
        height: 400px;
    }

    .slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider .prev, .slider .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        transition: opacity 0.3s ease-in-out;
    }

    .slider .prev:hover, .slider .next:hover {
        opacity: 0.7;
    }

    .slider .prev {
        left: 20px;
    }

    .slider .next {
        right: 20px;
    }

    .slider .dots {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    .slider .dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #bbb;
        margin: 0 5px;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
    }

    .slider .dots span.active {
        background-color: #555;
    }

    .image-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px;
    }

    .image-list .item {
        width: 30%;
        margin-bottom: 20px;
        position: relative;
    }

    .image-list .item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .image-list .item .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: 10px;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .image-list .item:hover .overlay {
        opacity: 1;
    }

    .image-list .item .overlay h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .services {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: #f2f2f2;
    }

    .services .item {
        width: 30%;
        text-align: center;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
    }

    .services .item:hover {
        transform: scale(1.05);
    }

    .services .item img {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }

    .services .item h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .news {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px;
    }

    .news .item {
        width: 48%;
        margin-bottom: 20px;
        position: relative;
        background-color: #f2f2f2;
        transition: transform 0.3s ease-in-out;
    }

    .news .item:hover {
        transform: scale(1.05);
    }

    .news .item .image {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .news .item .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .news .item .date {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #333;
        color: #fff;
        padding: 5px;
        font-size: 14px;
        font-weight: bold;
    }

    .news .item .content {
        padding: 10px;
    }

    .news .item .content h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .company {
        padding: 20px;
        background-color: #f2f2f2;
    }

    .company h2 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .company p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .team {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }

    .team .member {
        width: 30%;
        text-align: center;
    }

    .team .member img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: 10px;
    }

    .team .member h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .contact {
        padding: 20px;
        background-color: #f2f2f2;
    }

    .contact h2 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .contact p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .contact form {
        display: flex;
        flex-wrap: wrap;
    }

    .contact form .input-group {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact form .input-group input {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: none;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        margin-bottom: 10px;
    }

    .contact form .input-group textarea {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: none;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        height: 100px;
        margin-bottom: 10px;
    }

    .contact form .input-group button {
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
    }

    .contact form .input-group button:hover {
        background-color: #555;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <nav>
        <a href="#" class="active">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务项目</a>
        <a href="#">新闻中心</a>
        <a href="#">联系我们</a>
    </nav>
    <header class="header">
        <h1>手机端网站模板</h1>
        <p>这是一个演示用的手机端网站模板</p>
    </header>
    <div class="slider">
        <img src="https://via.placeholder.com/800x400" alt="">
        <div class="prev">&#10094;</div>
        <div class="next">&#10095;</div>
        <div class="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="image-list">
        <div class="item">
            <img src="https://via.placeholder.com/400x300" alt="">
            <div class="overlay">
                <h3>图片标题</h3>
                <p>图片描述</p>
            </div>
        </div>
        <div class="item">
            <img src="https://via.placeholder.com/400x300" alt="">
            <div class="overlay">
                <h3>图片标题</h3>
                <p>图片描述</p>
            </div>
        </div>
        <div class="item">
            <img src="https://via.placeholder.com/400x300" alt="">
            <div class="overlay">
                <h3>图片标题</h3>
                <p>图片描述</p>
            </div>
        </div>
        <div class="item">
            <img src="https://via.placeholder.com/400x300" alt="">
            <div class="overlay">
                <h3>图片标题</h3>
                <p>图片描述</p>
            </div>
        </div>
        <div class="item">
            <img src="https://via.placeholder.com/400x300" alt="">
            <div class="overlay">
                <h3>图片标题</h3>
                <p>图片描述</p>
            </div>
        </div>
        <div class="item">
            <img src="https://via.placeholder.com/400x300" alt="">
            <div class="overlay">
                <h3>图片标题</h3>
                <p>图片描述</p>
            </div>
        </div>
    </div>
    <div class="services">
        <div class="item">
            <img src="https://via.placeholder.com/80x80" alt="">
            <h3>服务项目1</h3>
        </div>
        <div class="item">
            <img src="https://via.placeholder.com/80x80" alt="">
            <h3>服务项目2</h3>
        </div>
        <div class="item">
            <img src="https://via.placeholder.com/80x80" alt="">
            <h3>服务项目3</h3>
        </div>
    </div>
    <div class="news">
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://via.placeholder.com/400x200" alt="">
            </div>
            <div class="date">2021-01-01</div>
            <div class="content">
                <h3>新闻标题</h3>
                <p>新闻摘要</p>
            </div>
        </div>
    </div>
    <div class="company">
        <h2>公司简介</h2>
        <p>这里是公司简介的文字内容，可以介绍公司的历史、业务范围、发展方向等等。</p>
    </div>
    <div class="team">
        <div class="member">
            <img src="https://via.placeholder.com/80x80" alt="">
            <h3>团队成员1</h3>
            <p>职位1</p>
        </div>
        <div class="member">
            <img src="https://via.placeholder.com/80x80" alt="">
            <h3>团队成员2</h3>
            <p>职位2</p>
        </div>
        <div class="member">
            <img src="https://via.placeholder.com/80x80" alt="">
            <h3>团队成员3</h3>
            <p>职位3</p>
        </div>
    </div>
    <div class="contact">
        <h2>联系我们</h2>
        <p>这里是联系我们的文字内容，可以放置公司地址、电话、邮箱等联系方式。</p>
        <form action="">
            <div class="input-group">
                <input type="text" placeholder="姓名">
            </div>
            <div class="input-group">
                <input type="email" placeholder="邮箱">
            </div>
            <div class="input-group">
                <textarea placeholder="留言"></textarea>
            </div>
            <div class="input-group">
                <button>提交留言</button>
            </div>
        </form>
    </div>
    <script>
        var slideIndex = 1;
        showSlides(slideIndex);
<pre><code>    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.querySelectorAll('.slider img');
        var dots = document.querySelectorAll('.dots span');
        if (n &gt; slides.length) {
            slideIndex = 1
        }
        if (n &lt; 1) {
            slideIndex = slides.length
        }
        for (i = 0; i &lt; slides.length; i++) {
            slides[i].style.display = &quot;none&quot;;
        }
        for (i = 0; i &lt; dots.length; i++) {
            dots[i].className = dots[i].className.replace(' active', '');
        }
        slides[slideIndex-1].style.display = &quot;block&quot;;
        dots[slideIndex-1].className += ' active';
    }
&lt;/script&gt;
</code></pre>
</body>
</html>
手机端网站模板 - 响应式设计，包含导航、幻灯片、图片列表等

原文地址: https://www.cveoy.top/t/topic/mZy0 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录