2016 年 9月 3 日随笔档案 - dataman

CSS3对于盒中容纳不下的内容的显示——overflow属性

摘要： overflow属性 1.如果将overflow属性值设定为hidden，则超出容纳范围的文字将被隐藏起来。 div{ overflow:hidden; } 2.如果将overflow属性值设定为scroll，则div元素中将出现固定的水平滚动条与垂直滚动条，文字超出div元素的容纳范围时将被滚动显阅读全文

posted @ 2016-09-03 15:37 dataman 阅读(343) 评论(0) 推荐(0)

CSS3让长单词与URL地址自动换行——word-wrap属性

摘要： div{ word-wrap:break-word; } word-wrap属性可以使用的属性值为normal与break-word两个。使用normal属性值时浏览器默认处理，只在半角空格或者连字符的地方进行换行。使用break-word时浏览器可在长单词或URL地址内部进行换行。目前，word 阅读全文

posted @ 2016-09-03 15:11 dataman 阅读(591) 评论(0) 推荐(0)

CSS3让文本自动换行——word-break属性

摘要： 1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能。 2.指定自动换行的处理方法在CSS3中，可以使用word-break属性来自己决定自动换行的处理方法。 div{ word-break:break-all; } 当word-break属性使用break-all参数值时，对于西阅读全文

posted @ 2016-09-03 15:04 dataman 阅读(2370) 评论(0) 推荐(0)

CSS3使用content属性来插入项目编号

摘要：首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像，这里我记录的是利用这个content属性来在项目前插入项目编号，同时可以利用content属性在字符串两边加上括号。 1.在多个标题前加上连续编号 <style type="text/css"> 阅读全文

posted @ 2016-09-03 14:46 dataman 阅读(479) 评论(0) 推荐(0)

CSS3中only-child伪类选择器

摘要： <body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ background:yellow; } </style> <h2>列表1</h2> <ul> <li>li1</li> </ul> <h2>列阅读全文

posted @ 2016-09-03 11:38 dataman 阅读(324) 评论(0) 推荐(0)

CSS3中nth-of-type和nth-last-of-type

摘要： 1.使用nth-child和nth-last-child时会产生的问题在使用nth-child和nth-last-child时，其计算子元素是奇数个元素还是第偶数个元素时，是连同父元素中的所有子元素一起计算的。当父元素是列表时，列表中只可能有列表项目一种子元素，所以不会出问题，但是当父元素是di 阅读全文

posted @ 2016-09-03 11:30 dataman 阅读(386) 评论(0) 推荐(0)

CSS3中first-child、last-child、nth-child、nth-last-child

摘要： 1.单独指定第一个子元素、最后一个子元素的样式 <style type="text/css"> li:first-child{ background:yellow; } li:last-child{ background:blue; } </style> 2.对指定序号的子元素使用样式 <style 阅读全文

posted @ 2016-09-03 11:19 dataman 阅读(1306) 评论(0) 推荐(0)

CSS3中结构伪类选择器——root、not、empty、target选择器

摘要： 1.root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含整个页面的<html>部分。 <style type="text/css"> :root{ background:yellow; } body{ background:green; } 阅读全文

posted @ 2016-09-03 11:08 dataman 阅读(477) 评论(0) 推荐(0)

CSS中伪类选择器及伪元素

摘要： 1.伪类选择器在CSS中，最常用的伪类选择器是使用在a（锚）元素上的几种选择器，它们的使用方法如下： a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{c 阅读全文

posted @ 2016-09-03 10:48 dataman 阅读(356) 评论(0) 推荐(0)

CSS3属性选择器

摘要： <div id="section1"> 示例文本1</div> <div id="subsection1-1">示例文本1-1</div> <div id="subsection1-2">示例文本1-2</div> <div id="section2">示例文本2</div> <div id="su 阅读全文

posted @ 2016-09-03 00:00 dataman 阅读(871) 评论(0) 推荐(0)