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

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

创建一个蓝色伯爵婚纱摄影网站的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>版权所有 © 蓝色伯爵婚纱摄影</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

游客，如果您要查看本帖隐藏内容请回复

		自动登录	找回密码
密码			立即注册

[静态模板] 蓝色伯爵婚纱摄影网站HTML模版

相关帖子