CSS
人生如初见_张默
这个作者很懒,什么都没留下…
展开
-
css--高级--对齐/居中
对齐除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。margin--水平对齐 ,如果宽度为100%,对齐无效//水平居中.right { margin:auto; width:100px;}float--左右对齐//右对齐.right { float:right; width:1...原创 2019-09-05 14:54:10 · 203 阅读 · 0 评论 -
css---定位
fixed定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动p.pos_fixed{ position:fixed; top:30px; right:5px;}relative 定位相对定位元素的定位是相对其正常位置。移动相对定位元素,但它原本所占的空间不会改变。h2.pos_left{ positio...转载 2019-09-09 09:51:57 · 136 阅读 · 0 评论 -
css--计数器
使用计数器自动编号CSS 计数器使用到以下几个属性:counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content - 插入生成的内容 counter() 或 counters() 函数 - 将计数器的值添加到元素要使用 CSS 计数器,得先用 counter-reset 创建:body { counter-res...转载 2019-09-06 16:39:48 · 113 阅读 · 0 评论 -
css--属性选择器
属性选择器选择某个属性的的所有元素<!-- 将所有属性为title的颜色设置为红色 -->[title]{ color:red;}属性和值选择器选择属性值为run的:[title=run]{ border:1px solid red;}属性和值的选择器-多值选择所有属性值为run的:[title~=run]{ c...转载 2019-09-06 16:27:14 · 108 阅读 · 0 评论 -
css--组合选择符
在 CSS3 中包含了四种组合方式:后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔)后代选择器后代选择器用于选取某元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:div p{ background-color:yellow;}子元素选择...转载 2019-09-06 16:11:27 · 90 阅读 · 0 评论 -
css--3D转换
rotateX() 方法围绕其在一个给定度数X轴旋转的元素。div{ transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */}rotateY() 方法围绕其在一个给定度数Y轴旋转的元素。div{ transform: rot...转载 2019-09-06 15:45:53 · 151 阅读 · 0 评论 -
css--2D转换
2D变换方法:translate(),rotate(),scale(),skew(),matrix()translate() 方法根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webki...转载 2019-09-06 15:06:52 · 188 阅读 · 0 评论 -
css--弹性盒子
CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子由弹性容器(Flex...转载 2019-09-06 12:31:54 · 340 阅读 · 0 评论 -
css--边框
box-sizingCSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中不使用 CSS3 box-sizing 属性默认情况下,元...转载 2019-09-06 11:50:34 · 118 阅读 · 0 评论 -
css--分页
点击及鼠标悬停<style>ul.pagination { display: inline-block; padding: 0; margin: 0;}ul.pagination li {display: inline;}ul.pagination li a { color: black; float: left; pa...原创 2019-09-06 11:41:15 · 133 阅读 · 0 评论 -
css--按钮
基本按钮rgba:rgba(255,255,255,0.5);//实现透明度,0.5为透明度<style> .button { background-color:red;//按钮颜色 border:none; color:white;//字体颜色 padding:10px 15px; te...原创 2019-09-06 11:03:52 · 280 阅读 · 0 评论 -
css--图片
圆角图片img{border-redius:50%;}缩略图 img { border: 1px solid #ddd; border-radius: 4px; padding: 5px;}<img src="paris.jpg" alt="Paris"> a { display: inline-block; bord...原创 2019-09-05 19:47:53 · 228 阅读 · 0 评论 -
css--用户界面
resizediv{ resize:both; overflow:auto;}box-sizing规定两个并排的带边框方框:div{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left;}外...原创 2019-09-05 19:31:23 · 80 阅读 · 0 评论 -
css--多列
下表列出了所有 CSS3 的多列属性:属性 描述 column-count 指定元素应该被分割的列数。 column-fill 指定如何填充列 column-gap 指定列与列之间的间隙 column-rule 所有 column-rule-* 属性的简写 column-rule-color 指定两列间边框的颜色 column-rul...原创 2019-09-05 19:20:06 · 107 阅读 · 1 评论 -
css--圆角
设置圆角#round{border-radius:20px;}//矩形四个角指定每个圆角#round{border-radius:15px 20px 24px 23px;}圆角属性属性 描述 border-radius 所有四个边角 border-*-*-radius 属性的缩写 border-top-left-radius 定义了左上角的弧...原创 2019-09-05 18:44:11 · 70 阅读 · 0 评论 -
css--渐变
线性渐变/*从上到下*/#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradien...原创 2019-09-05 17:31:36 · 72 阅读 · 0 评论 -
css--文本
文本样式缩进文本p{text-indent:5px;}继承div#outer {width: 500px;}div#inner {text-indent: 10%;}p {width: 200px;}<div id="outer"><div id="inner">some text. some text. some text.<p>...原创 2019-09-05 17:11:32 · 65 阅读 · 0 评论 -
css--背景
p{background-color:red;}//背景色p{background-image:url();}//背景图片p{background-image:url(); backgroup-repeat:repeat-y;}//背景重复p{background-position:center;}//背景定位p{background-attachment:fixed;}//背景...原创 2019-09-05 16:07:32 · 99 阅读 · 0 评论 -
CSS--Display(显示) 与 Visibility(可见性)
隐藏元素 - display:none或visibility:hidden隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。h1.hidde...转载 2019-09-09 09:53:01 · 323 阅读 · 0 评论