使用div布局,css美化,用bootstrap框架制作我的家乡静态网站
时间: 2024-05-10 10:18:40 浏览: 9
好的,下面是制作静态网站的大致步骤:
1. 设计网站结构:在paper或其他软件中设计网站的布局、导航栏、内容区域等。
2. 编写HTML代码:根据设计好的网站结构编写HTML代码,包括HTML标签、文本内容、图片、链接等。
3. 使用CSS美化网站:使用CSS样式表对网站进行美化,包括字体、颜色、背景、边框等。
4. 使用Bootstrap框架:Bootstrap是一个流行的前端开发框架,可以快速创建响应式布局和常见UI组件。
下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Hometown</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
/* 自定义样式 */
body {
font-family: '微软雅黑', sans-serif;
font-size: 16px;
color: #333;
background-color: #f5f5f5;
}
.container {
margin-top: 50px;
margin-bottom: 50px;
}
.jumbotron {
background-image: url('hometown.jpg');
background-size: cover;
padding: 100px 0;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Hometown</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Attractions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Culture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Food</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Welcome to My Hometown</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae enim ut quam aliquet malesuada. Praesent tristique ultricies convallis. Nulla facilisi. Donec tincidunt tincidunt libero, vel tristique purus semper vel.</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="card">
<img class="card-img-top" src="attraction1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Attraction 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae enim ut quam aliquet malesuada. Praesent tristique ultricies convallis. Nulla facilisi.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="card">
<img class="card-img-top" src="attraction2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Attraction 2</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae enim ut quam aliquet malesuada. Praesent tristique ultricies convallis. Nulla facilisi.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="card">
<img class="card-img-top" src="attraction3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Attraction 3</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae enim ut quam aliquet malesuada. Praesent tristique ultricies convallis. Nulla facilisi.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-light text-center py-3">
<p>Copyright © 2021
<a href="#">My Hometown</a>
</p>
</footer>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
```
这是一个简单的静态网站,包括导航栏、轮播图、内容区域、卡片、页脚等。我们使用了Bootstrap框架,可以快速构建响应式布局,适应不同的设备屏幕大小。同时,我们使用了自定义的CSS样式表,对网站进行美化,使其更加美观、舒适。