创建一个蓝色伯爵婚纱摄影网站的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
}.
