CSS
关注
分享
扫一扫
lql_h
这个作者很懒，什么都没留下…
展开
-
CSS入门
三种方式元素内嵌样式<p style="color:red;font-size:50px;">这是一段文本</p>解释：即在当前元素使用style属性的声明方式文档内嵌样式<style type="text/css">p { color: green; font-size: 30...原创 2019-04-13 09:52:42 · 97 阅读 · 0 评论 -
CSS3多列布局
属性及版本CSS3提供了columns多列布局属性等7个属性集合，具体如下：columns集成column-width和column-count两个属性column-width定义每列列宽度column-count定义分分列列数column-gap定义列间距column-rule定义列边框column-span定义多列布局中子元素跨列效果，firefox不支持col...原创 2019-04-14 07:15:03 · 1203 阅读 · 0 评论 -
CSS传统布局
布局模型在早期没有平板和智能手机等移动设备大行其道的时期，Web页面的设计主要是面向PC端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。一般来说有4:3、16:10、16:9这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率1024*768设计即可。为了使浏览器底部不出现滚动条，需要减去适当的宽度，比如减去28，最终固定长度设置为996即可。当...原创 2019-04-14 07:13:11 · 395 阅读 · 0 评论 -
CSS3动画效果
动画简介CSS3提供了类似Flash关键帧控制的动画效果，通过animation属性实现animation实现动画效果主要由两个部分组成：1.通过类似Flash动画中的关键帧声明一个动画；2.在animation属性中调用关键帧声明的动画。animation-name用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animatio...原创 2019-04-14 06:59:32 · 332 阅读 · 0 评论 -
CSS3过渡效果
过渡简介过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked等。CSS3提供了transition属性来实现这个过渡功能，主要属性如下:transition-property指定过渡或动态模拟的CSS属性transition-duration指定完成过渡所需的时间transition-timing-functio...原创 2019-04-14 06:58:17 · 839 阅读 · 0 评论 -
CSS3变形效果
transformCSS3提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。transform指定应用的变换功能transform-origin指定变换的起点transform的属性值:none无变换translate(长度值或百分数值) 两个方向平移元素translateX(长度值或百分数值) 水平方向平移元素translateY(长度值或百...原创 2019-04-14 06:57:04 · 1473 阅读 · 0 评论 -
CSS3边框图片效果
属性解释CSS3提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。这样，边框就可以自定义了。1.border-image-source//引入背景图片地址2.border-image-slice//切割引入背景图片3.border-image-width//边框图片的宽度4.border-image-repeat//边框背景图片的排列方式5.border-imag...原创 2019-04-13 18:33:06 · 5139 阅读 · 0 评论 -
CSS3渐变效果
线性渐变CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。方位可选参数，渐变的方位。可以使用的值有：to top、to top right、to right、to bottom、to bottom left、to left、to top left。起始色必选参数，颜色值末尾色必选参数，颜色值//两个必须参数div...原创 2019-04-13 18:30:54 · 1928 阅读 · 0 评论 -
CSS3文本效果
属性是否加前缀http://caniuse.com文本阴影CSS3提供了text-shadow文本阴影效果，这个属性在之前讲过，只是没有涉及浏览器支持情况Opera 9.5+Firefox 3.5+Chrome 4+IE 10+Safari 3.1+//正值阴影text-shadow:1px 1px 1px red;p {...原创 2019-04-13 17:59:25 · 132 阅读 · 0 评论 -
CSS3前缀和rem
CSS3前缀在CSS3的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法。各大厂商前缀列表如下：Chrome、Safari(谷歌、苹果) -webkit-Opera -o-Firefox -moz-InternetExplorer -ms-1.属性尚未提出，这个属性所有浏览器不可用；2.属性被提出，但...原创 2019-04-13 17:57:08 · 116 阅读 · 0 评论 -
CSS其他样式
颜色和透明度p{color:red;}解释：设置文本颜色。p{color:red;opacity:0.5;}解释：设置元素的透明度盒子阴影和轮廓box-shadowhoffset阴影的水平偏移量，是一个长度值，正值表示阴影向右偏移，负值表示阴影向左偏移。voffset阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子的下方，负值代表阴影位于元素...原创 2019-04-13 17:49:48 · 151 阅读 · 0 评论 -
CSS表格与列表
表格样式border-collapse相邻单元格的边框样式separate默认值，单元格边框独立collapse单元格相邻边框被合并table{border-collapse:collapse;}解释：单元格相邻的边框被合并border-spacing相邻单元格边框的间距table{border-spacing:10px;’}解释：b...原创 2019-04-13 17:41:22 · 256 阅读 · 0 评论 -
CSS边框和背景
声明边框border-width设置边框的宽度，可选border-style设置边框的样式，必选border-color颜色值设置边框的颜色，可选最简单的边框div{border-style:solid;}解释：边框长度默认3px，边框颜色为黑色配置完整的边框div{border-style:solid;border-width:2px;border-c...原创 2019-04-13 17:32:40 · 776 阅读 · 0 评论 -
CSS盒模型
CSS盒模型元素尺寸设置元素尺寸div{background: silver;width:200px;height:200px;}解释：设置元素的固定尺寸。限制元素尺寸div{background: silver;min-width:100px;min-height:100px;max-width:300px;max-height:300...原创 2019-04-13 10:25:36 · 185 阅读 · 0 评论 -
CSS文本样式
字体总汇设置字体大小。每个值从小到大的固定值。xx-smallx-smallsmallmediumlargex-largexx-large设置字体相对于父元素字体的大小smallerlarger数字+px使用CSS像素长度设置字体大小数字+%使用相对于父元素字体的百分比大小字体设置font-sizep {font-size:50p...原创 2019-04-13 10:11:06 · 347 阅读 · 1 评论 -
CSS颜色与度量单位
颜色表方案颜色的表现形式主要有三种方式：颜色名称p{color:red;}解释：这是将一个段落内的文字设置为红色，采用的是英文颜色名称颜色网址http://xh.5156edu.com/page/z1015m9220j18754.htmlhttp://finle.me/colors.htmlhttp://www.w3school.com.cn/tags/html...原创 2019-04-13 10:01:20 · 313 阅读 · 0 评论 -
CSS选择器
基本选择器通用选择器* { border: 1px solid red;}<p>段落</p><b>加粗</b><span>无</span>解释：“*”号选择器是通用选择器，功能是匹配所有html元素的选择器包括<html>和<body>标签。通用...原创 2019-04-13 09:53:58 · 229 阅读 · 0 评论 -
CSS3弹性伸缩布局
布局简介CSS3提供一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型(FlexibleBox)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中，可能还有各种改动，浏览器的兼容性还存在问题。所以，本节课作为初步了解即可。首先，第一步：先创建一段内容，分成三个区域。//HTM...原创 2019-04-14 07:17:09 · 368 阅读 · 0 评论