当前位置: 100md首页 > 电子书籍 > 资料25 > 一些大合集 > 亚马逊电子书
编号:91367
《CSS设计指南》.mobi .pdf .txt
基本信息：
    书名： CSS设计指南（第3版）
    作者： Charles Wyke-Smith
    出版社/出版时间： 人民邮电出版社2013-04-30
    国际标准书号： 978-7-115-31364-5
    电子版包括 .mobi .pdf .txt等格式：
    《CSS设计指南》.mobi 文件 6281 KB,
    《CSS设计指南》.pdf 文件 294 页，7819 KB,
    《CSS设计指南》.txt 文件 16.6 万字，428 KB。
pdf部分截图：
    第1页
    第4页
    第18页
    第20页
    第46页

目录：
        -->
        两个在标记中嵌套的例子
        我们再来看一个嵌套的例子，这一次使用blockquote元素。顾名思义，blockqoute元素包含引用内容，而且在页面上看起来是独立的元素。请注意代码中使用的表示弯引号的HTML实体。
        “Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you're gonna be rewarded.”
        Jimi Hendrix
        //使用cite元素包含作者姓名
        图1-10展示了这段代码在页面中显示的效果，为两个元素都加了轮廓。
        图1-10 blockquote元素默认会缩进
        HTML实体
        HTML实体常用于生成那些键盘上没有的印刷字符，比如TM、?、?，等等。HTML实体以一个和号(&)开头，一个分号(;)结尾，二者之间是表示实体的字符串。在前面的例子中，两个实体的名字分别是“left-double-quote”(左双引号)和“right-double-quote”(右双引号)的简写。
        Peachpit另一位作者Elizabeth Castro(她的书非常赞，在此强烈向大家推荐)在自己的一个网页中列出了常用的HTML实体：http://www.elizabethcastro.com/html/extras/entities.html。
        要注意的是，由于和号表示实体开头，所以在要显示和号的时候不能直接写和号，而要在HTML标签包含的文本中使用& 实体，这样才能显示出&来。比如，写成Johnson & Johnson，才会显示成：Johnson & Johnson。
        显然， 标签也是一个块级元素(它名字里就有block)。因为它的目的就是在页面中独立显示一块内容，所以作为块级元素非常合适。
        嵌套在blockquote元素中位于引用文本之后的是cite元素，它是一个行内元素。因为文本结束后还有空间，所以它就显示在了段落最后一行上。从图1-10中也可以看到，标签的内容默认是斜体。
        同样是在这个例子中，还可以看到两个HTML实体，“和”，分别用于生成能够正确打印出来的左、右双引号。使用这两个引号的实体，而不是按键盘上的Shift-'(Shift-引号键)，能让页面显示更加专业。
        第二个嵌套的例子如下，是一个块级元素包含三个行内元素。
        It is absolutely critical that everyone does this ASAP!
        图1-11展示了Firefox浏览器中显示的效果。
        图1-11 一个段落中嵌套着三个分别表示重要性、强调和简写的标签
        图1-12与图1-11一样，只不过显示了元素盒子的轮廓。
        图1-12 三个行内元素嵌套在一个块级元素中
        这个例子除了能让你感到情况紧急之外，还能让你有如下收获。
        文本被标记为段落，而其中包含三个行内元素。
        标签表示重要，默认以粗体显示。
        标签表示强调，默认以斜体显示。
        标签表示简写，在Firefox中默认会加上点下划线。
        好了，我们已经知道了HTML标记怎么在页面中创建盒子了，也知道了嵌套标记实际上就是嵌套盒子。那么，接下来我们就可以聊一聊文档对象模型(Document Object Model，DOM)了。
        Buy this Book
        怎么样，HTML代码极其简单，同样的标记重复四次，就是四本书。下面来看看相关的CSS吧，先看看布局和旋转文本的样式，然后再看弹出层的样式。
        section#book_area { /*与布局同宽*/
        clear:both;
        border-radius:20px 0px 20px 0px;
        border:1px solid #f58c21;
        margin:8px 0 16px; /*上下间距*/
        overflow:hidden;
        }
        #book_area article { /*四本书四栏*/
        float:left;
        width:25%;
        padding:10px 0;
        background:none;
        }
        #book_area article .inner { /*封面外包装*/
        position:relative; /*为弹出层提供定位上下文*/
        width:140px; /*包装每一本书*/
        margin:0 auto; /*在各自article元素内居中每一本书*/
        }
        #book_area .inner h3 { /*旋转文字*/
        position:absolute;
        width:160px;
        left:112%; bottom:5px; /*把文字定位在图书右侧*/
        transform:rotate(-90deg); /*旋转文字需要使用带厂商前缀的属性*/
        transform-origin:left bottom; /*设定旋转中心点，需要带厂商前缀的属性*/
        color:#ccc;
        font-size:1.4em;
        font-family:Lato, helvetica, sans-serif;
        font-style:normal;
        font-weight:900;
        text-align:left;
        }
        #book_area article.right:last-child h3 { left:85%; } /*较窄的封面需要不同的偏移量*/
        #book_area article img { box-shadow: 0 12px 8px -9px #555; }/*封面阴影*/
        在与布局同宽的section#book_area元素中，我们浮动了四个article元素，每个元素的宽度都设定为25%。在这四个article中，分别使用一个有宽度的内部div来包含图书封面。这样就可以为图书封面之间添加适当的间距，如图7-14所示。接下来要做成弹出层的aside元素目前还处于隐藏状态。
        图7-14 图书区的每本书封面的右侧都有自己的描述性标题
        旋转文字是用CSS3的transform属性的两个函数实现的。第一个函数是transform-origin，用于把旋转变换的原点设定为h3元素盒子的左下角。这里的原点指的是旋转的中心点，就好像我在那个地方插进去一根大头针一样。然后用transform的rotate函数把h3元素旋转90度，最后再将它们向上移动5像素。关于transform属性的更多介绍，请参考附注栏“CSS3变换”。如果觉得不解渴，可以购买我的电子书Visual Stylin' with CSS :)
        CSS3变换
        如果你用过Adobe Illustrator或Fireworks等平面图形设计软件，可能知道对文本和其他元素进行旋转、缩放和斜切变换。现在，通过CSS3变换在浏览器中也能实现同样的效果了(如图7-15所示)。
        CSS3为变换规定了两个属