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

您所在的位置:网站首页 用html做一个网站或者网页怎么做 用html语言编写一个简单的网页

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

2024-06-24 07:13| 来源: 网络整理| 查看: 265

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

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

演示地点:跳转到演示地点

一、初始化页面

代码语言:javascript复制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;

二、头部和底部

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

代码语言:javascript复制.header { padding: 80px; text-align: center; background: rgb(204, 191, 116); color: rgb(240, 232, 232); }

再设置一个底部,具体代码如下:

代码语言:javascript复制.footer { padding: 10px; text-align: center; background: #ddd; }

运行结果如下:

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

三、整体

代码语言:javascript复制html代码如下: Document 花卉市场

牡丹 丁香 百合 美人蕉 夜来香 松果菊 锦葵 点击了解更多花卉 常见的花卉 松果菊、红丁香、锦葵、勋章菊等等都是比较常见的花卉 松果菊(学名:Echinacea purpurea (Linn.) Moench)是菊科松果菊属植物,多年生草本植物 牡丹

原野生于加拿大的马尼托巴湖及萨斯喀彻温省的东南部及美国中南部的一些开阔树林、大草原上。 [3] 喜欢光照充足、温暖的气候条件 更多

松果菊可供药用,含有多种活性成分,可以刺激人体内的白细胞等免疫细胞的活力,具有增强免疫力的功效,还可以用于辅助治疗感冒、 牡丹 …… 牡丹 …… 牡丹 牡丹,双子叶植物 牡丹(学名:Paeonia suffruticosa Andr.):是双子叶植物纲、芍药科、芍药属植物。 为多年生落叶灌木,茎高达2米;分枝短而粗。叶通常为二回三出复叶,表面绿色,无毛,背面淡绿色,有时具白粉,叶柄长5-11厘米, 和叶轴均无毛。 花单生枝顶,苞片5,长椭圆形;萼片5,绿色,宽卵形,花瓣5或为重瓣,玫瑰色、红紫色、粉红色至白色,通常变异很大,倒卵形, 顶端呈不规则的波状; 花药长圆形,长4毫米;花盘革质,杯状,紫红色;心皮5,密生柔毛。蓇葖长圆形,密生黄褐色硬毛。花期5月;果期6月。 牡丹

花色泽艳丽,玉笑珠香,风流潇洒,富丽堂皇,素有“花中之王”的美誉。在栽培类型中,主要根据花的颜色,可分成上百个品种。 牡丹品种繁多,色泽亦多, 以黄、绿、肉红、深红、银红为上品,尤其黄、绿为贵。牡丹花大而香,故又有“国色天香”之称。

百合 百合,一种花 百合,中药名。为百合科植物卷丹Lilium lancifolium Thunb.、百合Lilium brownii F.E.Brown var. viridulum Baker 或细叶百合Lilium pumilum DC.的干燥肉质鳞叶。具有养阴润肺,清心安神之功效。常用于阴虚燥咳,劳嗽咳血,虚烦惊悸, 失眠多梦,精神恍惚。 百合

一些小知识

《本草经疏》:“百合,主邪气腹胀。所谓邪气者,即邪热也。邪热在腹,故腹胀,清其邪热则胀消矣;解利心家之邪热, 则心痛自廖;肾主二便,肾与大肠二经有热邪则不通利, 清二经之邪热,则大小便自利;甘能补中,热清则气生,故补中益气;清热利小便,故除浮肿、胪胀、痞满、寒热, 通身疼痛。乳难,足阳明热也;喉痹者,手少阳三焦、 手少阴心家热也;涕泪,肺肝热也。清阳明三焦心部之热,则上来诸病自除。”

回到顶部 底部

然后是CSS

代码语言:javascript复制* { 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; }

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

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

欢迎大家留言,改进,建议!一起加油鸭*

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/182331.html原文链接:https://javaforall.cn



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3