Html+Css实现 启橙装饰网 项目

最新推荐文章于 2022-04-28 14:58:47 发布
最新推荐文章于 2022-04-28 14:58:47 发布
阅读量1.6k 收藏 12
点赞数 4
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdigaAdele/article/details/117048461
版权

项目效果
实现代码：
（主html代码部分）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>启橙装饰</title>
		<link href="css/public.css" rel="stylesheet"/>
		<link href="css/index.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="top">
			<div class="top_content">联系电话：0573-11828638</div>
		</div>
		<div class="nav">
			<div class="nav_content">
				<img src="./img/logo.png" alt="">
				<ul>
					<li class="nav_content_selected">首页</li>
					<li>关于我们</li>
					<li>联系我们</li>
				</ul>
			</div>
		</div>
		<div class="banner">
			<img src="img/banner.png" alt="">
		</div>
		<div class="process">
			<ul class="process_content">
				<li>
					<img src="img/icon1.png" alt="">
					<p>快速在线预约</p>
				</li>
				<li>
					<img src="img/icon2.png" alt="">
					<p>免费上门量房</p>
				</li>
				<li>
					<img src="img/icon3.png" alt="">
					<p>量身定制方案</p>
				</li>
				<li>
					<img src="img/icon4.png" alt="">
					<p>签订合同</p>
				</li>
				<li>
					<img src="img/icon5.png" alt="">
					<p>靠谱施工全程监管</p>
				</li>
				<li class="P-last">
					<img src="img/icon6.png" alt="">
					<p>竣工验收</p>
				</li>
			</ul>
		</div>
		<div class="pk">
			<p>为什么要3家装修公司PK</p>
			<ul class="pk_content" style="margin: 0 auto;">
				<li><img src="img/show1.png" alt=""></li>
				<li><img src="img/show2.png" alt=""></li>
				<li><img src="img/show3.png" alt=""></li>
			</ul>
		</div>
		<div class="praise">
			<p>为什么选择启橙口碑装修</p>
			<ul class="praise_content" style="margin: 0 auto;">
				<li><img src="img/adv1.png" alt=""></li>
				<li><img src="img/adv2.png" alt=""></li>
				<li><img src="img/adv3.png" alt=""></li>
				<li><img src="img/adv4.png" alt=""></li>
				<li><img src="img/adv5.png" alt=""></li>
				<li><img src="img/adv6.png" alt=""></li>
			</ul>
		</div>
		<div class="service">
			<p>启橙如何确保口碑装修</p>
			<ul class="service_content" style="margin: 0 auto;">
				<li><img src="img/service1.png" alt=""></li>
				<li><img src="img/service2.png" alt=""></li>
				<li><img src="img/service3.png" alt=""></li>
				<li><img src="img/service4.png" alt=""></li>
			</ul>
		</div>
		<div class="recommend">
			<p>启橙优选口碑装修公司</p>
			<ul class="recommend_content" style="margin: 0 auto;">
				<li><img src="img/company1.png" alt=""></li>
				<li><img src="img/company2.png" alt=""></li>
				<li><img src="img/company3.png" alt=""></li>
				<li><img src="img/company4.png" alt=""></li>
				<li><img src="img/company5.png" alt=""></li>
				<li><img src="img/company6.png" alt=""></li>
				<li><img src="img/company7.png" alt=""></li>
				<li><img src="img/company8.png" alt=""></li>
				<li><img src="img/company9.png" alt=""></li>
			</ul>
		</div>
		<div class="customer">
			<p>TA们都选择了启橙装饰</p>
			<div class="customer_table">
				<table class="add"  cellpadding="0">
					<tr>
						<td>太原的</td>
						<td>李小姐</td>
						<td>一站式整装包</td>
						<td>装修监理上门水电验收</td>
						<td>2018/08/031</td>
					</tr>
					<tr><td>太原的</td>
						<td>李小姐</td>
						<td>一站式整装包</td>
						<td>装修监理上门水电验收</td>
						<td>2018/08/031</td></tr>
					<tr><td>太原的</td>
						<td>李小姐</td>
						<td>一站式整装包</td>
						<td>装修监理上门水电验收</td>
						<td>2018/08/031</td></tr>
					<tr><td>太原的</td>
						<td>李小姐</td>
						<td>一站式整装包</td>
						<td>装修监理上门水电验收</td>
						<td>2018/08/031</td></tr>
					<tr><td>太原的</td>
						<td>李小姐</td>
						<td>一站式整装包</td>
						<td>装修监理上门水电验收</td>
						<td>2018/08/031</td></tr>
					<tr><td>太原的</td>
						<td>李小姐</td>
						<td>一站式整装包</td>
						<td>装修监理上门水电验收</td>
						<td>2018/08/031</td></tr>
					<tr><td style="border-bottom:none;">太原的</td>
						<td style="border-bottom:none;">李小姐</td>
						<td style="border-bottom:none;">一站式整装包</td>
						<td style="border-bottom:none;">装修监理上门水电验收</td>
						<td style="border-bottom:none;">2018/08/031</td></tr>
				</table>
			</div>
			<div class="customer_input">
				<p1 id="p111"><b>免费申请口碑装修</b></p1><br>
				<p2>提交您的信息专业家装顾问1对1服务</p2>
				<form action="#" method="get">
					<input type="text" name="name" id="ina" value="您的姓名" />
					<input type="text" name="pid" id="ina" value="您的手机号" />
					<input type="text" name="sc" id="ina" value="您的面积" />
					<input type="submit" id="inb" value="立即报名" />
				</form>
			</div>
		</div>
		<div class="footer">
			<div class="footer_ul">
				<ul>
					<li>关于我们</li>
					<li>联系我们</li>
					<li>友情链接</li>
				</ul>
			</div><br><br><br><br>
			<p>装修咨询热线：0351-2154753&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp商家加盟热线：0351-2154756</p>
			<div class="footer_content">
				<img src="img/qrCode.png" alt="">
				<p class="footer_content_p">微信客服</p>
				<p2>周一到周日：8：30-24：00</p2>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom_content">晋ICP备 1007809号-1 山西独特壹家装饰工程有限公司 版权所有</div>
		</div>
	</body>
