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

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

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

喜欢的给个点赞呗

相关知识

HTML+CSS网页设计期末课程大作——篮球网页设计(6页) 学校篮球网页制作模板 学生简单体育运动网站设计成品
HTML+CSS鲜花静态网页设计@TOC 一、‍网站题目 鲜花网页设计 、鲜花商城网页制作、在线花
HTML+CSS鲜花静态网页设计
大学生网页设计作业——HTML+CSS鲜花静态网页设计
鲜花静态HTML网页作业作品 大学生鲜花网页设计制作成品 简单DIV CSS布局网站
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
150.大学生HTML期末大作业 —【鲜花主题网页】 Web前端网页制作 html+css
网页设计心得体会 14篇
学生花卉网网页设计作品 学生鲜花网页模板 简单在线花店主页成品 鲜花网页制作 HTML学生花店商城网站作业设计
《网页设计》学习心得(精选34篇)

网址: HTML+CSS鲜花网页制作 DW静态网页设计 简单的个人网页制作 https://m.huajiangbk.com/newsview539849.html

所属分类:花卉
上一篇: 关于花的网站设计,关于花的网页设
下一篇: HTML网页设计:十一、表单