index界面 登录/迎接界面
html部分
<html>
<head>
<meta charset="utf-8">
<title>我只记得花香--花卉介绍</title>
<style type="text/css">
@import url(index.css);
</style>
</head>
<body>
<div class="box">
<br><br><br>
<h2>Lost in Shakespeare's garden, where the romantic roses are in full bloom.</h2>
<h2>迷失在莎士比亚的花园<br>那里盛放着浪漫主义者的玫瑰</h2><br>
<a href="shouye1.html" class="t"><b>立即探索</b></a>
</div>
</body>
</html>css部分
body {background: url(../webTest.img/背景2.jpg) no-repeat center center;background-size: cover;/* 让背景图基于容器大小伸缩 */background-attachment: fixed;/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 此条属性必须设置否则可能无效*/}
.box{width: 550px;height: 300px;margin: auto;margin-top: 200px;background-color: #D2DCC4;padding: 50px 50px 30px;box-shadow: 10px 10px 15px black;text-align: center;}
.t {text-decoration: none;font-size: larger;color: #337000;}
h2 {font-family: Courier New;}首页界面
html部分
<html>
<head>
<title>我只记得花香--花卉介绍</title>
<style type="text/css">
@import url(shouye.css);
</style>
</head>
<body>
<div class="body">
<div class="picture">
<img src="../webTest.img/1 背景文件.jpg" width="1500px" height="670px">
</div>
<div class="content">
<ul align="center" >
<li><font color="white" ><a class="a1" href="shouye1.html" style="color: white;">首页</a></font></li>
<li><font color="white" ><a href="zenghua1.html" style="color: white;">赠花选择</a></font></li>
<li><font color="white" ><a href="huayi1.html" style="color: white;">花艺技巧</a></font></li>
<li><font color="white" ><a href="bizhi1.html" style="color: white;">鲜花壁纸</a></font></li>
<li><font color="white" ><a href="wanggou.html" style="color: white;">网购推荐</a></font></li>
<li><font color="white" ><a href="huayu.html" style="color: white;">花语大全</a></font></li>
<li><font color="white" ><a href="langman.html" style="color: white;">浪漫文案</a></font></li>
<li><font color="white" ><a href="huiyuan.html" style="color: white;">会员注册</a></font></li>
</ul>
</div>
<div class="title1"><strong>品种欣赏</strong></div>
<div class="box">
<div class="p1">
<img src="../webTest.img/百合1.jpg" width="190px" height="120px">
</div>
<div class="p2">
<img src="../webTest.img/玫瑰.jpg" width="190px" height="120px">
</div>
<div class="p3">
<img src="../webTest.img/康乃馨.jpg" width="190px" height="120px" >
</div>
<div class="p4">
<img src="../webTest.img/向日葵.jpg" width="190px" height="120px">
</div>
</div>
<div class="title2"><strong>鲜花介绍</strong></div>
<div class="introduction">
<div class="t1">
<div class="t1p"></div>
<div class="t1t">
<p>
典型的鲜花，在一个有限生长的短轴上，着生花萼、花冠和产生生殖细胞的雄蕊与雌蕊。有些学者认
为裸子植物的孢子叶球也是“花”，而多数人则认为被子植物才有花，所以被子植物也称为有花植物。
花的各部分不易受外界环境的影响，变化较小，所以长期以来，人们都以花的形态结构，作为被子植
物分类鉴定和系统演化的主要依据（见被子植物门）。
</p>
<p> 花的形状千姿百态，大约25万种被子植物中，就有25万种的花式样。但所有的花仍有共同的结构图式。</p>
<p> 花由花冠、花萼、花托、花蕊组成，有各种颜色，有的长很艳丽，有香味。</p>
</div>
</div>
<div class="t2">
<div class="t2t">
<p> 花卉，是具有观赏价值的草本植物，是用来描绘欣赏的植物的统称，具有繁殖功能的短枝，有许多种类。典型的花，在一个有限生长的短轴上，着生花萼、花瓣和产生生殖细胞的雄蕊与雌蕊。花由花冠、花萼、花托、花蕊组成，有各种各样的颜色，长得也各种各样，有香味或无香味等。</p>
<p> “花”字在商代甲骨文中作（即华），表现了盛开的花形和枝叶葱茂之状。卉，汉代许慎《说文解字》称：“卉，草之总名也。”花、卉两字联用，则出现较晚。南北朝时《梁书·何点传》载：“园中有卞忠贞冢，点植花卉于冢侧。”</p>
<p> 这是花、卉二字联用的较早记述。</p>
</div>
<div class="t2p"></div>
</div>
<div class="t3">
<div class="t3p"></div>
<div class="t3t">
<p> 花是被子植物繁衍后代的生殖器官。典型的花，在一个有限生长的轮回上，生长出花萼、花冠和产生生殖细胞的雄蕊与雌蕊。有些学者认为裸子植物的孢子叶球也是“花”，而多数人则认为被子植物才有花，所以被子植物也称为有花植物。花的各部分不易受外界环境的影响，变化较小，所以长期以来，人们都以花的形态结构，作为被子植物分类鉴定和系统演化的主要依据。</p>
<p> 也被多数文学者以花为媒，蔓为枝来描述花品寓意。</p>
<p> 花是植物成熟的表现，开出各色各异的花，具观赏效果；卉是草类的总称。</p>
</div>
</div>
</div>
<div class="color">
<font color="white">我只记得花香--花卉介绍</font>
</div>
</div>
</body>
</html>css部分
.body{width: 1500;height: 2100px;margin: auto;background-color:#7fa163;}
.picture{width: 1500px;height:658px;margin: auto;background-color: aqua;}
.content{ width: 1500px;height: 70px;margin: auto;margin-top: 0px;background-color: #337000;}
ul li{list-style: none;}
.content li{float: left;}
a{display: block;;width: 100px;height: 70px;background-color: #337000;text-decoration: none;font-size: 17px;font-family: Microsoft Yahei;line-height: 70px;margin-left: 30px;}
.a1{margin-left: 200px;}
a:hover{background-color: #529f78;}
.title1{width: 200px;height: 70px;margin: auto;background-color: #7fa163;border-bottom: #337000 4px solid;line-height: 70px;text-align: center;font-size: 17px;}
.box{width: 1200px;height: 200px;margin: auto;background-color: #7fa163;}
.p1,.p2,.p3,.p4{float: left;margin: 40px 50px;}
.p1{margin-left: 65px;}
.title2{width: 200px;height: 70px;margin: auto;background-color: #7fa163;border-bottom: #337000 4px solid;line-height: 70px;text-align: center;font-size: 17px;}
.introduction{width: 1500px;height:950px;margin: auto;background-color: #7fa163;padding-top: 20px;}
.t1,.t2,.t3{width: 1200px;height: 270px;margin: 10px auto;background-color: #7fa163;}
.t1p,.t3p{float: left;width: 400px;height: 270px;background-color: rgb(21, 63, 142);background-image: url(../webTest.img/花.jpg);}
.t1t,.t3t{float: left;width: 700px;height: 250px;background-color:
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
