没有合适的资源?快使用搜索试试~ 我知道了~
首页掌握现代CSS:布局与响应式设计实战
掌握现代CSS:布局与响应式设计实战
需积分: 9 8 下载量 189 浏览量
更新于2023-05-22
收藏 58.29MB PDF 举报
"Mastering CSS" 是一本由 Rich Finelli 编著的专业指南,旨在带领读者深入理解现代 CSS 技术。该书是其广受欢迎的视频课程《Mastering CSS》的书面版本,专注于从最佳实践到实际编程技巧的学习。作者以其在创建高级布局、响应式设计、字体处理、过渡动画和灵活布局(如 flexbox)方面的深厚经验为基础,为读者提供了全面的培训。 课程首先回顾了 CSS 的核心最佳实践,包括使用高效的文本编辑器自动化编写过程以及建立一个基础的 CSS 风格指南。然后,读者将学习如何构建响应式布局,通过浮动和可定制下拉菜单实现,并逐步转向模块化组织的 CSS 方法,以便于代码管理和维护。 深入部分,本书详细讲解了 CSS3 特性,包括转换、动画和渐变,使读者能够掌握现代网页设计的关键技术。此外,作者还将引导读者了解如何处理响应式网页设计、网络字体、图标字体以及支持高分辨率设备(如Retina)的技术。通过这本书,读者不仅能掌握 CSS 这一现代网页设计中不可或缺的工具,还能提升自己的前端开发技能。 版权方面,所有内容未经 Packt Publishing 的书面许可不得复制、存储或传播。尽管作者和出版社已尽最大努力确保信息准确,但书中提供的信息并不保证无误。所有涉及的商标信息已尽可能正确标注,但出版社不能对此类信息的准确性做出承诺。 《Mastering CSS》首次出版于2017年10月,是一本值得深入学习和实践的 CSS 教材,适合初级到中级的前端开发者,无论是希望巩固基础知识还是寻求提升专业技能的读者都能从中获益匪浅。
资源详情
资源推荐
Preface
[ 3 ]
Also, our menu turns into a menu designed for mobile devices:
Preface
[ 4 ]
If we scroll down a little bit, we can see that we have ghost buttons that use CSS transitions.
It's ready for HiDPI devices such as Apple's retina displays:
Most of the imagery on the site uses SVG:
Preface
[ 5 ]
At the very bottom of the page, we are using an icon font:
So, as you can see, you'll learn some really cool stuff in this book. To get the most out of it, I
recommend that you follow along with me as I code.
What this book covers
$IBQUFS, CSS Foundations, covers the fundamental concepts necessary to master CSS.
$IBQUFS, Ramping Up, talks about the Sublime text editor; CSS reset, which resets the
default styles in the browser; and descendant selectors.
$IBQUFS, Creating a Page Layout with Floats, deep dives into floats. We'll cover the basic
usage of floats, followed by creating the layout with floats, and understanding the common
headaches caused by floats and how to solve for them .
$IBQUFS, Creating Buttons with Modular, Reusable CSS Classes, and CSS3, covers modular
CSS and multiple classes, and uses CSS3 to add transitions, hover states, transforms, and
gradients to our buttons.
$IBQUFS, Creating the Main Navigation and Drop-Down Menu, explains the functionality and
presentation of our primary navigation.
$IBQUFS, Becoming Responsive, covers the foundations of responsive web design and
explains how to implement it to transform our static website into a mobile website.
Preface
[ 6 ]
$IBQUFS, Web Fonts, discusses the basic syntax of the !GPOUGBDF rule, font services,
usage scenarios, and providers of web fonts and icon fonts.
$IBQUFS, Workflow for HiDPI Devices, covers techniques for preparing images to account
for Retina using SVG and techniques like the
TSDTFU attribute.
$IBQUFS, Flexbox, Part 1, introduces the Flexbox module covering the basic
implementation and properties.
$IBQUFS, Flexbox, Part 2, covers more depth on Flexbox, building a new product listing
and more advanced properties.
$IBQUFS, Wrapping Up, wraps up the concepts of CSS that we covered in this book and
provides some information on other CSS features that you can explore.
What you need for this book
Throughout the book, I've used Chrome as my browser because of its DevTools, among
other things, but other browsers have similar tools. We'll use DevTools to explore code
directly in the browser.
I've also used macOS throughout. If you're a Windows user and I refer to the command
(cmd) key anywhere in the book, you should pretend that I am referring to the Ctrl key.
Other than that, I don't think this will be an issue.
I have used the text editor Sublime Text 3. I should say that Sublime isn't the only good one
out there. There are others like Atom and Visual Studio Code that do many of the same
things.
Even though this book is on mastering CSS, we can't do much with CSS without HTML. So,
we'll be working in HTML quite a bit. The goal is to use very clean, semantic HTML; that's
what we want to aim for.
Who this book is for
This book is for web designers and developers who wish to master the best practices of CSS
in their web projects. You should already know how to work with a web page, and be ready
to use CSS to master website presentation.
Preface
[ 7 ]
Conventions
In this book, you will find a number of text styles that distinguish between different kinds
of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, path
names, dummy URLs, user input, and Twitter handles are shown as follows: "To change the
size of text use the
GPOUTJ[F property."
A block of code is set as follows:
I\
GPOUTJ[FQY
GPOUTUZMFJUBMJD
DPMPSFC
NBSHJOCPUUPNQY
^
When we wish to draw your attention to a particular part of a code block, the relevant lines
or items are set in bold:
I\
font-size: 26px;
GPOUTUZMFJUBMJD
DPMPSFC
NBSHJOCPUUPNQY
^
Any command-line input or output is written as follows:
# cp /usr/src/asterisk-
addons/configs/cdr_mysql.conf.sample/etc/asterisk/cdr_mysql.conf
New terms and important words are shown in bold. Words that you see on the screen, for
example, in menus or dialog boxes, appear in the text like this: "Clicking on the Next button
moves you to the next screen."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
剩余515页未读,继续阅读
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功