HTML+CSS 满屋花

最新推荐文章于 2023-12-14 11:44:18 发布
最新推荐文章于 2023-12-14 11:44:18 发布
阅读量9.5k 收藏 94
点赞数 20
分类专栏： HTML+CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QuKinX/article/details/103863612
版权

HTML+CSS满屋花制作

在这里插入图片描述
ps:logo上面还有，只不过屏幕小而已。

在这里插入图片描述

HTML代码

<!DOCTYPE HTML>
<html>
	<head>
    	<meta charset="utf-8">
        <title>满屋花</title>
        <link type="text/css" rel="stylesheet" href="css/index.css">
    </head>
    <body>
    	<div class="qb">
        	<div class="top">
            	<div class="logo">
                	<img src="img/banner.jpg" alt="logo">
                </div>
                <div class="dbdhl">
                	<ul>
                    	<li><a href="#">鲜花礼品</a></li>
                        <li><a href="#">自助订花</a></li>
                        <li><a href="#">绿色植物</a></li>
                        <li><a href="#">花之物语</a></li>
                        <li><a href="#">会员中心</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">支付方式</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="left">
            	<div class="dl">
                	<form>
                        <p class="dlym">
                            用户:<input type="text" class="text"><br>
                            密码:<input type="password" class="text"><br>
                        </p>
                        <p class="dlan">
                            <input type="button" value="登录" class="an"/>
                            <input type="button" value="注册" class="an"/>
                            <a href="#">忘记密码</a>
                        </p>
                    </form>
                </div>
                <div class="xhfl">
                    <div class="yt">
                        <h4><span>用途</span></h4>
                        <ul>
                            <li><a href="#">爱情鲜花</a></li>
                            <li><a href="#">生日送花</a></li>
                            <li><a href="#">新年鲜花</a></li>
                            <li><a href="#">家庭用花</a></li>
                            <li><a href="#">亲情用花</a></li>
                            <li><a href="#">道歉鲜花</a></li>
                            <li><a href="#">开业花篮</a></li>
                            <li><a href="#">会议用花</a></li>
                        </ul>
                    </div>
                    <div class="hc">
                        <h4><span>花材</span></h4>
                        <ul>
                            <li><a href="#">玫瑰花</a></li>
                            <li><a href="#">百合花</a></li>
                            <li><a href="#">郁金香</a></li>
                            <li><a href="#">太阳花</a></li>
                            <li><a href="#">康乃磬</a></li>
                            <li><a href="#">马蹄兰</a></li>
                            <li><a href="#">扶朗</a></li>
                            <li><a href="#">剑兰</a></li>
                        </ul>
                    </div>
                    <div class="jg">
                        <h4><span>价格</span></h4>
                        <ul>
                            <li><a href="#">100~200元</a></li>
                            <li><a href="#">200~300元</a></li>
                            <li><a href="#">300~400元</a></li>
                            <li><a href="#">400~500元</a></li>
                            <li><a href="#">500~600元</a></li>
                            <li><a href="#">600~800元</a></li>
                            <li><a href="#">800元以上</a></li>
                        </ul>
                    </div>
                    <div class="kg"><img src="img/leftbottom.jpg"></div>
                </div>
            </div>
            
            <div class="right">
            	<div class="bzkx"></div>
                <div class="bzkx_tp">
                	<ul>
                    	<li><a href="#"><img src="img/new1.jpg" alt="新品上市"></a></li>
                        <li><a href="#"><img src="img/new2.jpg" alt="大酬宾"></a></li>
                        <li><a href="#"><img src="img/new3.jpg" alt="超值优惠"></a></li>
                    </ul>
                </div>
                <div class="xhtj">
                    <ul>
                    	<li><img src="img/flower1.jpg" alt="幸福的味道"><br /><a href="#">幸福的味道</a>¥ 288元</li>
                        <li><img src="img/flower2.jpg" alt="阳光守护你"><br /><a href="#">阳光守护你</a>¥ 300元</li>
                        <li><img src="img/flower3.jpg" alt="温情永远"><br /><a href="#">温情永远</a>¥ 268元</li>
                        <li><img src="img/flower4.jpg" alt="爱无界"><br /><a href="#">爱无界</a>¥ 318元</li>
                        <li><img src="img/flower5.jpg" alt="亲亲宝贝"><br /><a href="#">亲亲宝贝</a>¥ 368元</li>
                        <li><img src="img/flower6.jpg" alt="相信是绿"><br /><a href="#">相信是绿</a>¥ 188元</li>
                        <li><img src="img/flower7.jpg" alt="水晶童话"><br /><a href="#">水晶童话</a>¥ 198元</li>
                        <li><img src="img/flower8.jpg" alt="天使之爱"><br /><a href="#">天使之爱</a>¥ 268元</li>
                    </ul>
                </div>
                <div class="xpss">
                    <ul>
                    	<li><img src="img/flower9.jpg" alt="粉色迷情"><br /><a href="#">粉色迷情</a></li>
                        <li><img src="img/flower10.jpg" alt="海岸的优雅"><br /><a href="#">海岸的优雅</a></li>
                        <li><img src="img/flower11.jpg" alt="百年地中海"><br /><a href="#">百年地中海</a></li>
                        <li><img src="img/flower12.jpg" alt="爱要说出口"><br /><a href="#">爱要说出口</a></li>
                    </ul>
                </div>
                <div class="xhdg">
                    <ul>
                    	<li><a href="#">各种鲜花所代表的意思</a></li>
                        <li><a href="#">花的喜怒哀乐与人的各种感觉</a></li>
                        <li><a href="#">养花与养生之道</a></li>
                        <li><a href="#">每天清晨的第一缕阳关</a></li>
                        <li><a href="#">花香的味道</a></li>
                        <li><a href="#">世界各地关于送花的习俗</a></li>
                        <li><a href="#">种花与送花</a></li>
                        <li><a href="#">手捧一束鲜花的等待</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

