기업 웹사이트 튜토리얼 프론트엔드 PHP 개발 (1)
다음 홈페이지 레이아웃을 살펴보겠습니다.
div+css를 레이아웃에 사용하면 비교적 간단합니다. 아래 코드를 보세요.
<!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>
</head>
<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;}
/*首页内容部分样式*/
.dv{width:410px;border:1px solid #ccc;margin:0 auto;margin-top:30px;}
.dv1{width:90px;height:50px;margin:0 auto;line-height:50px;background:#f0f0f0;
text-align:center;margin-top:-28px;font-weight:bold;}
.content{width:410px;text-align:center;font-size:12px;margin:0 auto;line-height:25px;}
.product{width:410px;height:200px;margin:0 auto;}
.product_1{width:80px;height:80px;float:left;margin-left:5px;margin-top:18px;padding-left:12px;}
.info{width:410px;height:250px;background:#eee;margin:0 auto;}
.info_left{width:200px;border-right:1px dashed #ccc;}
.info_left h3{padding-top:15px;margin-left:15px;}
.info_left p{padding-left:15px;margin-top:8px;text-indent:2em;line-height:25px;float:left;}
.info_right{width:200px;float:right;}
.info_right h3{padding-top:15px;margin-left:15px;}
.info_right div{padding-left:15px;margin-top:8px;padding-top:10px;}
.info_right span{float:right;margin-right:15px;}
/*底部样式*/
.but{width:410px;height:65px;margin:0 auto;text-align:center;background:#999;
padding-top:8px;margin-top:5px;}
</style>
<body>
<div class="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="410px" height="100">
</div>
<div class="dv"></div>
<div class="dv1">产品展示</div>
<div class="content">
核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域
<p>资深高级专家。主要业务处于国内领先、国际先进水平</p>
</div>
<div class="product">
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/58240805c0a89281.png
" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/5824081d79e44593.png" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/58240831e90de355.png" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="/upload/course/000/000/010/582408418514e905.png" width="80" height="90"></a></div>
</div>
<div class="info">
<div class="info_right">
<h3>新闻资讯</h3>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
</div>
<div class="info_left">
<h3>公司简介</h3>
<p>核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域资深高级专家。主要业务处于国内领先、国际先进水平</p>
</div>
</div>
<div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558
备ICP 皖0219845号 <p>版权所有：合肥环保科技 All rights reserved</p>
</div>
</div>
</body>
</html>위 코드: 물론 홈페이지의 내용은 완성되었습니다. 홈페이지는 이제 우리가 가지고 있는 것입니다. 정적 페이지의 경우 백엔드 프로그램 개발이 끝나면 프런트엔드 콘텐츠를 PHP 문으로 바꾸고 데이터베이스에서 데이터를 검색하여 프런트엔드 페이지에 표시합니다
새로운 파일
<!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>
</head>
<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;}
/*首页内容部分样式*/
.dv{width:410px;border:1px solid #ccc;margin:0 auto;margin-top:30px;}
.dv1{width:90px;height:50px;margin:0 auto;line-height:50px;background:#f0f0f0;
text-align:center;margin-top:-28px;font-weight:bold;}
.content{width:410px;text-align:center;font-size:12px;margin:0 auto;line-height:25px;}
.product{width:410px;height:200px;margin:0 auto;}
.product_1{width:80px;height:80px;float:left;margin-left:5px;margin-top:18px;padding-left:12px;}
.info{width:410px;height:250px;background:#eee;margin:0 auto;}
.info_left{width:200px;border-right:1px dashed #ccc;}
.info_left h3{padding-top:15px;margin-left:15px;}
.info_left p{padding-left:15px;margin-top:8px;text-indent:2em;line-height:25px;float:left;}
.info_right{width:200px;float:right;}
.info_right h3{padding-top:15px;margin-left:15px;}
.info_right div{padding-left:15px;margin-top:8px;padding-top:10px;}
.info_right span{float:right;margin-right:15px;}
/*底部样式*/
.but{width:410px;height:65px;margin:0 auto;text-align:center;background:#999;
padding-top:8px;margin-top:5px;}
</style>
<body>
<div class="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="http://img.php.cn/upload/course/000/000/010/582407c034cfe355.jpg" width="50" height="50"></div>
</div>
<div id="cnt">
<img src="http://img.php.cn/upload/course/000/000/010/5824078a8353f806.jpg" width="410px" height="100">
</div>
<div class="dv"></div>
<div class="dv1">产品展示</div>
<div class="content">
核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域
<p>资深高级专家。主要业务处于国内领先、国际先进水平</p>
</div>
<div class="product">
<div class="product_1"><a href="#"><img src="http://img.php.cn/upload/course/000/000/010/58240805c0a89281.png
" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="http://img.php.cn/upload/course/000/000/010/5824081d79e44593.png" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="http://img.php.cn/upload/course/000/000/010/58240831e90de355.png" width="80" height="90"></a></div>
<div class="product_1"><a href="#"><img src="http://img.php.cn/upload/course/000/000/010/582408418514e905.png" width="80" height="90"></a></div>
</div>
<div class="info">
<div class="info_right">
<h3>新闻资讯</h3>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
<div>办公地址<span>2016-8-25</span></div>
</div>
<div class="info_left">
<h3>公司简介</h3>
<p>核心团队长期在中国科学院、航天部工作，具有丰厚的环保、太阳能、真空电子束、机械制造等专业技术研发和实际工程经验积累，系本领域资深高级专家。主要业务处于国内领先、国际先进水平</p>
</div>
</div>
<div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558
备ICP 皖0219845号 <p>版权所有：合肥环保科技 All rights reserved</p>
</div>
</div>
</body>
</html>
시사
Clear
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
이 강좌를 시청한 학생들도 학습하고 있습니다.
PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.
웹 프론트 엔드 개발에 대한 빠른 소개
민망한 물건 백과사전 사이트를 모방한 Mini 버전 MVC 프레임워크의 대규모 실용 Tianlongbabu 개발
PHP 실용 개발 시작하기: 빠른 PHP 생성 [중소기업 포럼]
로그인 인증 및 클래식 게시판
컴퓨터 네트워크 지식 수집
빠른 시작 Node.JS 정식 버전
당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]
자신만의 PHP MVC 프레임워크 작성(깊이 있는 40개 장/자세한 내용/초보자가 발전하려면 읽어야 함)