</html>

（CSS修饰类）

/* 首页样式 */

/* 顶部样式 */
.top{
	background-color: #444444;
}
.top_content{
	width: 1200px;
	height: 35px;
	line-height: 35px;
	margin: 0 auto;
	text-align: right;
	color:#ffffe1;
	font-size: 18px;
}

.nav{
	background-color: #ffffff;
	width: 1200px;
	margin: 0 auto;
}
.nav_content{
	overflow: hidden;
}
.nav_content img{
	float: left;
	margin-top: 13px;
}
.nav_content ul{
	float: right;
}
.nav_content ul li{
	float: left;
	margin-left: 60px;
	line-height: 80px;
}
.nav_content_selected{
	color:red
}

.banner{
	margin: 0 auto;
}
.banner img{
	width: 100%;
}

.process{
	padding: 80px 0;

}
.process_content{
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}
.process_content li{
	float: left;
	width: 196px;
	text-align: center;
	font-size: 17px;
	background-image: url(../img/arrow.png) ;
	background-position: right center;
	background-repeat:no-repeat ;
}
.process_content li p{
	padding: 0px 0;
}
.P-last{
	background-image:none ;
}

.pk{
	height: 659;
	background-color: #f2f2f1;
}
.pk p{
	padding: 80px 0;
	font-size: 40px ;
	text-align: center;
}
.pk_content{
	width: 1200px;
	overflow: hidden;
	padding-bottom: 82px;
	text-align: center;
}
.pk_content li{
	float: left;
	margin: 0 auto;
	width: 373px;
	padding:10px
}

.praise{
}
.praise p{
	padding: 80px 0;
	font-size: 36px ;
	text-align: center;
	color: #333333;
}
.praise_content{
	width: 1200px;
	overflow: hidden;
	padding-bottom: 82px;
	text-align: center;
}
.praise_content li{
	float: left;
	margin: 0 auto;
	padding: 7px;
	width: 386px;
}

.service{
	background-color: #F2F2F1;
}
.service p{
	padding: 80px 0;
	font-size: 36px ;
	text-align: center;
	color: #333333;
}
.service_content{
	width: 1200px;
	overflow: hidden;
	padding-bottom: 82px;
	text-align: center;
}
.service_content li{
	float: left;
	margin: 0 auto;
	padding: 8px;
	width: 283px;
}

.recommend{}
.recommend p{
	padding: 80px 0;
	font-size: 36px ;
	text-align: center;
	color: #333333;
}
.recommend_content {
	width: 1200px;
	overflow: hidden;
	padding-bottom: 82px;
	text-align: center;
}
.recommend_content li{
	float: left;
	margin: 0 auto;
	padding: 8px;
	width: 384px;
}

