前端学习第五天----网站页面布局（二）及背景图片

今天将页面布局的整个流程完成，并对背景图片相关的知识进行了学习。

background-color:背景颜色;

        颜色单词: red green blue skyblue...

        十六进制: #aabbcc -- #abc

    background-image:url("图片地址");

        【注】 图片默认重复

                图片不占位

    backgorund-repeat:背景图是否重复;

        repeat      重复

        no-repeat   不重复

        repeat-x    水平重复

        repeat-y    垂直重复    

       

    background-position:水平  垂直;

        关键字:

            left center right

            top center bottom

        像素:

            px

            【注】 可以为负数

                    只有一个值时 表示水平， 垂直方则默认居中

页面布局实践：

 .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>