个人案例装修公司官网

最新推荐文章于 2024-09-02 14:40:08 发布

贝多芬的芬

最新推荐文章于 2024-09-02 14:40:08 发布

阅读量290

点赞数

分类专栏： Web 文章标签：前端

本文链接：https://blog.csdn.net/qq_39460362/article/details/89192025

版权

Web 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>阜阳市森歌健康装饰有限责任公司</title>
		<link rel="stylesheet" type="text/css" href="css/one.css" />
		<script type="text/javascript" src="js/new_file.js"></script>
		<embed src="video/买辣椒也用券 - 起风了（Cover 高橋優）.mp3" hidden="true" autostart="true" loop="true"></embed>
	</head>

	<body>
		<div class="hello">
			<!--顶部绿色区域-->
			<div class="header-border"></div>
			<div class="header">
				<div class="header-left">
					<div class="header-body">
						<a href="index.html" target="_blank">新闻资讯 |</a>
						<a href="index.html" target="_blank">关于我们 |</a>
						<a href="index.html" target="_blank">联系我们 |</a>
						<a href="index.html" target="_blank">返回首页 </a>
					</div>
					<div class="header-right">
						<p>欢迎来到森歌健康装饰网！</p>
					</div>
				</div>
			</div>
			<!--标题内容-->
			<div class="hd">
				<div class="hd-left">
					<div class="fy">
						<h2 style="color: #0D9855;">阜阳森歌健康装饰 - 装修行业知名品牌</h2>
						<p class="yyy">18年装修经验 <span style="color: #FF9000;">私人订制</span>专业设计团队</p>
					</div>
				</div>
				<div class="hd-right">
					<h3>咨询服务热线：</h3>
					<span>7139507</span>
				</div>
			</div>
			<!--菜单栏 导航-->
			<div class="dh">
				<div class="dh-jz">
					<a href="index.html">网站首页</a>
					<a href="index.html">装修风格</a>
					<a href="index.html">私人订制</a>
					<a href="index.html">客户案例</a>
					<a href="index.html">经济型</a>
					<a href="index.html">高档型</a>
					<a href="index.html">至尊型</a>
					<a href="index.html">联系我们</a>
					<a href="index.html">在线询单</a>
				</div>
			</div>
			<!--轮播图-->
			<div class="lbt">
				<img src="img/lbt.jpg" />
			</div>
			<!--白色区域-->
			<div class="hjdkdk"></div>
			<!--找案例-->
			<div class="anli">
				<div class="anli-body">
					<div class="bt">
						<p class="al ala">找案例</p>
						<p class="text">甄选城中优质成功案例，丰富选择实现理想家</p>
					</div>
					<div class="alhz">
						<div class="qdck">
							<a href="index.html" class="fg">复式房装饰</a>
							<a href="index.html" class="fg">公寓装饰</a>
							<a href="index.html" class="fg">别墅装饰</a>
							<a href="index.html" class="fg">工装展示</a>
							<a href="index.html" class="fg">其他</a>
							<a href="index.html" class="fg">全部案例</a>
						</div>
					</div>
					<div class="ps">
						<img src="img/ps (1).jpg" />
						<img src="img/ps (2).jpg" />
						<img src="img/ps (3).jpg" />
						<img src="img/ps (4).jpg" />
						<img src="img/ps (5).jpg" />
						<img src="img/ps (6).jpg" />
					</div>
				</div>
			</div>
			<!--我们的优势-->
			<div class="youshi">
				<div class="ys-h">
					<p class="bt2">我们的优势</p>
					<p class="nr">SUPERIOR SERVICE</p>
				</div>
				<div class="ys-ps">
					<ul>
						<li>
							<div class="box1">
								<img src="img/emp-04.png" />
								<h3>环保材料保证</h3>
								<h4>MATERIAL ASSURANCE</h4>
							</div>
						</li>
						<li>
							<div class="box2">
								<img src="img/emp-01.png" />
								<h3>工程质量保证保证</h3>
								<h4>QUALITY ASSURANCE</h4>
							</div>
						</li>
						<li>
							<div class="box3">
								<img src="img/emp-02.png" />
								<h3>工程监管保证</h3>
								<h4>SUPERVISE ASSURANCE</h4>
							</div>
						</li>
						<li>
							<div class="box4">
								<img src="img/emp-03.png" />
								<h3>施工团队保证</h3>
								<h4>TEAM ASSURANCE</h4>
							</div>
						</li>
					</ul>
				</div>
				<div class="fwkkfwf"></div>
				<!--找风格-->
				<div class="zfg">
					<div class="zfg-bt">
						<p class="zfg-yy">找风格</p>
						<p class="zaxw">搜索海量家居美图，发现新家装修灵感</p>
					</div>
					<div class="alhz2">
						<div class="qdck2">
							<a href="index.html" class="fg">复式房装饰</a>
							<a href="index.html" class="fg">公寓装饰</a>
							<a href="index.html" class="fg">别墅装饰</a>
							<a href="index.html" class="fg">工装展示</a>
							<a href="index.html" class="fg">其他</a>
							<a href="index.html" class="fg">全部案例</a>
						</div>
					</div>
					<div class="fg-ps">
						<img src="img/fg (1).jpg" />
						<img src="img/fg (2).jpg" />
						<img src="img/fg (3).jpg" />
						<img src="img/fg (4).jpg" />
						<img src="img/fg (5).jpg" />
						<img src="img/fg (6).jpg" />
					</div>
				</div>
				<!--服务介绍-->
				<div class="js">
					<div class="js-1">
						<img src="img/one.jpg" />
					</div>
					<h1>服务流程</h1>
					<div class="js-2">
						<img src="img/tow.jpg" />
					</div>
					<div class="dibu">
						<div class="header-border1"></div>
						<div class="dibu-bj">
							<div class="dibu-bj-ps">
								<img src="img/logo.png" />
							</div>
							<div class="dibu-bj-ps2">
								<h3>地址 ADDRESS</h3>
								<p>地址：安徽省阜阳市森歌健康装饰有限责任公司</p>
								<p>电话：7139507</p>
								<p>传真：7139507 邮箱：service@sgjkzs.com</p>
								<p>
									<a href="index.html">链接：森歌健康装饰</a>
								</p>
							</div>
							<div class="dibu-bj-ps3">
								<h3>导航 NAVIGATION</h3>
								<p>
									<a href="index.html">装修风格</a>
								</p>
								<p>
									<a href="index.html">私人订制</a>
								</p>
								<p>
									<a href="index.html">客户案例</a>
								</p>
								<p>
									<a href="index.html">经济型</a>
								</p>
								<p>
									<a href="index.html">高档型</a>
								</p>
								<p>
									<a href="index.html">至尊型</a>
								</p>
								<p>
									<a href="index.html">联系我们</a>
								</p>
								<p>
									<a href="index.html">在线询单</a>
								</p>
							</div>
							<div class="dibu-sys">
								<h3>扫一扫</h3>
								<img src="img/ewm.jpg" />
							</div>
						</div>
					</div>
					<!--版权信息-->
					<div class="bq">
						<p class="bqwa">Copyright 2019 北京芬迪家居饰品家居有限公司版权所有
							<a href="http://www.miitbeian.gov.cn/" target="_blank">京备案ICP 000000001</a>
						</p>
					</div>
				</div>
			</div>
	</body>

