【无标题】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;
}
最后就可以得到一个简单的网页

【无标题】HTML写简单网页相关推荐

自己开发html组态软件教程,《前端开发》第二节：10天教你学会用Html和CSS写简单网页...
常用编写软件我平时喜欢用的就两个:HBuilder X和Visual Studio Code百度搜索就能下载,都是免费的.安装后也很好用.初学者容易上手. 今天说说Html,一般我们经常的页面大致包 ...
【无标题】vue 简单增删改查表格
<template><div><h2>table简单增删改查</h2><input type="text" v-model=& ...
【无标题】写博客的第一天
#include<stdio.h> int main() {printf("你好,CSDN!");return 0; }
【无标题】写了一个半小时才写这么一点，是不是我能力不行呀？而且暗亮边框还显示不出来，害
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
android教程1009无标题,Android ActionBarActivity设置全屏无标题实现方法总结_Android_脚本之家...
Android ActionBarActivity设置全屏无标题实现方法总结前言: 新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟 ...
java写网页_初次尝试通过java写简单网站
一.安装Tomcat及配置 1.下载Tomcat 2.配置环境变量新建系统变量如下图所示修改path:变量末尾添加(%CATALINA_HOME%\bin) 3.查询配置是否成功这样显示表示已经 ...
python3爬虫实例-Python3 爬虫实例（一）-- 简单网页抓取
爬虫之前在着手写爬虫之前,要先把其需要的知识线路理清楚. 第一:了解相关Http协议知识 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网 ...
Android 置Activity全屏和无标题
今天,实在没有什么好些写的内容,所以在网上找了很久,才决定写这个博客.比较简单,还是想保持写博客的习惯. 一.在代码里设置全屏. Activity设置全屏和无标题栏,要用到andorid.view.W ...
Python3 爬虫（一）-- 简单网页抓取
序一直想好好学习一下Python爬虫,之前断断续续的把Python基础学了一下,悲剧的是学的没有忘的快.只能再次拿出来滤了一遍,趁热打铁,借鉴众多大神的爬虫案例,加入Python网络爬虫的学习大军~ ...

【无标题】HTML写简单网页

【无标题】HTML写简单网页相关推荐

最新文章

热门文章