기업 웹사이트 프론트엔드 튜토리얼의 PHP 개발 (5)
연락처
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>联系我们</title>
<style type="text/css">
*{margin:0px;padding:0px;}
/*头部样式*/
#top{width:410px;height:40px;margin:0 auto;}
body{background:#f0f0f0;}
#to_left{float:left;}
#top_right{float:right;margin-top:20px;margin-right:15px;}
li{float:left;list-style:none;margin:0px 5px; padding-bottom:15px;}
li a{text-decoration:none;color:#000;}
li a:hover{color:red;}
#cnt{width:410px;margin:0 auto;}
/*联系我们部分样式*/
.contact{width:410px;height:600px;margin:0 auto;background:#e0e0e0;}
.contact_top{margin-top:5px;margin-left:10px;padding-top:15px;font-weight:bold;}
.contact_left{width:250px;height:530px;margin-top:15px;/*margin-left:8px;*/float:left;}
.contact_right{width:150px;height:530px;float:right;text-align:center;
margin-top:15px;margin-right:10px;}
.online{font-weight:bold;color:red;}
.weixin{width:200px;height:250px;}
.weixin img{padding-top:15px;}
.service{width:200px;height:280px;}
.service img{padding-top:15px;}
.site{width:200px;height:30px;padding-top:35px;/*margin-left:15px;*/}
/*底部样式*/
.site span{margin-left:5px;}
.but{width:410px;height:65px;margin:0 auto;text-align:center;background:#999;
padding-top:8px;margin-top:5px;}
</style>
</head>
<body>
<div id="top">
<div id="top_right">
<ul>
<li><a href="index.php">首页</a></li>
<li><a href="about.php">关于我们</a></li>
<li><a href="news.php">新闻资讯</a></li>
<li><a href="product.php">产品展示</a></li>
<li><a href="contact.php">联系我们</a></li>
</ul>
</div>
<div id="top_left"><img src="/upload/course/000/000/010/582407c034cfe355.jpg" width="50" height="50"></div>
</div>
<div id="cnt">
<img src="/upload/course/000/000/010/5824078a8353f806.jpg" width="410" height="100">
</div>
<div class="contact">
<div class="contact_top">当前位置>>联系我们</div>
<div class="contact_left">
<div class="site">
<span>公司地址：</span></br>
安徽省合肥市科学大道669号
</div>
<div class="site">
<span>公司电话：</span></br>
400-800-9558 400-800-9999
</div>
<div class="site">
<span>技术支持：</span></br>
400-800-9918
</div>
<div class="site">
<span>售后电话：</span></br>
400-800-5555
</div>
<div class="site">
<span>公司传真：</span></br>
010-55555555
</div>
<div class="site">
<span>公司主页：</span></br>
//m.sbmmt.com
</div>
<div class="site">
<span>电子邮件：</span></br>
jx@163.com 88985256@qq.com
</div>
</div>
<div class="contact_right">
<div class="weixin">
<span class="online">关注微信公众号</span></br>
<img src="/upload/course/000/000/010/5824088dafe08668.png" width="100" height="100">
</div>
<div class="service">
<span class="online">在线客服</span></br>
<a href="#"><img src="/upload/course/000/000/010/58240862418f1266.jpg" width="120" height="50"></a></br>
<a href="#"><img src="/upload/course/000/000/010/58240883231ed119.jpg" width="120" height="50"></a>
</div>
</div>
</div>
<div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558
备ICP 皖0219845号 <p>版权所有：合肥环保科技 All rights reserved</p>
</div>
</body>
</html>위 강의에서는 홈페이지 5페이지의 레이아웃과 스타일을 완성했습니다. 다음으로 웹사이트 배경 프로그램을 만들어 보겠습니다
새로운 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>联系我们</title>
<style type="text/css">
*{margin:0px;padding:0px;}
/*头部样式*/
#top{width:410px;height:40px;margin:0 auto;}
body{background:#f0f0f0;}
#to_left{float:left;}
#top_right{float:right;margin-top:20px;margin-right:15px;}
li{float:left;list-style:none;margin:0px 5px; padding-bottom:15px;}
li a{text-decoration:none;color:#000;}
li a:hover{color:red;}
#cnt{width:410px;margin:0 auto;}
/*联系我们部分样式*/
.contact{width:410px;height:600px;margin:0 auto;background:#e0e0e0;}
.contact_top{margin-top:5px;margin-left:10px;padding-top:15px;font-weight:bold;}
.contact_left{width:250px;height:530px;margin-top:15px;/*margin-left:8px;*/float:left;}
.contact_right{width:150px;height:530px;float:right;text-align:center;
margin-top:15px;margin-right:10px;}
.online{font-weight:bold;color:red;}
.weixin{width:200px;height:250px;}
.weixin img{padding-top:15px;}
.service{width:200px;height:280px;}
.service img{padding-top:15px;}
.site{width:200px;height:30px;padding-top:35px;/*margin-left:15px;*/}
/*底部样式*/
.site span{margin-left:5px;}
.but{width:410px;height:65px;margin:0 auto;text-align:center;background:#999;
padding-top:8px;margin-top:5px;}
</style>
</head>
<body>
<div id="top">
<div id="top_right">
<ul>
<li><a href="index.php">首页</a></li>
<li><a href="about.php">关于我们</a></li>
<li><a href="news.php">新闻资讯</a></li>
<li><a href="product.php">产品展示</a></li>
<li><a href="contact.php">联系我们</a></li>
</ul>
</div>
<div id="top_left"><img src="https://img.php.cn/upload/course/000/000/010/582407c034cfe355.jpg" width="50" height="50"></div>
</div>
<div id="cnt">
<img src="https://img.php.cn/upload/course/000/000/010/5824078a8353f806.jpg" width="410" height="100">
</div>
<div class="contact">
<div class="contact_top">当前位置>>联系我们</div>
<div class="contact_left">
<div class="site">
<span>公司地址：</span></br>
安徽省合肥市科学大道669号
</div>
<div class="site">
<span>公司电话：</span></br>
400-800-9558 400-800-9999
</div>
<div class="site">
<span>技术支持：</span></br>
400-800-9918
</div>
<div class="site">
<span>售后电话：</span></br>
400-800-5555
</div>
<div class="site">
<span>公司传真：</span></br>
010-55555555
</div>
<div class="site">
<span>公司主页：</span></br>
//m.sbmmt.com
</div>
<div class="site">
<span>电子邮件：</span></br>
jx@163.com 88985256@qq.com
</div>
</div>
<div class="contact_right">
<div class="weixin">
<span class="online">关注微信公众号</span></br>
<img src="https://img.php.cn/upload/course/000/000/010/5824088dafe08668.png" width="100" height="100">
</div>
<div class="service">
<span class="online">在线客服</span></br>
<a href="#"><img src="https://img.php.cn/upload/course/000/000/010/58240862418f1266.jpg" width="120" height="50"></a></br>
<a href="#"><img src="https://img.php.cn/upload/course/000/000/010/58240883231ed119.jpg" width="120" height="50"></a>
</div>
</div>
</div>
<div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558
备ICP 皖0219845号 <p>版权所有：合肥环保科技 All rights reserved</p>
</div>
</body>
</html>
시사
Clear
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
이 강좌를 시청한 학생들도 학습하고 있습니다.
PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.
웹 프론트 엔드 개발에 대한 빠른 소개
민망한 물건 백과사전 사이트를 모방한 Mini 버전 MVC 프레임워크의 대규모 실용 Tianlongbabu 개발
PHP 실용 개발 시작하기: 빠른 PHP 생성 [중소기업 포럼]
로그인 인증 및 클래식 게시판
컴퓨터 네트워크 지식 수집
빠른 시작 Node.JS 정식 버전
당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]
자신만의 PHP MVC 프레임워크 작성(깊이 있는 40개 장/자세한 내용/초보자가 발전하려면 읽어야 함)