HTML+CSS鲜花网页制作 DW静态网页设计 个人网页制作
【摘要】 一、作品介绍网页作品代码简单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>作者：张三 学号：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）