源码技术 发表于 2024-7-26 15:45:35

蓝色伯爵婚纱摄影网站HTML模版

创建一个蓝色伯爵婚纱摄影网站的HTML模板，我们可以设计一个既优雅又浪漫的主题，使用蓝色作为主色调，并融入婚纱摄影相关的元素。以下是一个简单的HTML和CSS框架示例，用于构建一个基础的蓝色伯爵婚纱摄影网站模板。
HTML (index.html)

html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝色伯爵婚纱摄影</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <div class="container">
      <h1>蓝色伯爵婚纱摄影</h1>
      <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#gallery">作品展示</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
      </nav>
    </div>
</header>

<section id="home" class="hero">
    <div class="container">
      <h2>记录您的浪漫瞬间</h2>
      <p>蓝色伯爵，用镜头捕捉永恒的爱。</p>
    </div>
</section>

<section id="about" class="content-section">
    <div class="container">
      <h2>关于我们</h2>
      <p>蓝色伯爵婚纱摄影，自成立以来，一直致力于为每一对新人打造独一无二的婚纱摄影体验...</p>
    </div>
</section>

<section id="gallery" class="gallery">
    <div class="container">
      <h2>作品展示</h2>
      <div class="gallery-images">
            <img src="image1.jpg" alt="Sample Photo 1">
            <img src="image2.jpg" alt="Sample Photo 2">
            <img src="image3.jpg" alt="Sample Photo 3">
            <!-- 更多图片 -->
      </div>
    </div>
</section>

<section id="contact" class="content-section">
    <div class="container">
      <h2>联系我们</h2>
      <p>地址：XX市XX区XX路XX号</p>
      <p>电话：XXX-XXXX-XXXX</p>
      <p>邮箱：info@bluecountess.com</p>
    </div>
</section>

<footer>
    <div class="container">
      <p>版权所有 &copy; 蓝色伯爵婚纱摄影</p>
    </div>
</footer>

</body>
</html>

CSS (styles.css)

css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #007bff; /* 蓝色背景 */
    color: white;
    text-align: center;
    padding: 20px 0;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin-top: 10px;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    text-decoration: underline;
}

.hero {
    background-image: url('background.jpg'); /* 背景图片 */
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    text-align: center;
}

.hero h2, .hero p {
    color: white;
}

.gallery-images img {
    width: 1

**** Hidden Message *****
页: [1]
查看完整版本: 蓝色伯爵婚纱摄影网站HTML模版