CSS代码

/***********************************

QuKin

提示：
.dbdhl：顶部导航栏
.left：左边导航栏
.right：右边导航栏
.dl：用户登录
.xhfl：鲜花分类
.bzkx：本站快讯
.xpss：新品上市
.xhdg：鲜花导购

***********************************/

/*全局变量*/
*{
	margin:0px;
	padding:0px;
}
body{
	margin:0 auto;
	width:700px;
	background-color:#ffd8d9;
}
ul{
	list-style:none;
}
a{
	display:block;
	text-decoration:none;
	color:#000;
}
h4{
	background-color:pink;
	padding:3px 0px 1px 5px;
	margin:0px 18px;
	font-size:12px;
}
.clear{
	clear:both;
}

	/*顶部导航栏*/
	.dbdhl li{
		display:inline-block;
		font-size:15px;
		width:75px;
		padding-right:20px;
	}
	.dbdhl a{
		background:url(../img/button1.jpg) no-repeat;
		width:100px;
		height:30px;
		text-align:center;
		padding-top:7px;
		font-size:12px;
	}
	.dbdhl a:hover{
		color:#FFF;
		background:url(../img/button1_bg.jpg) no-repeat;
		text-decoration:underline;
	}
	/*左边导航栏*/
	.left{
		background-color:#fff;
		width:180px;
		float:left;
		margin-top:0px;
	}
	.zbdhl ul{
		margin:0px;
		padding:5px 0px 0px 25px;
	}
	/*登录*/
		.dl{
			padding:40px 0px 10px 0px;
			background:url(../img/login.jpg) no-repeat;
		}
		.dl a{
			font-size:10px;
			display:inline-block;
		}
		.dlym{   /*登录用户名和密码*/
			margin:1px;
			text-align:left;
			padding:20px 0px 0px 25px;
			font-size:13px;
		}
		.dlan{   /*登录按钮一排*/
			text-align:left;
			font-size:13px;
			padding:5px 0px 0px 25px;
		}
		.dl form input.text{
			border:1px solid black;
			border-left:none;
			border-top:none;
			border-right:none;
			padding:0px;
			width:90px;
		}
		.dl form input.an{
			border:1px solid black;
			height:18px;
			padding:0px;
			background-color:#fff1f1;
		}
		.dl a:hover{
			color:#666;
			text-decoration:underline;
		}
		/*鲜花分类*/
		.xhfl{
			background:url(../img/category.jpg) no-repeat;
			padding-top:50px;
			font-size:13px;
		}
		.xhfl ul{
			padding:5px 22px 15px 22px;
		}
		.xhfl ul li{
			padding:1px 0px 1px 15px;
			border-bottom:1px dashed black;
			background:url(../img/icon1.gif) no-repeat 5px 10px;
		}
		.xhfl a:hover{
			color:#666;
			text-decoration:underline;
		}
		.kg{
			margin-top:16px;
			margin-bottom:-3px;
		}
		/*右边导航栏*/
		.right{
			float:left;
			width:518px;
			margin-left:1px;
			font-size:12px;
		}
		/*本站快讯*/
		.bzkx{
			background:url(../img/latest.jpg) no-repeat;
			padding-top:33px;
			margin:1px 0px 1px 0px;
		}
		.bzkx_tp ul li{
			display:inline-block;
		}
		.bzkx_tp img{
			border:none;
			padding-left:0px;
			width:170px;
		}
		/*鲜花推荐*/
		.xhtj{
			background:url(../img/recommend.jpg) no-repeat;
			padding-top:33px;
			margin:5px 0px 3px 0px;
			background-color:#FFF;
		}
		.xhtj ul,.xpss ul{
			margin:0px;
			padding:6px 5px 5px 8px;
		}
		.xhtj ul li,.xpss ul li{
			text-align:center;
			display:inline-block;
			width:115px;
		}
		.xhtj ul li img,.xpss ul li img{
			border:none;
			margin:5px 0px 3px 0px;
			padding:0px;
		}
		.xhtj a,.xpss a{
			color:#999;
		}
		.xhtj a:hover{
			color:red;
			text-decoration:underline;
		}
	/*新品上市*/
		.xpss{
			background:url(../img/new.jpg) no-repeat;
			padding-top:33px;
			margin:6px 0px 0px 0px;
			background-color:#FFF;
		}
		.xpss a:hover{
			color:red;
			text-decoration:underline;
		}
	/*鲜花导购*/
		.xhdg{
			background:url(../img/tips.jpg) no-repeat;
			padding-top:33px;
			margin:5px 0px 10px 0px;
			background-color:#FFF;
		}
		.xhdg ul{
			margin:0px;
			padding:5px 5px 5px 30px;
		}
		.xhdg ul li{
			padding:1px 0px 1px 12px;
			display:inline-block;
			width:200px;
			background:url(../img/icon2.gif) no-repeat 5px 5px;
		}
		.xhdg a:hover{
			color:red;
			text-decoration:underline;
		}

