1. 编程号首页

Html+Css实现 启橙装饰网 项目「建议收藏」

编程小号 • • 未分类

Html+Css实现 启橙装饰网 项目「建议收藏」实现代码：（主html代码部分）!DOCTYPEhtmlhtml head metacharset=”utf-8″/ title启橙装饰/title linkhr

项目效果
实现代码：
（主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的分享

今天的文章Html+Css实现 启橙装饰网 项目「建议收藏」分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/63785.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注