用html语言编写一个简单的网页_html做网页

全栈程序员站长

发布于 2022-11-19 13:14:35

4K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

最近学习了一点HTML，闲来无事写个网页看看，欢迎、改进、留言。

演示地点：跳转到演示地点

一、初始化页面

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="#">丁香</a>
<a href="#">百合</a>
<a href="#">美人蕉</a>
<a href="#">夜来香</a>
<a href="#">松果菊</a>
<a href="#">锦葵</a>
<a href="#" class="right">点击了解更多花卉</a>
</div>
<div class="row">
<div class="side">
<h2>常见的花卉</h2>
<h5>松果菊、红丁香、锦葵、勋章菊等等都是比较常见的花卉</h5>
<div class="fff" style="height:100px;">松果菊（学名：Echinacea purpurea (Linn.) Moench）是菊科松果菊属植物，多年生草本植物
</div>
<img src="./img/02.png" alt="牡丹">
<p>原野生于加拿大的马尼托巴湖及萨斯喀彻温省的东南部及美国中南部的一些开阔树林、大草原上。 [3]  喜欢光照充足、温暖的气候条件
<h3>更多</h3>
<p>松果菊可供药用，含有多种活性成分，可以刺激人体内的白细胞等免疫细胞的活力，具有增强免疫力的功效，还可以用于辅助治疗感冒、
<div class="fff" style="height:60px;"></div><br>
<img src="./img/02.png" alt="牡丹">
<div class="fff" style="height:60px;">……</div><br>
<img src="./img/02.png" alt="牡丹">
<div class="fff" style="height:60px;">……</div>
</div>
<div class="main">
<h2>牡丹</h2>
<h5>牡丹，双子叶植物</h5>
<div class="fff" style="height:100px;">牡丹（学名：Paeonia suffruticosa Andr.）：是双子叶植物纲、芍药科、芍药属植物。
为多年生落叶灌木，茎高达2米；分枝短而粗。叶通常为二回三出复叶，表面绿色，无毛，背面淡绿色，有时具白粉，叶柄长5-11厘米，
和叶轴均无毛。
花单生枝顶，苞片5，长椭圆形；萼片5，绿色，宽卵形，花瓣5或为重瓣，玫瑰色、红紫色、粉红色至白色，通常变异很大，倒卵形，
顶端呈不规则的波状；
花药长圆形，长4毫米；花盘革质，杯状，紫红色；心皮5，密生柔毛。蓇葖长圆形，密生黄褐色硬毛。花期5月；果期6月。</div>
<img src="./img/05.gif" alt="牡丹">
<p></p>
<p>花色泽艳丽，玉笑珠香，风流潇洒，富丽堂皇，素有“花中之王”的美誉。在栽培类型中，主要根据花的颜色，可分成上百个品种。
牡丹品种繁多，色泽亦多，
以黄、绿、肉红、深红、银红为上品，尤其黄、绿为贵。牡丹花大而香，故又有“国色天香”之称。</p>
<br>
<h2>百合</h2>
<h5>百合，一种花</h5>
<div class="fff" style="height:70px;">百合，中药名。为百合科植物卷丹Lilium lancifolium Thunb.、百合Lilium brownii
F．E．Brown var. viridulum Baker
或细叶百合Lilium pumilum DC.的干燥肉质鳞叶。具有养阴润肺，清心安神之功效。常用于阴虚燥咳，劳嗽咳血，虚烦惊悸，
失眠多梦，精神恍惚。</div>
<img src="./img/04.jpg" alt="百合">
<p>一些小知识</p>
<p>《本草经疏》：“百合，主邪气腹胀。所谓邪气者，即邪热也。邪热在腹，故腹胀，清其邪热则胀消矣；解利心家之邪热，
则心痛自廖；肾主二便，肾与大肠二经有热邪则不通利，
清二经之邪热，则大小便自利；甘能补中，热清则气生，故补中益气；清热利小便，故除浮肿、胪胀、痞满、寒热，
通身疼痛。乳难，足阳明热也；喉痹者，手少阳三焦、
手少阴心家热也；涕泪，肺肝热也。清阳明三焦心部之热，则上来诸病自除。”</p>
</div>
</div>
<div class="footer">
<a class="bottom" href="#">回到顶部</a>
<h2>底部</h2>
</div>

然后是CSS

* {
box-sizing: border-box;
font-family: "宋体";
}
/* body 样式 */
body {
font-family: Arial;
margin: 0;
}
/* 标题 */
.header {
padding: 80px;
text-align: center;
background: rgb(204, 191, 116)
color: rgb(240, 232, 232);
}
/* 标题字体加大 */
.header h1 {
font-size: 40px;
}
/* 导航 */
.navbar {
overflow: hidden;
background-color: rgb(46, 46, 
}
/* 导航栏样式 */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
}
/* 右侧链接*/
.navbar a.right {
float: right;
}
/* 鼠标移动到链接的颜色 */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* 列容器 */
.row {  
display: -ms-flexbox; 
display: flex;
-ms-flex-wrap: wrap; 
flex-wrap: wrap;
}
/*  */
/* 创建两个列 */
/* 边栏 */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* 主要的内容区域 */
.main {   
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* 图片 */
.fff {
background-color: rgb(247, 240
width: 100%;
padding: 20px;
}
/* 底部 */
.footer {
padding: 10px;
text-align: center;
background: #ddd;
}
/* 去下划线 */
a{
text-decoration: none;
}

最后就可以得到一个简单的网页啦！