.customer{
	height: 650px;
	background-color: #F2F2F1;
	overflow: hidden;
}
.customer p {
	padding: 80px 0;
	font-size: 36px ;
	text-align: center;
	color: #333333;
}
.customer_table{
	float: left;
	background-color: #FFFFFF;
	width: 690px;
	height: 340px;
	color: #333333;
	font-size: 14px;
	line-height: 45px;
	margin-left: 260px;
	border: 1px solid #333333;
	border-radius:20px ;
	margin-bottom: 80px;
}
.customer_table ul li{
	border-bottom:1px dashed #000;
	padding-left: 50px;
}
.customer_table .add tr td{
	border-bottom:1px dashed #000;
	padding-left: 50px;
}
.customer_table_end{
	border-bottom:none;
}

.customer_input{
	float: left;
	width: 290px;
	height: 340px;
	margin-left: 30px;
	background-color: #FFFFFF;
	margin-right: 260px;
	border: 1px solid #333333;
	border-radius:10px ;
	text-align: center;
	overflow: hidden;
}
.customer_input p1{
	line-height: 36px;
	font-size: 20px;
	color: #fa4c07;
	
}
.customer_input p2{
	line-height: 36px;
	font-size: 14px;
	color: #bbbbc1;
}
#ina{
	margin-top: 14px;
	height: 36px;
	width: 226px;
	border: 1px solid #bbbbc1;
	border-radius:10px;
	font-size: 15px;
	color: #bbbbc1;
}
#inb{
	margin-top: 14px;
	height: 36px;
	width: 226px;
	background-color:#fa4c07 ;
	border: 1px solid #bbbbc1;
	border-radius:10px;
	font-size: 15px;
	color: white;
}

.footer{
	background-color: rgb(68,68,68);
	overflow: hidden;
}
.footer_ul{
	padding-top: 40;
	width: 1200px;
}
.footer_ul li{
	color: #FFFFFF;
	float: left;
	margin-left: 60px;
	line-height: 80px;
	font-size: 17;
}
.footer p{
	color: #FFFFFF;
	margin-left: 60px;
	text-align: left;
}
.footer_content{
	float: right;
	text-align: center;
	padding-right: 160px;
	padding-bottom: 10px;
}
.footer_content img{
	width: 110;
}
.footer_content p{
	color: #ffffff;
	font-size: 13px;
	padding-top: 16px;
}
.footer_content p2{
	color: #b2ccb2;
	font-size: 10px;
}

.bottom{
	background-color: black;
}
.bottom_content{
	background-color: black;
	width: 100%;
	height: 56px;
	line-height: 56px;
	margin: 0 auto;
	text-align: center;
	color:#ccab7d;
	font-size: 13px;
}

以及一个通用清除默认格式的css：

