【无标题】HTML写简单网页

最新推荐文章于 2023-12-19 10:35:58 发布

top9523

最新推荐文章于 2023-12-19 10:35:58 发布

阅读量3.4k

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/top9523/article/details/125433758

版权

本文是一篇HTML初学者教程，介绍如何编写一个简单的花卉市场网页。内容包括初始化页面设置，如清除默认样式，以及创建头部、底部和导航栏。网页展示了牡丹和百合的介绍，并附有图片和相关信息。

摘要由CSDN通过智能技术生成

一、初始化页面

body,button,dd,dl, dt,form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,a,div,span {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.clear{
clear: both;
二、头部和底部

先给网页设置一个头部，具体代码如下：

.header {
padding: 80px;
text-align: center;
background: rgb(204, 191, 116);
color: rgb(240, 232, 232);
}
再设置一个底部，具体代码如下：

.footer {
padding: 10px;
text-align: center;
background: #ddd;
}
运行结果如下：

三、整体

html代码如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<div class="header">
<h1>花卉市场</h1>
<p></p>
</div>

<div class="navbar">
<a href="#">牡丹</a>
<a href="#