随笔分类 -  CSS读书笔记

ch7对表单和数据表格使用样式
摘要：对数据表格应用样式 1、表格特有的元素 caption：基本上用做表格的标题。summary：可应用于表格的标签，用来描述表格的内容（与image的alt文本相似） <table class="cal" summary="A calandar style date picker"> <caption 阅读全文
posted @ 2017-11-30 22:09 L_mj 阅读(347) 评论(0) 推荐(0)
ch6 列表和导航条
摘要：为列表添加定制的项目符号 可使用list-style-image属性：缺点是对项目符号图像的位置的控制能力不强。 常用的方法：使用list-style-type来关闭项目符号，将定制的项目符号作为背景添加在列表元素上，使用背景图像的定位属性精准的控制自定义项目符号的对准方式。 在列表项左边添加内边距 阅读全文
posted @ 2017-11-22 16:06 L_mj 阅读(191) 评论(0) 推荐(0)
ch5 创建类似按钮的链接
摘要：锚是行内元素，所以只有在单击链接的内容时它们才会激活，如果可以实现为按钮的效果，就可以有更大的可单击区域，实现方法为：display设置为block，修改width、height和其他属性，代码如下： 实现的结果如下，链接显示为块级元素，单击块中的任何地方都会激活链接： 简单的翻转 使用:hover 阅读全文
posted @ 2017-10-26 19:29 L_mj 阅读(228) 评论(0) 推荐(0)
ch5 对链接应用样式
摘要：简单的链接样式 对链接应用样式最容易的方式是：使用锚类型选择器，例如 a {color:red;} 链接伪类选择器：1、:link：寻找没有被访问过的链接2、:visited：寻找被访问过的链接 动态伪类选择器:1、:hover：寻找鼠标悬停处的元素2、:active：寻找被激活的元素，激活发生在链 阅读全文
posted @ 2017-10-26 19:26 L_mj 阅读(279) 评论(0) 推荐(0)
ch4 圆角框
摘要：固定宽度的圆角框 只需要两个图像：一个应用于框的顶部，一个应用于底部 随着内容的增加，框垂直扩展（但不会水平扩展） 随着内容的增加，框垂直扩展（但不会水平扩展） 灵活的圆角框（滑动门技术） 不要使用一个图像组成顶部和底部图像，而是应用两个相互重叠的图像，随之框尺寸的增加，大图像就会有更多部分显露出来 阅读全文
posted @ 2017-10-26 19:23 L_mj 阅读(237) 评论(0) 推荐(0)
ch4 背景图像基础
摘要：如果希望网站有一个好看的背景，只需将背景应用于主体元素，即在body上应用background-image，默认情况下浏览器水平和垂直的重复显示背景图像，让图像平铺在整个页面上，可以选择背景图像是垂直平铺、水平平铺、不平铺。如果希望在网页的开头显示一个人大的品牌图像，且不包含人格信息，是纯表现性的， 阅读全文
posted @ 2017-10-26 19:19 L_mj 阅读(274) 评论(0) 推荐(0)
ch8 CSS 3列（等高文本列）
摘要：css 3可以创建等高文本列，通过column-count、column-width、column-gap属性实现。假设标记如下： 下面的规则创建一个三列布局，每列的宽度为14em，列之间有2em的间距。CSS列的优点之一是在可用的空间小于已定义列的宽度时的处理方式，列不会像使用浮动时那样回绕，而是 阅读全文
posted @ 2017-10-26 19:15 L_mj 阅读(141) 评论(0) 推荐(0)
ch8 高度相等的列--CSS方法
摘要：如下图所示效果，可以使用表格实现，本文采用在CSS中实现。 标记如下： 在实例中，有3个div，每列一个div，每个div中包括标题、内容、空的div，这个空的div作为底角的钩子，将这3个div放入容器div中，使用容器div限制高度，下述代码给框设置样式： 运行结果如下：产生3个高度不一致的列 阅读全文
posted @ 2017-10-26 19:12 L_mj 阅读(319) 评论(0) 推荐(0)
ch8 faux列
摘要：在一个布局中，假设有导航元素和内容元素，切给他们都分别应用了背景，理想情况下，背景应该拉长到整个布局的最大高度，从而形成列的效果，但是实际上，因为导航元素没有扩展到最大高度，所以它们的背景不会拉长，如图所示，左边的导航的灰色背景的高度没有达到最大高度。 解决方法：为创建列的效果，需创建一个伪列，即在 阅读全文
posted @ 2017-10-26 18:01 L_mj 阅读(410) 评论(0) 推荐(0)
ch8 固定宽度、流式、弹性布局
摘要：假设浏览器窗口设置为1250px；wrapper的宽度为960px；content的宽度为920px：确保了wrapper居中时两边有20px的间距； secondary的宽度为230px； primary的宽度为670px； 其中primary中的secondary的宽度为400px; prima 阅读全文
posted @ 2017-10-26 17:57 L_mj 阅读(334) 评论(0) 推荐(0)
ch8 让div居中--使用外边距
摘要：假设有一个布局，希望让其中的容器div在屏幕上水平居中，则只需要定义div的宽度，然后将水平外边距设置为auto 注意：上述方法在现代浏览器中都是有效的，但是，混杂模式中的IE 5.x和IE 6不支持margin:auto声明，但IE将text-align:center误解为让所有东西居中，而不只是 阅读全文
posted @ 2017-10-26 17:53 L_mj 阅读(236) 评论(0) 推荐(0)
ch8 基于浮动的布局（两列浮动布局、三列浮动布局）
摘要：CSS布局技术的根本是3个基本概念：定位、浮动、外边距操纵。 只需要设置希望定位的元素的宽度，然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的任何空间，它们就不再对包围他们的块框产生任何影响，为解决这个问题: 需要对布局中各个点上的浮动元素进行清理，常见的做法不是连续的浮动和清理元素，而是 阅读全文
posted @ 2017-10-26 17:51 L_mj 阅读(253) 评论(0) 推荐(0)
ch3 盒模型、定位
摘要：标准盒模型、怪异盒模型 外边距叠加 当两个或者争夺垂直外边距相遇时，他们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。 外边距叠加实际上有重要意义，例如下图：由几个段落组成的典型文本页面，第一个段落上面的空间等于段落的顶外边距，如果没有外边距叠加，后续的所有段落之间的空 阅读全文
posted @ 2017-10-26 17:48 L_mj 阅读(302) 评论(0) 推荐(0)