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)