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

举报
IT司马青衫 发表于 2022/08/11 10:11:52 2022/08/11
【摘要】 一、作品介绍网页作品代码简单html+css,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。技术方面主要应用了学生网页课程中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音...

一、作品介绍

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

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

二、作品演示

在这里插入图片描述

三、代码展示

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

<!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>作者:张三&nbsp;&nbsp;学号:092224141</p>
				<p>2022年春季学期《web前端开发基础》期中测试</p>
				<p>xxxxxxxxxxxxx</p>
			</div>
		</div>
	</body>
</html>


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;
}

喜欢的给个点赞呗

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。