기업 웹사이트 튜토리얼 프론트엔드 PHP 개발 (3)

이전 섹션에서 About Us 페이지 작성을 마쳤습니다. 이제 뉴스 정보 페이지를 작성해 보겠습니다.

<!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;}
        /*新闻部分样式*/
        .new_con{width:410px;height:500px;margin:0 auto;background:#e0e0e0;}
        .new_top{margin-left:5px;margin-top:2px;font-weight:bold;padding-top:15px;}
        .new_notice{width:200px;height:400px;float:left;margin-top:10px;margin-left:5px;}
        .new_news{width:200px;height:400px;float:right;margin-top:10px;margin-right:5px;}
        .new_title{font-weight:bold;margin-left:5px;}
        .notice{margin-left:20px;margin-top:15px;font-weight:bold;font-size:10px;}
        .notice span{float:right;margin-right:20px;font-weight:normal;}
        /*底部样式*/
        .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="410px" height="100">
    </div>
    <div class="new_con">
        <div class="new_top">
            当前位置>>新闻资讯
        </div>

        <div class="new_but">
            <div class="new_notice">
                <span class="new_title">公司公告</span>
                <div class="notice">公告1<span>2016-10-5</span></div>
            </div>

            <div class="new_news">
                <span class="new_title">公司新闻</span>
                <div class="notice">新闻1<span>2016-10-5</span></div>
            </div>
        </div>
    </div>
    <div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558
                        备ICP 皖0219845号 <p>版权所有：合肥环保科技 All rights reserved</p>
    </div>
</body>
</html>

지속적인 학습

새로운 파일

<!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;} /*新闻部分样式*/ .new_con{width:410px;height:500px;margin:0 auto;background:#e0e0e0;} .new_top{margin-left:5px;margin-top:2px;font-weight:bold;padding-top:15px;} .new_notice{width:200px;height:400px;float:left;margin-top:10px;margin-left:5px;} .new_news{width:200px;height:400px;float:right;margin-top:10px;margin-right:5px;} .new_title{font-weight:bold;margin-left:5px;} .notice{margin-left:20px;margin-top:15px;font-weight:bold;font-size:10px;} .notice span{float:right;margin-right:20px;font-weight:normal;} /*底部样式*/ .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="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="new_con"> <div class="new_top"> 当前位置>>新闻资讯 </div> <div class="new_but"> <div class="new_notice"> <span class="new_title">公司公告</span> <div class="notice">公告1<span>2016-10-5</span></div> </div> <div class="new_news"> <span class="new_title">公司新闻</span> <div class="notice">新闻1<span>2016-10-5</span></div> </div> </div> </div> <div class="but">地址：安徽省合肥市科学大道669号(黄山路与科学大道交口东南角) 预约电话：400-800-9558 备ICP 皖0219845号 <p>版权所有：合肥环保科技 All rights reserved</p> </div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear