web前端项目案例代码部分

ゞ浴缸里的玫瑰 2023-01-22 12:49 188阅读 0赞

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"/>
    	</head>
    	<body>
    		
    		<div class="top">
    			<div class="content">
    				联系电话：0573-11828638
    			</div>
    		</div>
    		
    		
    		<div class="nav">
    			<div class="content">
    				<img src="img/logo.png" alt=""/>
    				<ul>
    					<li class="selected">首页</li>
    					<li>关于我们</li>
    					<li>联系我们</li>
    				</ul>
    			</div>
    		</div>
    		
    		
    		<div class="banner">
    			<img src="img/banner.png" >
    		</div>
    		
    		
    		<div class="process">
    			<ul class="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="last">
    					<img src="img/icon6.png" alt="">
    					<p>竣工验收</p>
    				</li>
    			</ul>
    		</div>
    		
    		
    		<div class="pk">
    			<div class="content">
    				<p>为什么要3家装修公司PK</p>
    				<img src="img/show1.png" >
    				<img src="img/show2.png" >
    				<img src="img/show3.png" >
    			</div>
    		</div>
    		
    		
    		<div class="spruce">
    			<div class="content">
    				<p>为什么选择启橙口碑装修</p>
    				<div class="b1">
    					<img src="img/adv1.png" >
    					<img src="img/adv2.png" >
    					<img src="img/adv3.png" >
    				</div>
    				<div class="b2">
    					<img src="img/adv4.png" >
    					<img src="img/adv5.png" >
    					<img src="img/adv6.png" >
    				</div>
    			</div>
    		</div>
    		
    		
    		<div class="ensure">
    			<div class="content">
    				<p>启橙如何确保口碑装修</p>
    				<img src="img/service1.png" >
    				<img src="img/service2.png" >
    				<img src="img/service3.png" >
    				<img src="img/service4.png" >
    			</div>
    		</div>
    		
    		
    		<div class="company">
    			<div class="content">
    				<p>启橙优选口碑装修公司</p>
    				<div class="block1">
    					<img src="img/company1.png" >
    					<img src="img/company2.png" >
    					<img src="img/company3.png" >
    				</div>
    				<div class="block2">
    					<img src="img/company4.png" >
    					<img src="img/company5.png" >
    					<img src="img/company6.png" >
    				</div>
    				<div class="block3">
    					<img src="img/company7.png" >
    					<img src="img/company8.png" >
    					<img src="img/company9.png" >
    				</div>
    			</div>
    		</div>
    		
    		
    		<div class="they">
    			<div class="content">
    				<p>TA们都选择了启橙装饰</p>
    				<table border="0" cellspacing="0" cellpadding="0" class="tb1">
    					<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>太原的</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>
    				</table>
    				<form class="f1">
    					<p>免费申请口碑装修</p>
    					<p>提交您的信息专业家装顾问1对1服务</p>
    					<input type="text" placeholder="您的姓名" /><br>
    					<input type="text" placeholder="您的手机号" /><br>
    					<input type="text" placeholder="您的面积" /><br>
    					<input type="submit" value="立即报名"/>
    				</form>
    			</div>
    		</div>
    		
    		
    		<div class="bnav">
    			<div class="content">
    				<div class="lt">
    					<p>关于我们</p>
    					<p>联系我们</p>
    					<p>友情链接</p>
    				</div>
    				<div class="lb">
    					<p>装修咨询热线：0531-2154758</p>
    					<p>商家加盟热线：0531-2154756</p>
    				</div>
    				<ul class="rt">
    					<li><img src="img/qrCode.png" ></li>
    					<li><p>微信客服</p></li>
    					<li><p>周一到周日：8：30-24：00</p></li>
    				</ul>
    			</div>
    		</div>
    		
    		<div class="bottom">
    			<div class="content">
    				<p>晋ICP备 1007809号-1 山西独特壹家装饰工程有限公司 版权所有</p>
    			</div>
    		</div>
    	</body>
    </html>

