HTML写⼀个简单⽹页最近学习了⼀点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" >松果菊(学名:Echinacea purpurea (Linn.) Moench)是菊科松果菊属植物,多年⽣草本植物
</div>
<img src="./img/02.png" alt="牡丹">
<p>原野⽣于加拿⼤的马尼托巴湖及萨斯喀彻温省的东南部及美国中南部的⼀些开阔树林、⼤草原上。 [3]  喜欢光照充⾜、温暖的⽓候条件      <h3>更多</h3>
<p>松果菊可供药⽤,含有多种活性成分,可以刺激⼈体内的⽩细胞等免疫细胞的活⼒,具有增强免疫⼒的功效,还可以⽤于辅助感冒、      <div class="fff" ></div><br>
<img src="./img/02.png" alt="牡丹">
<div class="fff" >……</div><br>
<img src="./img/02.png" alt="牡丹">
<div class="fff" >……</div>
</div>
<div class="main">
<h2>牡丹</h2>
<h5>牡丹,双⼦叶植物</h5>
<div class="fff" >牡丹(学名:Paeonia suffruticosa Andr.):是双⼦叶植物纲、芍药科、芍药属植物。
为多年⽣落叶灌⽊,茎⾼达2⽶;分枝短⽽粗。叶通常为⼆回三出复叶,表⾯绿⾊,⽆⽑,背⾯淡绿⾊,有时具⽩粉,叶柄长5-11厘⽶,和叶轴均⽆⽑。
花单⽣枝顶,苞⽚5,长椭圆形;萼⽚5,绿⾊,宽卵形,花瓣5或为重瓣,玫瑰⾊、红紫⾊、粉红⾊⾄⽩⾊,通常变异很⼤,倒卵形,顶端呈不规则的波状;
花药长圆形,长4毫⽶;花盘⾰质,杯状,紫红⾊;⼼⽪5,密⽣柔⽑。蓇葖长圆形,密⽣黄褐⾊硬⽑。花期5⽉;果期6⽉。</div>
<img src="./img/05.gif" alt="牡丹">
controller手柄驱动<p></p>
<p>花⾊泽艳丽,⽟笑珠⾹,风流潇洒,富丽堂皇,素有“花中之王”的美誉。在栽培类型中,主要根据花的颜⾊,可分成上百个品种。
牡丹品种繁多,⾊泽亦多,
以黄、绿、⾁红、深红、银红为上品,尤其黄、绿为贵。牡丹花⼤⽽⾹,故⼜有“国⾊天⾹”之称。</p>
<br>
<h2>百合</h2>
<h5>百合,⼀种花</h5>
<div class="fff" >百合,中药名。为百合科植物卷丹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;
scope是什么意思啊
text-align: center;
background: rgb(204, 191, 116)
color: rgb(240, 232, 232);
}
/* 标题字体加⼤ */
.header h1 {
font-size: 40px;
}学生个人网页html代码
/* 导航 */
.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 {织梦cms导航
float: right;
彩弹窗html代码
}
/* ⿏标移动到链接的颜⾊ */
.navbar a:hover {
.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;
}
最后就可以得到⼀个简单的⽹页啦!
欢迎⼤家留⾔,改进,建议!⼀起加油鸭*

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。