HTML+CSS鲜花网页制作 DW静态网页设计简单的个人网页制作

一、作品介绍

网页作品代码简单html+css，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

技术方面主要应用了学生网页课程中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

文章目录

一、作品介绍
二、作品演示
三、代码展示
css

二、作品演示

在这里插入图片描述

三、代码展示

代码说明：以下仅展示部分代码供参考~

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>子悦花店title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	head>
	<body>
		<div class="box">
			<div class="header">
				<ul>
					<li class="title">子悦花店li>
					<li>当季新品li>
					<li>全部宝贝li>
					<li>鲜花礼盒li>
					<li>花语大全li>
					<li>配送服务li>
				ul>
			div>
			<div class="banner">
				<img src="img/banner.jpg" >
			div>
			<div class="content">
				<div class="items">
					<div class="item">
						<div class="item-img">
							<img src="img/flower1.jpg" >
						div>
						<div class="item-text">
							莫妮卡贝鲁奇是一款非常优秀的小型灌木月季花。它株高有40-120公分。它直立生长，树形紧凑美观，可以用于庭院片植造景、盆栽观赏或鲜切花等等。
						div>
					div>
					<div class="item">
						<div class="item-img">
							<img src="img/flower2.jpeg" >
						div>
						<div class="item-text">
							朱丽叶是1999年英国培育的一种切花品种，它的花型属于比较圆润饱满的。花朵中心是杏色的，花周围则是淡淡的白色，花香也是淡淡的茶香。朱丽叶的耐阴性很强，如果家里的光线不是很充足，那么，养一盆朱丽叶是非常好的选择。
						div>
					div>
					<div class="item">
						<div class="item-img">
							<img src="img/flower3.jpg" >
						div>
						<div class="item-text">
							红苹果的颜色是那种非常炽热的深红色，就和熟透了的红苹果一样，非常的具有吸引力，花期非常长，瓶插可在十天以上，花开的很多长势很好，叶子小巧精致又油亮，抗病性好，开花性非常好，多头开花，开花不停，带有老玫瑰和茶叶混合的香味，主要用来做切花，也可以做庭院灌木种植。
						div>
					div>
					<div class="item">
						<div class="item-img">
							<img src="img/flower4.jpg" >
						div>
						<div class="item-text">
							红双喜 Double Delight是世界上最著名的月季之一，是一款极好的混合茶玫瑰，具有极其芳香，非常大，花径达5英寸（12厘米），高中心的花朵。令人陶醉的辛辣香气花，奶油般的白色花瓣（最多30个花瓣），带有轻微褶边的草莓红花瓣边缘。
						div>
					div>
					<div class="item">
						<div class="item-img">
							<img src="img/flower5.jpg" >
						div>
						<div class="item-text">
							“粉色龙沙宝石”，是一种单季开花、花开浅粉色、善于攀援生长的藤本月季，也是最经典一款龙沙宝石。它的花型非常典雅而明媚，一般在春夏之际开花，可地栽或盆栽制作花墙、拱门、花架、花柱等等。
						div>
					div>
					<div class="item">
						<div class="item-img">
							<img src="img/flower6.jpg" >
						div>
						<div class="item-text">
							真宙是一款灌木月季，日月的一种，诞生于2009年，自上市以来就受到众多花友的喜爱，如今已经风迷全世界。真宙的花色，春花是杏粉色，夏花是柠檬粉色，花型是标准的玫瑰花型，很圆很包，充满仙气，是中型花，一朵花的直径在8－10公分，初开是玫瑰花型，慢慢的会散开呈株状，但是不易散开，即使是炎热的夏季，花型也很标准。
						div>
					div>
					<div class="item">
						<div class="item-img">
							<img src="img/flower7.jpg" >
						div>
						<div class="item-text">
							瑞典女王是奥斯汀培育的一款月季，它是那种直立性强、非常高大的灌木品种，也可以当作藤本月季培养(这也是很多奥斯汀月季的共有特性)，它的花非常的大，浅粉色的杯状花朵，粉嫩而又优雅，吸引了一大波的瑞典女王粉丝。
						div>
					div>
					<div class="item">
						<div class="item-img">
							<img src="img/flower8.jpg" >
						div>
						<div class="item-text">
							蓝色阴雨是一种小女生看了都会少女心爆棚的花儿，原产于德国，紫白色的花朵淡雅而美丽，一点都不花哨，简单又大方，还有淡淡的香味让人为之着迷，种在家里就是一种美的享受；蓝色阴雨它的花是紫色的，月季品种中是没有蓝色的花朵的，带蓝色字眼的月季品种多是浅紫色的。
						div>
					div>
				div>
			div>
			<div class="footer">
				<p>作者：张三  学号：092224141p>
				<p>2022年春季学期《web前端开发基础》期中测试p>
				<p>xxxxxxxxxxxxxp>
			div>
		div>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

css

body{
	background-color: #f2f2f2;
}

.box{
	width: 1200px;
	margin: 0 auto;
}

.header{
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin-top: 20px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	background-color: #81CDC9;
}

.header ul{
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 40px;
	font-size: 16px;
}

.header .title{
	font-size: 22px;
}

.banner img{
	width: 100%;
}

.content .items{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 10px;
}

.content .item{
	width: 24.5%;
	margin-bottom: 20px;
}

.content .item img{
	width: 100%;
	height: 240px;
	margin-bottom: 10px;
}

.footer{
	margin-top: 10px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background-color: #96BCE0;
	text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

喜欢的给个点赞呗

相关阅读:
idea请问这两处标红是哪错了
 Transactional失效原因
 Ubuntu 的护眼软件：RedShift
数据结构之查找（折半查找/二分查找）
springboot项目配置flyway菜鸟级别教程
 14.HTML和CSS 02
2022，软测人的平均薪资，看完我瞬间凉了...
北京保险服务中心携手镜舟科技，助推新能源车险市场规范化
 计算机毕业设计 SSM+Vue线上购药系统药源购物系统药物推荐系统药品详情系统Java Vue MySQL数据库远程调试代码讲解
 如何查看多开的逍遥模拟器的adb连接端口号
原文地址：https://blog.csdn.net/qq_38514421/article/details/128073376

HTML+CSS鲜花网页制作 DW静态网页设计 简单的个人网页制作

一、作品介绍

文章目录

二、作品演示

三、代码展示

css

HTML+CSS鲜花网页制作 DW静态网页设计简单的个人网页制作