/* 顶部 */
    .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{
        
    	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 ul .selected{
        
    	color: red;
    }
    
    /* 广告栏 */
    .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;
    	background-image: url(../img/arrow.png);
    	background-position: right center;
    	background-repeat: no-repeat;
    }
    
    .process .content li p{
        
    	padding-top: 20px;
    }
    .process .content .last{
        
    	background: none;
    }
    
    /* 为什么选择 */
    .pk{
        
    	background-color: #CCCCCC;
    }
    .pk .content{
        
    	width: 1200px;
    	margin: 0 auto;
    	text-align: center;
    }
    .pk .content:nth-child(1){
        
    	padding-top: 40px;
    	font-size: 40px;
    	color: #333;
    }
    .pk .content img{
        
    	margin-top: 80px;
    	margin-bottom: 82px;
    	width: 383px;
    }
    .pk .content:nth-child(3){
        
    	margin-left: 26px;
    	margin-right: 26px;
    }
    
    /* 为什么选择启橙口碑装修 */
    .spruce .content{
        
    	width: 1200px;
    	margin: 0 auto;
    }
    .spruce .content p{
        
    	color: #333333;
    	font-size: 36px;
    	text-align: center;
    	padding-top: 40px;
    }
    .spruce .content .b1{
        
    	margin-top: 80px;
    	margin-bottom: 26px;
    }
    .spruce .content .b1 img{
        
    	width: 386px;
    	height: 383px;
    }
    .spruce .content .b1 img:nth-child(2){
        
    	margin-left: 15px;
    	margin-right: 15px;
    }
    .spruce .content .b2{
        
    	margin-bottom: 82px;
    }
    .spruce .content .b2 img{
        
    	width: 386px;
    	height: 383px;
    }
    .spruce .content .b2 img:nth-child(2){
        
    	margin-left: 15px;
    	margin-right: 15px;
    }
    
    /* 启橙如何确保口碑装修 */
    .ensure{
        
    	background-color: #f2f2f1;
    }
    .ensure .content{
        
    	width: 1200px;
    	margin: 0 auto;
    }
    .ensure .content p{
        
    	padding-top: 40px;
    	text-align: center;
    	font-size: 36px;
    }
    .ensure .content img{
        
    	margin-top: 40px;
    	margin-bottom: 82px;
    	width: 283px;
    	height: 350px;
    }
    .ensure .content img:nth-child(3){
        
    	margin-left: 17px;
    	margin-right: 17px;
    }
    .ensure .content img:nth-child(4){
        
    	margin-left: 0px;
    	margin-right: 17px;
    }
    
    /* 启橙优选口碑装修公司 */
    .company .content{
        
    	width: 1200px;
    	margin: 0 auto;
    }
    .company .content p{
        
    	padding-top: 40px;
    	text-align: center;
    	font-size: 36px;
    }
    .company .content .block1{
        
    	margin-top: 40px;
    }
    .company .content .block1 img{
        
    	width: 385px;
    	height: 100px;
    }
    .company .content .block1 img:nth-child(2){
        
    	margin-left: 15px;
    	margin-right: 15px;
    }
    .company .content .block2{
        
    	margin-top: 20px;
    }
    .company .content .block2 img{
        
    	width: 385px;
    	height: 100px;
    }
    .company .content .block2 img:nth-child(2){
        
    	margin-left: 15px;
    	margin-right: 15px;
    }
    .company .content .block3{
        
    	margin-top: 20px;
    	margin-bottom: 82px;
    }
    .company .content .block3 img{
        
    	width: 385px;
    	height: 100px;
    }
    .company .content .block3 img:nth-child(2){
        
    	margin-left: 15px;
    	margin-right: 15px;
    }
    
    /* 他们都选择了启橙装饰 */
    .they{
        
    	background-color: #F2F2F1;
    	height: 616px;
    }
    .they .content{
        
    	width: 1200px;
    	margin: 0 auto;
    }
    .they .content p{
        
    	padding-top: 40px;
    	font-size: 36px;
    	text-align: center;
    }
    .they .content .tb1{
        
    	background-color: #FFFFFF;
    	text-align: center;
    	width: 690px;
    	height: 340px;
    	margin-top: 40px;
    	border: 1px solid #444444;
    	float: left;
    	margin-left: 87px;
    	border-radius: 5px;
    }
    .they .content .tb1 td{
        
    	border-bottom: 1px dashed #444444;
    }
    .they .content .f1{
        
    	border: 1px solid #444444;
    	background-color: #FFFFFF;
    	margin-top: 40px;
    	margin-right: 55px;
    	float: right;
    	width: 290px;
    	height: 340px;
    	background-color: #red;
    	border-radius: 5px;
    }
    .they .content .f1 p:nth-child(1){
        
    	font-size: 20px;
    	color: #fa4c07;
    }
    .they .content .f1 p:nth-child(2){
        
    	font-size: 14px;
    	color: #bbbbc1;
    	margin-top: -25px;
    }
    .they .content .f1 input{
        
    	width: 226px;
    	height: 36px;
    	margin-left: 30px;
    	margin-top: 15px;
    	border: 1px solid #444444;
    	border-radius: 5px;
    	text-indent: 1em;
    }
    .they .content .f1 input:last-child{
        
    	width: 230px;
    	color: #FFFFFF;
    	height: 36px;
    	margin-left: 30px;
    	text-align: center;
    	background-color: #FA4C07;
    }
    
    /* 底部导航 */
    .bnav{
        
    	background-color: #444;
    	color: #fff;
    }
    .bnav .content{
        
    	width: 1200px;
    	margin: 0 auto;
    }
    .bnav .content .lt p{
        
    	display: inline-block;
    	padding-top: 40px;
    	margin-right: 60px;
    	font-size: 17px;
    }
    .bnav .content .lb{
        
    	display: inline-block;
    }
    .bnav .content .lb p{
        
    	display: inline-block;
    	margin-top: 26px;
    	margin-right: 60px;
    	margin-bottom: 120px;
    	font-size: 17px;
    }
    .bnav .content .lb p:last-child{
        
    	margin-right: 0px;
    }
    .bnav .content .rt{
        
    	float: right;
    	margin-right: -20px;
    	font-size: 13px;
    }
    .bnav .content .rt li{
        
    	float: left;
    }
    .bnav .content .rt li:nth-child(1){
        
    	margin-top: -16px;
    }
    .bnav .content .rt li:nth-child(2){
        
    	margin-top: 110px;
    	margin-left: -85px;
    }
    .bnav .content .rt li:nth-child(3){
        
    	margin-top: 136px;
    	margin-left: -140px;
    }
    
    
    /* bottom */
    .bottom{
        
    	background-color: #333333;
    }
    .bottom .content{
        
    	width: 1200px;
    	margin: 0 auto;
    }
    .bottom .content p{
        
    	font-size: 13px;
    	line-height: 56px;
    	color: #ccab7d;
    	text-align: center;
    }

body{
        
    	font-family: "microsoft yahei";
    }
    body,h1,h2,h3,h4,h5,h6,ul,ol,;i,p,table,tr,td{
        
    	margin: 0;
    	padding: 0;
    }
    html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
        
        margin: 0;
        padding: 0;
    }
    ul,li,ol{
        
    	list-style: none;
    }
    a{
        
    	text-decoration: none;
    	color: inherit;/* 继承父亲用什么颜色它就什么颜色 */
    }