今天将页面布局的整个流程完成,并对背景图片相关的知识进行了学习。
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>