登入帳戶  | 訂單查詢  | 購物車/收銀台( 0 ) | 在線留言板  | 付款方式  | 聯絡我們  | 運費計算  | 幫助中心 |  加入書簽
會員登入 新註冊 | 新用戶登記
HOME新書上架暢銷書架好書推介特價區會員書架精選月讀2023年度TOP分類閱讀雜誌 香港/國際用戶
最新/最熱/最齊全的簡體書網 品種:超過100萬種書,正品正价,放心網購,悭钱省心 送貨:速遞 / EMS,時效:出貨後2-3日

2024年03月出版新書

2024年02月出版新書

2024年01月出版新書

2023年12月出版新書

2023年11月出版新書

2023年10月出版新書

2023年09月出版新書

2023年08月出版新書

2023年07月出版新書

2023年06月出版新書

2023年05月出版新書

2023年04月出版新書

2023年03月出版新書

2023年02月出版新書

『簡體書』CSS+DIV网页布局技术教程 全国高等院校应用型创新规划教材·计算机系列

書城自編碼: 2583184
分類: 簡體書→大陸圖書→計算機/網絡圖形圖像/多媒體
作者: 封超,赵爽 编著
國際書號(ISBN): 9787302401766
出版社: 清华大学出版社
出版日期: 2015-06-01

頁數/字數: 325页
書度/開本: 16开

售價:NT$ 315

我要買

share:

** 我創建的書架 **
未登入.



新書推薦:
游戏改变未来
《 游戏改变未来 》

售價:NT$ 783.0
能源与动力工程测试技术(穆林)
《 能源与动力工程测试技术(穆林) 》

售價:NT$ 442.0
大学问·明清江南商业的发展
《 大学问·明清江南商业的发展 》

售價:NT$ 498.0
金庸评传
《 金庸评传 》

售價:NT$ 941.0
西方哲学史
《 西方哲学史 》

售價:NT$ 498.0
中国财富管理发展指数(2022)
《 中国财富管理发展指数(2022) 》

售價:NT$ 325.0
希腊神话和仪式中的结构与历史
《 希腊神话和仪式中的结构与历史 》

售價:NT$ 437.0
世界花纹与图案大典
《 世界花纹与图案大典 》

售價:NT$ 1669.0

建議一齊購買:

+

NT$ 331
《 统计学(第六版)(21世纪统计学系列教材;“十二五”普通高等教育本科国家级规划教材;教育部推荐教材;国家统计局优秀统计教材) 》
+

NT$ 921
《 内科学(第八版/本科临床/十二五规划) 》
+

NT$ 656
《 管理学(第11版)(工商管理经典译丛 风靡全球的管理学最经典教材,罗宾斯《管理学》的最新版本) 》
內容簡介:
《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 设置网页的基本属性

 

 

書城介紹  | 合作申請 | 索要書目  | 新手入門 | 聯絡方式  | 幫助中心 | 找書說明  | 送貨方式 | 付款方式 香港用户  | 台灣用户 | 海外用户
megBook.com.tw
Copyright (C) 2013 - 2024 (香港)大書城有限公司 All Rights Reserved.