笔记 | PHP 2012 | 首页 header 区域实战

作者: Say哥 | 来源:发表于2020-11-27 18:01 被阅读0次

笔记 | PHP 2012 | 首页 header 区域实战
笔记 | PHP 2012 | 完成首页 footer 区域
首页header区域开发
day1
laravel 实战之 - 登录首页
Vue.js第6课-项目实战-首页开发（part01）
2019-01-09【PHP跳转页面】
解决html+php+mysqli出现中文乱码
前端学习之 Ajax
微擎系统全局变量说明

Html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmls="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
        <title>首页header区域实战</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link rel="stylesheet" href="./CSS/reset.css" type="text/css" />    <!-------- css初始化 -------->
        <link rel="stylesheet" href="./CSS/ind.css" type="text/css" />      <!-------- 首页宽高背景等设置 --------> 
        </head>
    <body>
        <div id="container">
            <div id="header">                                               <!-------- header区 -------->
                <img src="./images/logo.jpg" alt="logo" />
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">业务介绍</a></li>
                    <li><a href="#">技术优势</a></li>
                    <li><a href="#">精品案例</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">文章观点</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
            <div id="banner">                                               <!-------- banner区 -------->
                <img src="./images/about_banner.jpg" alt="banner" />
            </div>
            <div id="main">
                <div id="mleft">
                    <div class="yewu"></div>
                    <div class="yewu"></div>
                    <div class="yewu"></div>
                    <div class="yewu"></div>
                </div>
                <div id="mrig">
                    <div id="view"></div>
                    <div id="contact"></div>
                </div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>

css初始化文件(见前面笔记)
ind.css

img {
    display: block;
}
/******** container ********/
#container {
    width: 1002px;
    margin: 0 auto;
}
/******** container header ********/
#header {
    width: 1002px;
    height: 128px;
    background: green url(../images/top_bg.jpg);
}
#nav li {
    list-style: none;
    float: left;
    width: 90px;
    height: 37px;
    margin-right: 2px;
}
#nav li a:link {
    display: block;
    width: 90px;
    height: 37px;
    background: url(../images/nav_bg.gif);
    text-align: center;
    font: 15px/37px simhei;    /* font: 必须加字体, 否则可能解析错误 */
    color: #363636;
}
#nav li a:visited {
    background: url(../images/nav_on.gif);
    color: #FFF;
}
/******** container banner ********/
#banner {
    width: 1000px;
    height: 237px;
    margin: 8px 0;
    padding: 0 1px;
}
/******** container main********/
#main {
    width: 1002px;
    height: 464px;
    background: pink;
}
/******** container main mleft ********/
#mleft {
    width: 694px;
    height: 464px;
    background: purple;
    float: left;
}
.yewu {
    width: 337px;
    height: 222px;
    margin: 5px;
    float: left;
    background: orange;
}
/******** container main mrig ********/
#mrig {
    width: 294px;
    height: 464px;
    background: silver;
    float: right;
}
#view {
    width: 294px;
    height: 227px;
    margin-bottom: 10px;
    background: purple;
}
#contact {
    width: 294px;
    height: 227px;
    background: #CCC;
}
/******** container footer ********/
#footer {
    margin-top: 10px;
    width: 1002px;
    height: 53px;
    background: yellow;
}