前端学习第四天----网站页面布局（一）

今天开始对整个网页进行学习，使用PS对网页进行切图。第一天完成了开头，轮播图以及部分新闻页面。

模板：

完成：

代码：

.html body:

 

    <!-- 头部开始 -->

    <div class="header">

        <div class="h-top">

            <div class="h-topCon">

                <div class="logo">

                    <img src="images/logo.jpg" />

                </div>

                <div class="searchBox">

                    <span class="searTxt">SEARCH...</span>

                    <img class="searImg" src="images/search.jpg" />

                </div>

            </div>

        </div>

        <div class="h-bottom">

            <ul class="h-botCon">

                <li class="firstLi"><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>

                <li class="lastLi"><a href="#">人物关系</a></li>

            </ul>

        </div>

    </div>

    <!-- 头部结束 -->

   

    <!-- 轮播图开始 -->

    <div class="banner">

        <img src="images/banner2.jpg" />

    </div>

    <!-- 轮播图结束 -->

    <!-- 内容区开始 -->

    <div class="content">

        <div class="conBox">

            <div class="news">

                <div class="conTitle">公司新闻</div>

                <ul class="newsList">

                    <li>

                        <img src="images/square.jpg"/>

                        <p>陈建成董事长出席ATB集团召开年度销售大会</p>

                        <span>2013-07-30</span>

                    </li>

                    <li>

                        <img src="images/square.jpg"/>

                        <p>红红火火恍恍惚惚或或或或或或或</p>

                        <span>2013-07-30</span>

                    </li>

                    <li>

                        <img src="images/square.jpg"/>

                        <p>红红火火恍恍惚惚或或或或或或或</p>

                        <span>2013-07-30</span>

                    </li>

                    <li>

                        <img src="images/square.jpg"/>

                        <p>红红火火恍恍惚惚或或或或或或或</p>

                        <span>2013-07-30</span>

                    </li>

                    <li>

                        <img src="images/square.jpg"/>

                        <p>红红火火恍恍惚惚或或或或或或或</p>

                        <span>2013-07-30</span>

                    </li>

                    <li>

                        <img src="images/square.jpg"/>

                        <p>红红火火恍恍惚惚或或或或或或或</p>

                        <span>2013-07-30</span>

                    </li>

                </ul>

            </div>

            <div class="introduce">

                <div class="conTitle">公司介绍</div>

                <h5>公司成立于1984年，</h5>

                <p>经过近30年的发展</p>

                <span>已成为电气制造，房地产开发和金融</span>

                <span>投资三业并举的综合性跨国...</span>

            </div>

            <div class="personnel">

                <div class="conTitle">人才招聘</div>

                <div class="perList">

                    <p>培养一流的人才，铸就一流的工程</p>

                    <p>实现员工与企业的共同发展</p>

                </div>

            </div>

            <div class="project">

                <div class="conTitle">市场项目</div>

            </div>

        </div>

    </div>

    <!-- 内容区结束 -->

    <!-- 底部开始 -->

    <div class="footer"></div>

    <!-- 底部结束 -->

.css:

@charset "utf-8";

*{margin:0;padding:0;}

a{text-decoration: none; color: white;}

ul{list-style: none;}

img{

    display: block;

}

/* 头部开始 */

.header{

    height:158px;

}

.h-top{

    height: 100px;

    /* background-color: red; */

}

.h-topCon{

    width: 1002px;

    height: 100px;

    margin:0 auto;

}

.logo{

    width:180px;

    height:32px;

    float:left;

    margin-left: 20px;

    margin-top: 32px;

}

.searchBox{

    width:226px;

    height: 30px;

    border:1px solid #000;

    float: right;

    margin-top:30px ;

    margin-right:18px;

    background-color:#f1f1f1;

}

.searTxt{

    float:left;

    font-size: 12px;

    line-height: 30px;

    margin-left: 14px;

}

.searImg{

    float:right;

    margin-top:8px;

    margin-right: 8px;

}

.h-bottom{

    height:58px;

    background-color: #303030;

   

}

.h-botCon{

    width: 1002px;

    height: 58px;

    margin: 0 auto;

   

    /* background-color: red; */

}

.h-botCon li{

    width: 119px;

    height: 58px;

    border-right:1px solid #4a4a4a ;

    float: left;

    text-align: center;

    line-height: 58px;

    font-size: 14px;

   

}

.firstLi{

    padding-left: 27px;

   

}

.h-botCon .lastLi{

    border-right: none;

   

}

/* 头部结束 */

/* 轮播图开始 */

.banner img{

    width:100%;

}

/* 轮播图结束 */

/* 内容区开始 */

.conBox{

    width:1002px;

    height: 546px;

    margin: 0 auto;

}

.conTitle{font-size: 18px;margin-top: 32px;}

.news{

    width: 480px;

    height: 240px;

    /* background-color: gold; */

    float: left;

    padding-left: 20px;

}

.newsList{

    margin-top: 19px;

}

.newsList li{

    /* background-color: pink; */

    height: 24px;

    font-size: 12px;

    line-height:24px;

}

.newsList li img{

    float: left;

    margin-top: 11px;

    margin-right: 10px;

}

.newsList li p{

    float: left;

    /* background-color: red; */

    height: 24px;

}

.newsList li span{

    float: right;

    color: #666;

    margin-right:28px ;

    /* background-color: red; */

}

.introduce{

    width: 220px;

    height: 240px;

    background-color: #f1f1f1;

    float: left;

    padding-left: 20px;

}

.introduce h5{

    font-size:14px;

    margin-top: 26px;

    margin-bottom: 12px;

    font-weight:normal;

}

.introduce p{

    font-size: 12px;

    margin-bottom: 25px;

}

.introduce span{

    font-size: 12px;

    color:#666;

}

.personnel{

    width: 218px;

    height: 240px;

    background-color: green;

    float: left;

    padding-left: 24px;

}

.personnel perList{

    margin-top: ;

}

.personnel p{

    font-size: 12px;

}

.project{

    width: 1002px;

    height: 306px;

    background-color: blue;

    float: left;

}

.project .conTitle{

    padding-top: 30px;padding-left: 20px;

}

 

/* 内容区结束 */

/* 底部开始 */

.footer{

    width: 1002px;

    background-color: yellow;

    margin: 0 auto;

}

/* 底部结束 */

目标尚未完成，代码还有些缺漏，欢迎评论区探讨。