html花卉网站设计
时间: 2023-12-15 17:32:33 浏览: 42
HTML花卉网站设计可以通过DIV+CSS布局来实现。以下是一个简单的HTML花卉网站设计的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>花卉网站</title>
<style>
/* 设置页面背景颜色 */
body {
background-color: #f2f2f2;
}
/* 设置页面标题样式 */
h1 {
text-align: center;
color: #4CAF50;
font-size: 36px;
margin-top: 50px;
}
/* 设置导航栏样式 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #4CAF50;
}
/* 设置内容区域样式 */
.container {
margin-top: 30px;
margin-bottom: 30px;
padding: 20px;
background-color: white;
text-align: center;
}
/* 设置页脚样式 */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<ul>
<li><a class="active" href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
<!-- 页面标题 -->
<h1>欢迎来到花卉网站</h1>
<!-- 内容区域 -->
<div class="container">
<h2>我们的产品</h2>
<p>这里展示我们的花卉产品。</p>
<img src="flower.jpg" alt="花卉图片" width="500" height="333">
</div>
<!-- 页脚 -->
<div class="footer">
<p>版权所有 © 花卉网站</p>
</div>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)