</html>
<!--<a href="http://www.miitbeian.gov.cn/" target="_blank">-->
<!--<p>	Copyright 2019 北京芬迪家居饰品家居有限公司版权所有 </p>-->

css代码

* {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
}

.header-border {
	height: 7px;
	background-color: #0D9855;
}

.header {
	height: 25px;
	width: 1400px;
	margin: 0 auto;
	/*border: 1px solid red;*/
}

.header-body {
	width: 320px;
	height: 25px;
	background-color: #0D9855;
	border-radius: 6px;
	text-align: center;
	line-height: 17px;
	/*margin: 0 right;*/
	position: fixed;
	right: 200px;
}

.header-body a {
	color: white;
	font-size: 14px;
}

.header-right p {
	margin-left: 200px;
	font-size: 12px;
	padding-top: 8px;
}

.hd {
	height: 60px;
	width: 1300px;
	margin: 0 auto;
	/*border: 1px solid red;*/
	margin-top: 20px;
}

.fy {
	margin-left: 20px;
	width: 410px;
}

.yyy {
	border-top: 1px solid gray;
}

.hd-left {
	float: left;
	padding: 2px 0;
}

.hd-right {
	float: right;
}

.hd-right span {
	color: #FF9000;
	font-size: 28px;
}


/*菜单栏 导航*/

.dh {
	height: 60px;
	margin-top: 10px;
	background-color: #0D9855;
}

.dh-jz {
	width: 1392px;
	height: 100%;
	margin: 0 auto;
}

.dh-jz a {
	display: inline-block;
	height: 100%;
	width: 150px;
	text-align: center;
	line-height: 54px;
	font-size: 20px;
	margin: 0 auto;
	color: white;
}

.dh-jz a:hover {
	background-color: #FF9000;
}


/*轮播图*/

.lbt img {
	height: 650px;
	width: 100%;
}

.hjdkdk {
	height: 40px;
	background: white;
}


/*找案例*/

.anli {
	height: 840px;
	width: 100%;
}

.anli-body bt {
	background: red;
	margin: 0 auto;
}

.al {
	height: 50px;
	width: 1100px;
	margin: 0 auto;
}

.ala {
	margin: 0 auto;
	text-align: center;
	color: black;
	font-family: "宋体";
	font-size: 50px;
}

.text {
	width: 100%;
	text-align: center;
	margin-top: 15px;
	font-size: 13.5px;
	color: grey;
}

.alhz {
	height: 75px;
	width: 100%;
	margin: 0 auto;
}

