新書推薦:

《
中国酱油的文化历程
》
售價:HK$
53.9

《
读者考试精选+青年文摘考试精选+登天的感觉:我让考生超常发挥 岳晓东著 如何让考生超常发挥高度自信青
》
售價:HK$
96.8

《
索恩丛书·伊凡雷帝:俄国的第一位沙皇
》
售價:HK$
141.9
![[共2册]利他性销售+利他式表达全2册正版书籍破解销售密码实现业绩狂飙洞察客户未言明核心需求痛点成交](//img.megbook.hk/upload/mall/productImages/26/10/9787547753248.jpg)
《
[共2册]利他性销售+利他式表达全2册正版书籍破解销售密码实现业绩狂飙洞察客户未言明核心需求痛点成交
》
售價:HK$
151.8

《
折姜(中)
》
售價:HK$
51.5

《
清华大学藏战国竹简校释(伍):《筮法》诸篇
》
售價:HK$
107.8

《
我们都会变有钱:投资的道与术
》
售價:HK$
63.8

《
人体使用指南:没有什么比身体更重要
》
售價:HK$
92.0
|
| 內容簡介: |
《CSS+DIV网页布局技术教程》系统、全面地讲解了CSS基础理论和实际运用技术,通过大量实例,对CSS应用进行了深入浅出的分析。全书主要内容包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用和CSS如何控制XML文档样式,着重讲解如何利用CSS+DIV进行网页布局,注重实际操作,使读者存学习CSS应用技术的同时能够掌握CSS+DIV的精髓。刷时,本书还详细讲解了其他书中较少涉及的技术细节,包括扩展CSS与JavaScript和XML等综合应用的内容,以帮助读者设计符合Web标准的网页,提升技术竞争力。
本书内容翔实、结构清晰、循序渐进,基础知识与案例实战紧密结合,既可作为CSS初学者的入门教材,也适合中高级用户进一步学习和参考。
|
| 目錄:
|
项目一 利用CSS设计页面排版
任务一:使用继承制作网页
知识储备
任务实践
任务二:设计百度Logo
知识储备
任务实践
任务三:排版新闻文稿
知识储备
任务实践
上机实训:制作百度搜索
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目二 使用CSS设置图片和控制背景图像
任务一:设计淘宝网页图片的布局
知识储备
任务实践
任务二:设计个人网站的主页
知识储备
任务实践
上机实训:制作古词
“念奴娇赤壁怀古”网页
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目三 使用CSS设计表格和表单
任务一:设计日历
知识储备
任务实践
任务二:设计娱乐新闻调查表
知识储备
任务实践
上机实训:制作新浪网民调查问卷
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目四 使用CSS控制列表样式和定义链接
任务一:设计百度导航条
知识储备
任务实践
任务二:设计美食图片欣赏网页
知识储备
任务实践
上机实训:制作网页的Tab菜单
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目五 初识CSS+DIV排版布局
任务一:设计图片的签名
知识储备
任务实践
任务二:设计个人网页
知识储备
任务实践
上机实训:制作咖啡店网页
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目六 剖析网页排版和CSS+DOV布局
任务一:设计交河故城网页
知识储备
任务实践
任务二:设计禅意花园的两列
三列布局
知识储备
任务实践
上机实训:制作清明上河图网页
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目七 使用CSS定位控制网页
任务一:设计浪漫式网页
知识储备
任务实践
任务二:设计展览式网页
知识储备
任务实践
上机实训:制作电子相册
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目八 使用JavaScript控制CSS
任务:设计灯光效果
知识储备
任务实践
上机实训:制作跑马灯特效
实训背景
实训内容和要求
实训步骤
实训素材
习题
项目九 使用CSS设计XML文档
样式
任务:设计新闻网页
知识储备
任务实践
上机实训:制作诗情画意的图文网页
实训背景
实训内容和要求
实训步骤
实训素材
习题
参考答案
参考文献
|
| 內容試閱:
|
项目二
使用CSS设置图片和控制背景图像
1. 项目要点
1设计淘宝网页的图片布局。
2设计个人网站的主页。
2. 引言
在五彩缤纷的网络世界中,各种各样的图片组成了丰富多彩的页面,能够让人更直观地感受到网页所要传达给用户的信息。在本项目中,将通过一个项目导入、两个工作任务实践、一个上机实训,向读者展示网页图片排版以及页面背景设置带来的美化效果。
3. 项目导入
栏目圆角是网上常见的一种美化网页的方法,网页设计师童雪运用图片圆角化方法,设置了一个名为“精品文摘”的网页,如图2-1所示,以简洁、精简的图文混排方式展示网页。
图2-1 “精品文摘”网页
该“精品文摘”网页的设计步骤如下。
1构建网页结构,先用div标记设置container容器,然后分别用div标记将页面分为header和main两部分,代码如下所示:
body
div class="container"
div class="header"
img src="imagesbg.jpg"
div
div class="main"
div class="lanmu"
div class="headline"img class="c" src="imagesbg1.gif"div
div class="content1"
h3散文随笔h3
ul class="topic"
li[生活感悟] 晴,----简单生活,感受美好,期待明天li
li[生活感悟] 多年后,我们或许会嫁给这样的他 li
li[生活感悟] 从今以后,试着做个这样的人li
li[生活感悟] 人最大的不幸,就是不知道自己是幸福的li
li[生活感悟] 人生至境是不争 恬静出尘心自宁 li
li[生活感悟] 没有如意的生活,只有看开的人生li
ul
p class="more"a href="#"更多内容ap
div
div
div class="lanmu"
div class="headline"img class="c" src="imagesbg1.gif"div
div class="content2"
h3散文随笔h3
ul class="topic"
li[生活感悟] 晴,----简单生活,感受美好,期待明天li
li[生活感悟] 多年后,我们或许会嫁给这样的他 li
li[生活感悟] 从今以后,试着做个这样的人li
li[生活感悟] 人最大的不幸,就是不知道自己是幸福的li
li[生活感悟] 人生至境是不争 恬静出尘心自宁 li
li[生活感悟] 没有如意的生活,只有看开的人生li
ul
p class="more"a href="#"更多内容ap
div
div
div
body
在整体的container框架下,页面分为header和main两部分。在header下,定义了img标记,用于设置banner图片。在main下,又分为4部分,分别定义了4个栏目。在lanmu中定义了每个栏目的具体内容,如图2-2所示。
图2-2 栏目效果
知识链接:图2-2中,每一个栏目是一个div块,在此块下又分为两部分,分别是headline和content,也就是圆角图片和栏目的文字信息。
2定义网页的基本属性。其中,“*{}”表示将页面中所有的标签都设置为此样式。body标签定义了背景色,在container中定义容器的宽度为844px。另外,在container中定义了margin:0px auto,目的是使该容器水平居中。bgimg {border:2px #fff solid}设置了header部分图片的边框。具体代码如下:
* { *定义页面中所有标签的统一样式*
margin:0;
padding:0;
font-size:12px;
text-align:center;
}
body {
background:#d3d3d3; *页面背景色*
}
.container {
width:844px;
margin:0 auto; *居中显示*
}
.bgimg {
width:840px;
border:2px #fff solid; *给header部分的图片定义2px宽的边框*
}
此时的显示效果如图2-3所示。
图2-3 设置网页的基本属性
|
|