/* 公共的样式，清除默认样式 */
/*公共样式*/
body{
	font-family: "MicrosoftYaHei";
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,table,tr,td{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}



a{
	text-decoration: none;
	color: inherit;
}
h2{
	font-size: 36px;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clear:after{
	display: block;
	content: "";
	clear: both;
}

相关素材：

链接：https://pan.baidu.com/s/1OFcjRbHKhA19g4famQr2Rg 
提取码：1231 
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V4的分享
Adiga无线丢人
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端项目案例 代码部分
hlt_bk的博客
05-19 1483
html： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/public.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/&g
橙色装修设计公司的asp网站源码 免费下载
09-03
模板介绍： 装饰/装修设计公司网站模板，风格大气，界面整洁美观，适合装修公司，设计公司，建筑公司类网站建设 宽度：1000px 对齐：居中 主色：橙色 结构：div+css 运行环境：asp.net2.0(或以上） 后台地址：pageadmin网站管理系统
免费模版_橙色装修设计公司网站
12-30
模板介绍： 装饰/装修设计公司网站模板，风格大气，界面整洁美观，适合装修公司，设计公司，建筑公司类网站建设 宽度：1000px 对齐：居中 主色：橙色 结构：div+css 运行环境：asp.net2.0(或以上） 后台地址：pageadmin网站管理系统
基于HTML/CSS编写饰品门户网站
07-21
此课程以一个“饰品网站“首页为原型，讲解HTML和CSS网站制作的相关基础知识(包括完整的构建文档)。 面向人群：Web开发初学者 学习前提：了解HTML/CSS基础概念和语法 核心知识点： 1. DIV+CSS布局基础 2. CSS float浮动排列 3. CSS margin、padding设置边距 4. …
装修装饰网站源码
01-02
装修装饰网站源码，是一款很不错的源码文件，可以自己修正各功能和应用
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，虽然不是非要把网站做的效果很好，但是代码的工整和文件夹的放置还是需要把这种表面功夫做好，这样你才能得到更好的分数而且不会被怀疑是代做的。适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
免费网站制作工具_橙色装修设计公司网站源码
03-19
模板介绍： 装饰/装修设计公司网站模板，风格大气，界面整洁美观，适合装修公司，设计公司，建筑公司类网站建设 宽度：1000px 对齐：居中 主色：橙色 结构：div+css 运行环境：asp.net2.0(或以上） 后台地址：pageadmin网站管理系统
启橙装饰项目需要的图片
hlt_bk的博客
05-24 179
在这里插入图片描述
HTML/CSS网页制作-----家居网
热门推荐
qq_50352386的博客
01-22 1万+
目录 网页优化 HTML部分代码 css部分代码 效果展示 网页优化 1， 抽取css公共样式 2， 制作成模板页（母版页） 目的：减少后期其他页面的代码复制，建议把首页制作完成后，另存为一个模板页，保留相同的部分 3，网页页面分级说明（面试可能会问） 一级页面：首页 新闻和产品的封面页 二级页面：网站中的各种列表页（新闻列表，产品列表） ...
HTML+CSS静态项目--仿京东首页
N374471906的博客
10-03 2672
这次一共写了四个页面，都是模仿京东的页面来写的，主要写了首页，商品页面，商品详情页面以及用户注册四个页面，源代码可参照https://github.com/Labef-Peppa/imitate-jd.git 地址直接git-clone下载，下载后的jingdong文件夹就是整个所有html+css文件以及所有的图片文件 具体效果图如下： 整个四个静态页面编写过程中可以改进的地方以及不会写的还有新学的知识： 1.首先网页的标志图片，要使用ico文件，可以在bitbug.com网站生成ico文
房屋装修html5网站模板
04-02
房屋装修html5网站模板
建站程序_橙色装修设计公司网站模版
01-24
模板介绍： 装饰/装修设计公司网站模板，风格大气，界面整洁美观，适合装修公司，设计公司，建筑公司类网站建设 宽度：1000px 对齐：居中 主色：橙色 结构：div+css 运行环境：asp.net2.0(或以上） 后台地址：pageadmin网站管理系统
HTML+CSS+ajax+php+mysql实现登录
09-30
HTML+CSS+ajax+php+mysql实现登录。有数据库建表语句。比较简单 适合新手。也是新手学习，踩了很多坑（有坑的地方代码备注比较清楚了）。提供给新手门共同学习。
HTML5房屋装饰工具 自定义房屋各个部位
08-23
这是一个基于HTML5和CSS3的房屋装饰工具，工具为房屋的各个部位提供了不同的材料和颜色，点击相应的材料即可将对应部位的材料切换成所选的。这个工具有点类似人物形象换装工具，可以更换人物每个部位的穿着。另外这个工具的知识点在利用CSS3实现3D的动画特效，当你移动鼠标时你可以看到房屋的各个侧面情况。
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
HTML+CSS+JS 实现跨年祝福效果
12-16
纯HTML+CSS+JS 实现跨年祝福效果，跨年倒计时10秒钟，背景音乐里的声音也是倒数10秒钟，完美切合，鼠标点击产生烟花效果，并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
抽奖转盘 HTML+CSS+JS实现
10-17
HTML+CSS+JS 实现的 通过json 动态生成文本、图片 、转盘概率 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的
制作移动端静态网页（房屋装饰网站）
m0_57823924的博客
04-28 2456
1.创建house.html 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- width=device-width 当前窗口宽度等于100% initial-scale=1 缩放级别为1--> <!-- 步骤一：适配移动端视口 --> <meta name="viewport" content="..
网站装饰html代码,html常用装饰代码分享
weixin_28836507的博客
06-07 2363
html常用装饰代码分享为什么总是有人嘲笑我们的网站台土了？在html5占领着整个互联网之时，想透过网页抓住所有人的眼球，因循守旧是行不通的。因此，有你不能不知道的HTML常用代码。只有熟悉掌握了常用的HTML代码，你才能在编写网页的时候做到行云流水，用处处流露着细腻和创意的动效细节打动所有人。大家知道html常用装饰代码吗?下面我们就给大家详细介绍一下吧!(一)html下雨效果代码这是一个HTM...
基于html+css+js的毕设项目
最新发布
12-26
基于HTML+CSS+JavaScript的毕设项目可以有很多种选择，以下是两个例子： 1. 基于HTML+CSS+JavaScript的在线购物网站 这个项目可以包括用户注册登录、商品展示、购物车管理、订单生成等功能。你可以使用HTML来构建...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值