首页 > 分享 > html+css网页设计玫瑰花主题网站

html+css网页设计玫瑰花主题网站

花匠小妙招
2024-11-13 13:41

一、‍网站题目

玫瑰花设计与制作。

二、✍️网站描述

玫瑰花主题的网页一共七个个页面
- 玫瑰花网页使用html css js制作有banana图
- 页面可以相互跳转包含表单三级页面
- 网页可以使用vscode hbuilder dw等打开修改
- 里面的图片和文字都可以替换为其他内容
- html静态网页没有复杂效果布局简单原创html网页设计适合当作业使用

‍静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；

四、网站效果

五、代码实现

HTML

<!DOCTYPE html >

<html>

<head>

</head>

<body>

<li>

<li>

<li>

</ul>

</ol>

<a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next"

class="arrow">></a>

</div>

</div>

</div>

</div>

</div>

<h2>

简介

</h2>

<p>

Rosa rugosa Thunb</p>

</div>

<p>

玫瑰花（学名：Rosa rugosa Thunb.）是蔷薇科、蔷薇属的一种灌木，其株高达2米。茎粗壮，丛生，小枝密生线毛、针刺和腺毛，并有皮刺，呈淡黄色，被绒毛覆盖。 <img src="images/2.png" />

</div>

</div>

<h2>

形态特征

</h2>

</div>

</div>

<p>

叶子：玫瑰花的小叶通常为5枚，形状为椭圆形或倒卵形，长1.5-4.5厘米。叶片表面无毛，叶脉下陷，有褶皱，背面密被绒毛和腺毛。托叶大部贴生叶柄，离生部分卵形，带腺锯齿，下面被绒毛。

</br>花朵：玫瑰花单生或数朵簇生于叶腋，花形优美，花瓣层层叠叠，雍容华贵。花朵直径6～8厘米，花瓣5片，颜色多样，常见的有红色、粉色、白色、黄色等。花瓣倒卵形，重瓣至半重瓣，香气浓郁。

</br>果实：玫瑰的果实为蔷薇果，形状扁球形，成熟时呈砖红色，肉质，平滑，萼片宿存。

</div>

</div>

<h2>

玫瑰

</h2>

</div>

<ul>

<li>

</div>

</div>

</li>

<li>

</div>

</div>

</li>

<li>

</div>

</div>

</li>

<li>

</div>

</div>

</li>

<li>

</div>

</div>

</li>

</ul>

</div>

css

@charset "utf-8";

margin: 0;

padding: 0;

}

body{

background: #f3f3f3;

background-image:url(../images/b5.png);

}

.control{

width: 340px;

background: white;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

border-radius: 5px;

}

.item{

width: 340px;

height: 60px;

background: #eeeeee;

}

.item div{

width: 170px;

height: 60px;

display: inline-block;

color: black;

font-size: 18px;

text-align: center;

line-height: 60px;

cursor: pointer;

}

.content{

width: 100%;

}

.content div{

margin: 20px 30px;

display: none;

text-align: left;

}

color: #4a4a4a;

margin-top: 30px;

margin-bottom: 6px;

font-size: 15px;

}

.content input[type="text"], .content input[type="password"]{

width: 100%;

height: 40px;

border-radius: 3px;

border: 1px solid #adadad;

padding: 0 10px;

box-sizing: border-box;

}

.content input[type="submit"]{

margin-top: 40px;

width: 100%;

height: 40px;

border-radius: 5px;

color: white;

border: 1px solid #adadad;

background: #00dd60;

cursor: pointer;

letter-spacing: 4px;

margin-bottom: 40px;

}

.active{

background: white;

}

.item div:hover{

background: #f6f6f6;

}

六、如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。