css
文章平均质量分 65
逍遥不羁
这个作者很懒,什么都没留下…
展开
-
CSS控制a标签链接的四种状态
/*CSS链接的四种状态 *a:link 普通的、未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 */a:link{ color: blue; text-decoration:none;/用于去除下划线/ }a:visited{ color: red; }原创 2015-10-01 18:37:48 · 15961 阅读 · 0 评论 -
一个简单的页面,设置背景图平铺、table布局居中、响应式布局及响应式布局中em尺寸单位使用
1、设置背景图尺寸background-size的方式:设置背景图片的尺寸:background-size: length|percentage|cover|contain;length|percentage:两个值,第一个值为宽、第二个值为高,如只设定一个值,第二个值为auto。cover:拉伸背景图片短边尺寸,实现短边全覆盖,长边尺寸等比例拉伸,可能会超出背景定位区域边界。contain:原创 2016-04-05 11:13:39 · 4940 阅读 · 0 评论 -
从简单的左右列固定、中间列自适应的三列布局看布局设计技巧以及margin负值使用
HTML: 网页的主体部分在中间,要优先保证主体部分显示,所以主体部分优先加载,html代码体现在布局上,就是中间的主体代码放在前面,而一些如左右侧边栏、弹框信息等非主体代码放在主体代码的下面 <div class="main"> <div class="main_body">Main</div> </div> <div class="left">Left</原创 2016-04-06 16:39:32 · 812 阅读 · 0 评论 -
探究CSS3 box-sizing属性,重新定义盒子模型with、height尺寸
box-sizing属性作用:通过box-sizing属性,重新定义盒子模型with、height属性所包含的范围。box-sizing属性值:content-box:border和padding不计算入width、height之内,默认值。padding-box:padding计算入width、height内,目前只有firefox支持。border-box:border和padding计算入wi原创 2016-04-07 17:56:25 · 1856 阅读 · 0 评论 -
Flex 布局教程:语法篇
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex布局将成为转载 2016-04-07 18:32:21 · 1978 阅读 · 0 评论 -
Flex 布局教程:实例篇(二)
使用flex布局,绘制骰子的六个面。先看效果图:html代码:<body> <div class="first-face"> <span class="pip"></span> </div> <div class="second-face"> <span class="pip"></span> <span class="pip"><转载 2016-04-08 10:54:18 · 1360 阅读 · 0 评论 -
Flex 布局教程:实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到code转载 2016-04-08 10:48:14 · 2912 阅读 · 0 评论 -
Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局
一、Flex主要解决两个问题:1、元素位置:由6个容器属性和2个项目属性控制6个容器属性 flex-direction flex-wrap flex-flow justify-content align-items align-content2个项目属性 order align-self2、元素尺寸或自适应能力:由4个项目属性控制4个项目属原创 2016-04-08 17:38:11 · 26616 阅读 · 2 评论 -
由html,body{height:100%}引发的对html和body的思考
一、html,body{height:100%}今天看到一个CSS样式:html,body{height:100%},第一次看到,感觉挺奇怪,为什么html还需要设置height:100%呢,html不就是整个窗口吗?我是这样认为的。然后就把html去掉只剩下body的height:100%,麻烦了,页面内容消失了(页面里只有一个空div通过百分比设置height)。html代码:<body><d原创 2016-04-08 19:07:13 · 35542 阅读 · 10 评论 -
CSS定位position使用介绍
一、定义:设置元素的偏移效果,一般配合left、top、right、bottom属性共同作用,用于元素定位。 二、position 属性值介绍: 说明:1、文档流:元素未定位前(偏移前)的原本所占的空间仍保留;非文档流:元素未定位前(未偏移前)的原本所占的空间由后面元素填充,被其占用。2、相对元素:作为当前元素偏移的定位元素(或偏移元素的包含块),以定位元素为基准发生偏移。3、设置成rela原创 2016-03-15 14:19:43 · 751 阅读 · 0 评论 -
搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax
1、px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2、em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 看下面例子: HTML:<body>body<div class="div1">div1 <div class="div2">div2 <div class="div3">div3原创 2016-04-11 11:53:04 · 25171 阅读 · 4 评论 -
CSS实现镂空遮罩引导层
1、用一个外部元素控制遮罩层显示区域,避免出现滚动条 2、用一个内部元素实现遮罩层和镂空效果,其中,遮罩层通过设置大尺寸黑色半透明border实现,镂空区域通过设置元素小width和小height实现 3、通过位移控制镂空的位置HTML:<!-- 遮罩层的限制层:overflow:hidden控制不出现滚动条 --><div class="test_outer"> <!-- 遮罩层 -转载 2016-04-29 13:45:56 · 7359 阅读 · 1 评论 -
详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义:CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪元素种类区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。//伪类 :first-child 添转载 2016-04-05 18:53:24 · 607 阅读 · 0 评论 -
CSS基础:基本选择器分类和使用
1、通配符选择器(*)*{ marigin: 0; padding: 0;}//ul元素下的所有元素ul *{border:1px solid blue;}2、元素选择器(Element)li {background-color: grey;}3、类选择器(.className)01、单类选择器<li class="important">1</li><li>2</li>.im原创 2015-10-01 15:17:01 · 2378 阅读 · 0 评论 -
CSS伪类选择器介绍和使用
伪类选择器:大的分类可以分为结构伪类选择器、动态伪类选择器和UI元素状态伪类选择器结构伪类选择器1、nth系列选择器:nth-child和nth-of-type:first-child选择某个元素的第一个子元素;:last-child选择某个元素的最后一个子元素;:nth-child()选择某个元素的一个或多个特定的子元素;:nth-last-child()倒序选择某个元素的一个或多个特定的子原创 2016-04-20 15:40:12 · 2026 阅读 · 0 评论 -
CSS设置元素水平居中、垂直居中方式汇总
按照水平居中、垂直居中、行内元素、块级元素等条件进行组合获取效果水平居中:行内元素解决方案只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:.parent { text-align:center;}水平居中:块状元素解决方案.item { /* 这里可以设置顶端外边距 */ margin: 10px auto;}水平居中转载 2016-04-05 16:01:16 · 15767 阅读 · 1 评论 -
从设置a标签背景图片无法显示探究background-image:url()
1、先说问题:把首页面的头部用一个大的背景图平铺,占据全屏,点击图片任何位置,都进行跳转,所以想到把图片作为a标签的背景图的方式来实现,但问题来了,背景图死活无法显示,页面一片空白,代码如下: <div id="banner" class="banner"> <a href="#" class="d1"></a> </div> #banner a{ bac原创 2016-03-29 18:49:14 · 26148 阅读 · 0 评论 -
display属性值block,inline和inline-block概念和区别
一、总体概念1、block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。2、大体来说HTML元素各有其自身的布局级别(block元素还是inli转载 2016-03-18 17:32:08 · 4940 阅读 · 1 评论 -
CSS列表
/*CSS列表 *list-style 简写列表项 *list-style-image 列表项图像:可以使用本地图片替换圆点等类型 *list-style-position 列表标志位置,属性值有inside和outside,非常用属性 *list-style-type 列表类型:如默认的圆点disc、空心圆circle、数字decimal、取消none等 */原创 2015-10-01 19:15:31 · 471 阅读 · 0 评论 -
CSS文本和字体
/*CSS字体:用于定义字体的系列、大小、风格、加粗和变形*font-family 设置字体系列*font-size 设置字体大小*font-style 设置字体风格*font-weight 设置字体粗细*font-variant 设置变形,以小型大写字体或正常字体显示文本*//*CSS3对字体系列的改进*1、使用@font-face引入字体,*2、原创 2015-10-01 20:42:01 · 1389 阅读 · 0 评论 -
CSS表格
/*table,tr,th,td{ border: 1px solid red;//设置表格边框,同时指定表格边框尺寸、风格、颜色 // border-collapse:collapse;//折叠边框:将表格的双线边框进行折叠,折叠成单线边框// background-color:aquamarine;//设置表格背景颜色// }td{ width: 100原创 2015-10-01 19:56:25 · 527 阅读 · 0 评论 -
CSS定位:普通流定位属性和浮动
一、CSS定位:改变元素在页面上的位置二、CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动 绝对布局三、CSS定位属性:/**position 把元素放在一个对应的位置中,位置包括: 静态的static 默认属性,此时设置的偏移量将失效,元素也不会产生堆叠 相对的relative 占原创 2015-10-01 22:53:30 · 1120 阅读 · 0 评论 -
CSS盒子模型
一、CSS盒子模型,内容范围包括:margin、border、padding、content 二、padding:内边距 padding-left 设置内容距离左内边框距离 padding-right 设置内容距离右内边框距离 padding-top 设置内容距离上内边框距离 padding-bottom 设置内容距离下内边框距离原创 2015-10-02 00:03:47 · 946 阅读 · 0 评论 -
CSS样式背景样式
CSS样式背景样式:body{ background-image:url(“bg.gif”); background-repeat:no-repeat; background-position:left top; background-attachment:scroll; background-size: 300px 300px; back原创 2015-10-01 17:41:06 · 637 阅读 · 0 评论 -
CSS轮廓,突出元素
/*CSS轮廓:用于突出元素的作用 *outline 设置轮廓属性 *outline-color 设置轮廓的颜色 *outline-style 设置轮廓的样式 *outline-width 设置轮廓的宽度 */p{ outline-color: red; outline-style:dotted; outline-width: 1px;原创 2015-10-01 20:05:44 · 1756 阅读 · 0 评论 -
easyui在页面布局中引入外部的jsp页面,css冲突,功能失效,页面混乱
easyui在页面布局中引入外部的jsp页面,如header.jsp或left.jsp,避免出现页面混乱有两个方式: 1、两个jsp中不能有页头,除了编码声明外,直接div; 2、或者布局引入的时候,用ifame作为容器,用iframe引入header.jsp或left.jsp;原创 2015-09-16 09:30:33 · 8016 阅读 · 0 评论 -
使用easyui框架form控件,单选按钮radio或复选框checkbox样式问题
easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio或复选框checkbox与文本框textbox样式不统一的问题,要保证其样式的统一性,可以通过如下代码实现:form表单html代码: <tr> <td style="text-align:right;">是否管理员:</td>原创 2015-10-29 15:59:48 · 74902 阅读 · 3 评论 -
关于CSS浮动float属性的了解及清除浮动的方式
声明:本文主要对一些文章关于float介绍自己的理解和整理,方便日后深入研究和使用,同时提供原文链接。正文:1、浮动的本质: 挥刀自宫,破坏inline-box行内框元素特质(即破坏了高度),导致破坏自身模型(line-box线框模型),进而影响后面元素,实现文字环绕图片显示的效果和页面布局;但用浮动实现页面布局本不是浮动该干的事情。 解释线框模型--行内框(线框)元素原创 2016-03-16 16:10:38 · 2261 阅读 · 0 评论 -
探究CSS属性overflow:hidden的作用:隐藏溢出和清除浮动
1、首先说一下overflow的定义:overflow属性规定当内容溢出元素框时发生的事情。2、overflow属性可能的值: 3、overflow:hidden的作用:1)、对超出尺寸进行裁切,也就是隐藏溢出(这个比较好理解,不做解释)2)、清除浮动: a、浮动的元素会脱离文档流,高度塌陷,同时父元素如果没有主动设置高度,因无法检测到浮动元素的高度,也会塌陷,高度为0。 b、元素浮原创 2016-03-16 18:17:01 · 10577 阅读 · 1 评论 -
CSS属性display:inline-block;实现列表布局
1、先说一下列表浮动布局列表浮动布局:指通过使用float属性,让列表元素依次排列的布局(通常是左浮动,float:left)。这是相当常见的也是目前最最主流的列表布局方式。列表浮动布局的局限性:每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。举例说明:如新浪微博,其原创 2016-03-18 15:15:30 · 1181 阅读 · 0 评论 -
探究CSS line-height属性
1、line-height 属性设置行间的距离(行高),而行间距的尺寸分配是line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box),2、可能的值有: 注:行间距自动适应行高的方式,最好用的是采用number数值的方式。3、设置了line原创 2016-03-17 17:20:27 · 1523 阅读 · 0 评论 -
word-wrap:break-word与word-break:break-all的关系及强制换行与强制不换行问题
word-wrap:break-word与word-break:break-all的关系:word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句(换行),不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一原创 2016-03-18 16:32:49 · 2769 阅读 · 0 评论 -
探究CSS box-shadow属性
一、先看定义和基本用法:1、定义: box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。2、解释:阴影列表:为框添加的阴影可以是一个或多个,拿正方形来说,最多可以添加8个阴影,4条边*内外2个,多个阴影用逗号分隔。每个阴影组成的值: 3、对值说明:h-shadow水平阴影位置原创 2016-04-07 13:44:34 · 2604 阅读 · 0 评论