.alhz a {
	display: inline-block;
	margin: 0 auto;
	width: 110px;
	height: 50px;
	text-align: center;
	line-height: 45px;
	margin-top: 20px;
	padding: 0;
	margin-left: -6px;
	border-collapse: separate;
	color: black;
}

.alhz a:hover {
	color: green;
}

.qdck {
	width: 700px;
	margin: 0 auto;
}

.fg {
	border: 1px solid lightslategray;
}


/*图片内容*/

.ps {
	width: 1210px;
	height: 600px;
	margin: 50px auto;
}

.ps img {
	width: 380px;
	height: 258px;
	padding: 10px;
}


/*我们的优势*/

.youshi {
	height: 400px;
	background: #F5F5F5;
	width: 100%;
}

.ys-h {
	padding-top: 40px;
}

.bt2 {
	margin: 0 auto;
	text-align: center;
	color: black;
	font-family: "宋体";
	font-size: 50px;
}

.nr {
	width: 100%;
	text-align: center;
	margin-top: 15px;
	font-size: 13.5px;
	color: grey;
}

.ys-ps {
	height: 200px;
	width: 1300px;
	margin: 0 auto;
}

.box1,
.box2,
.box3,
.box4 {
	width: 150px;
	height: 167px;
	border-bottom: 2px solid #008000;
	text-align: center;
	float: left;
	margin-left: 150px;
	padding-top: 30px;
}


/*找风格区域*/

.zfg {
	height: 500px;
	width: 100%;
}

.zfg-bt {
	height: 100px;
	width: 100%;
	margin-top: 105px;
}

.zfg-yy {
	margin: 0 auto;
	text-align: center;
	color: black;
	font-family: "宋体";
	font-size: 50px;
}

.zaxw {
	width: 100%;
	text-align: center;
	margin-top: 15px;
	font-size: 13.5px;
	color: grey;
}


/*llllllllllllll*/

.alhz2 {
	height: 75px;
	width: 100%;
	padding-bottom: 60px;
	margin: 0 auto;
}

.qdck2 {
	width: 700px;
	margin: 0 auto;
}

.alhz2 a {
	display: inline-block;
	margin: 0 auto;
	width: 110px;
	height: 50px;
	text-align: center;
	line-height: 45px;
	margin-top: 20px;
	padding: 0;
	margin-left: -6px;
	border-collapse: separate;
	color: black;
}

.alhz2 a:hover {
	color: green;
}

.fg-ps img {
	width: 313px;
	height: 464px;
	margin: 0;
	padding: 0;
}


/*服务介绍什么的*/

.js {
	height: 1000px;
	width: 100%;
	margin: 0 auto;
	margin-top: 200px;
	text-align: center;
	padding-top: 100px;
}

.js-1 img {
	height: 560px;
	width: 1200px;
}

.js h1 {
	margin-top: 50px;
	color: #778899;
}

.js-2 img {
	margin-top: 100px;
	text-align: center;
	height: 180px;
	width: 1280px;
}


/*底部内容*/

.header-border1 {
	margin-top: 50px;
	height: 7px;
	background-color: #0D9855;
}

.dibu-bj {
	height: 258px;
	width: 100%;
	background: #474747;
}

.dibu-bj-ps {
	width: 187px;
	height: 258px;
	background: #434343;
	float: left;
	margin-left: 200px;
}

.dibu-bj-ps img {
	margin-top: 38px;
}

.dibu-bj-ps2 {
	width: 340px;
	height: 258px;
	margin-left: 115px;
	float: left;
	padding-top: 50px;
}

.dibu-bj-ps2 p {
	font-size: 15px;
	color: white;
	text-align: left;
	margin-top: 5px;
}

.dibu-bj-ps2 h3 {
	text-align: left;
	color: white;
	margin-bottom: 35px;
}

.dibu-bj-ps2 a {
	color: white;
}


/*2*/

.dibu-bj-ps3 {
	width: 340px;
	height: 258px;
	margin-left: 115px;
	float: left;
	padding-top: 50px;
	text-align: right;
}

.dibu-bj-ps3 p {
	font-size: 15px;
	color: white;
	text-align: left;
	margin-top: 5px;
}

.dibu-bj-ps3 h3 {
	text-align: left;
	color: white;
	margin-bottom: 35px;
	margin-left: 20px;
}

.dibu-bj-ps3 a {
	color: white;
	float: left;
	margin-left: 20px;
	margin: 10px;
}

.dibu-sys h3 {
	color: white;
}

.dibu-sys img {
	height: 88px;
	width: 88px;
	padding-top: 20px;
}

.dibu-sys {
	width: 340px;
	height: 258px;
	margin-left: 115px;
	float: left;
	padding-top: 50px;
	text-align: center;
}


/*版权信息*/

.bq {
	height: 30px;
	width: 100%;
	background: black;
}

.bqwa {
	float: right;
	color: white;
	margin-top: -48px;
	padding-right: 100px;
}

.bqwa a {
	color: white;
}

.hello {
	margin: 0;
	padding: 0;
}

成品文件