地址

链接: 百度网盘.
提取码：dggi

ps：可能有一些代码与大神，如果侵犯，请联系我。

QuKie
关注
  • 20
    点赞
  • 踩
  • 94
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html+css花店模板
03-15
html+css花店模板,模板代码齐全。欢迎下载。不要错过，div+css模板源码。
用html实现满屋花的网页
qq_45411328的博客
07-07 1万+
需要完成的样式 模仿完成的样式 思路分析 设置一个大的div背景设置为pink 主题分为上下两部分 上部分：图片和导航 下部分：分为左右 左：ul和li 右分为四部分 实验代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
满屋花HTML+CSS
PIGEON_M的博客
11-20 2917
满屋花代码
满屋花网站主页代码
07-27
满屋花 ，可以说是学web前端一般都做过的例子，界面也都还OK，学习学习。
“满花屋”静态网页编写的架构与解决点
qq_41507282的博客
07-13 868
在实现一个网页的过程中，首先得第一步是要分析这个网页的布局模式 在基本的结构框架下分配好布局再来进行对应区域内内容的实现 首先将整个网页分成4大块儿，分别是如上图 1.图片logo区 2.目录链接区 下面则是左右两栏布局 整体意义上还是两个大的盒子模块 一、图片logo区 插入图片，设置宽度，center居中。 二、目录链接区 建造一个DIV盒子，宽度设置与上方LOGO图片同宽。 用ul li href写入链接内容 ...
网页编程（满屋花、金山打字、打地鼠）——张渣渣_的学习记录（4）
weixin_45809643的博客
09-05 367
张渣渣_的学习记录（4）——网页编程（满屋花、金山打字、打地鼠）满屋花金山打字打地鼠 满屋花 效果图如下： （需要素材的话可以dd我） <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>满屋花</title> <style type="text/css"> /*全局变量*/ *{ margin:0px
香萦满屋鲜花网页模板
01-22
"香萦满屋鲜花网页模板"的CSS代码可能包含精心设计的样式规则，用于调整字体、颜色、布局和动画效果，使网页看起来既专业又一致。 4. **PSD**：PSD文件是Adobe Photoshop的源文件格式，通常包含设计模板的所有图层...
简单的满屋花网站
06-11
【标题】"简单的满屋花网站"所涉及的知识点主要集中在网站开发领域，尤其是与.NET相关的技术栈。这里我们可以理解这个网站可能是一个个人或者小型企业的花卉展示或销售平台，其核心技术构建基于.NET框架。 首先，...
满屋花网页制作源代码,主要是学习div和css的编写
07-24
满屋花网页制作源代码是为初学者设计的一个项目，主要目标是教授如何使用Div和CSS来构建网页布局。Div（Division）是HTML中的一个容器元素，常用于组织页面结构，而CSS（Cascading Style Sheets）则负责定义这些元素...
HTML前端基础小案例（满屋花）
王飞
07-13 9129
满屋花效果图如下 效果图拿到手的第一件事分析整体网页布局， 页面基本框架的搭建 <!-- 文档居中 --> <div class="center"> <!-- 头部 --> <div class="top"> </div> <!-- 导航栏 --> <div class="navlist"> &l...
HTML基础案例之鲜花满屋
09-12
HTML中基础的静态页面制作，例子是以一个鲜花店的网页作为例子。
HTML前端基础小案例（满屋花）-附件资源
03-05
HTML前端基础小案例（满屋花）-附件资源
html鲜花网站课程设计
12-21
一个比较美观的静态网站，使用的技术有css、js、javascript。比较适合html5的课程设计
HTML项目-鲜花浏览网站
06-28
这是个鲜花浏览网站，用到的技术有HTML5、css、javascript，其中包含了15个界面
网上花店网页代码 html静态花店网页设计制作 dw静态鲜花网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
最新发布
wx___BJ050106的博客
12-14 254
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
html满屋花源代码,满屋花.html
weixin_35881820的博客
06-24 1282
无标题文档.div001{width:700px;height:150px;background-color:#C6C;float:left;}.div002{width:700px;height:50px;background-color:#60C;float:left;}.div003{width:150px;height:600px;background-color:#00F;float:l...
满屋花网页代码_编程技术—网页制作<二>
weixin_39569753的博客
12-01 395
每天看本书,大家好,我是元哥今天接着说网页制作~~根据昨天的思路,今天主要学习Html技术,按照这个思路今天进行了学习,学完之后总结了一些感悟,首先想要说明一下,对于刚开始学编程的人来说,可能觉得会有些难,的确第一次操作有很多的细节和不熟悉,会显得比较生疏,但是当我们抱着每天进步一点点的心态去学习,不给自己一下子设定太大的目标的话,每天坚持学习,并且学会反思和灵活致用,是能看到一定的效果...
CSS+DIV实例——鲜花店
热门推荐
今天进步一点点~~
05-02 1万+
前两天在学习C
HTML+CSS学习指南：从入门到精通
"HTML+CSS从入门到精通（中文）.pdf" HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的基础技术。HTML负责网页的内容结构，而CSS则负责网页的样式和布局。对于初学者来说，理解和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值