CSS3
关注
分享
扫一扫
RedGuy_anluo
做有自己特色的应用，写有自己特色的代码
展开
-
css3-链接
在web页面中， 我们会发现，页面中如果含有链接标签，在点击的过程中它的颜色会有多种样式，比如：未点击的时候会红色，鼠标放上去变蓝色，点击过后变为绿色。这个效果具体实现如下： 首先，给HTML5文件添加一个标签： hello 百度 然后，在css3文件内进行如下设置： a:link{ text-decoration:none; color: #FF0000原创 2016-01-05 16:58:23 · 478 阅读 · 0 评论 -
JavaScript -- 制作简易瀑布流
由于是制作的本地文件，因此需要先准备好图片素材； HTML5文件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script原创 2016-05-04 20:44:39 · 855 阅读 · 0 评论 -
css3-使用多列制作瀑布流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="countstyle.css" type="text/css" rel="stylesheet"></head><body> <div class="container">原创 2016-01-07 20:26:42 · 1319 阅读 · 0 评论 -
css3-多列
<div class="div1"> 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字 大家好，这里是用原创 2016-01-07 19:56:14 · 515 阅读 · 0 评论 -
css3-动画
CSS3的动画需要遵循@keyframes规则： 规定动画的时长 规定动画的名称下面这个动画的效果就是一个方块进行一个顺时针正方形循环，然后在逆时针返回的循环效果：div{ width: 100px; height: 100px; background-color: red; position: relative; /*infinite原创 2016-01-07 17:04:42 · 451 阅读 · 0 评论 -
css3-过渡动画效果
代码效果就是：当鼠标放在正方形块上后，两秒之后开始进行动画效果：旋转360度，并且长宽变为200：`div{ width: 100px; height: 100px; background-color: blue; -moz-transition: width 2s,height 2s,-moz-transform 2s; transition: w原创 2016-01-07 14:51:08 · 698 阅读 · 0 评论 -
css3-动画样式
1 2D转换方法： translate()——移动 rotate()——旋转，参数是角度，例如：180deg scale()——缩放(宽度，高度)，参数都是以倍数的形式（1,2） skew()——倾斜效果 matrix() ——矩阵.div2{ transform: translate(100px,100px); /*如果浏览器不支持该效果,可以设定浏览器名称*/原创 2016-01-07 13:53:35 · 692 阅读 · 0 评论 -
css3-对齐、分类、导航栏
1 对齐操作.div{ width: 70%; height: 1000px; background-color: red; /*使用margin居中效果*/ /*margin-left: auto;*/ /*margin-right: auto;*/ /*margin: 100px auto;*/ /*使用position进行右对原创 2016-01-07 12:49:25 · 1217 阅读 · 0 评论 -
css3-选择器
1. 元素选择器h1、h2{}<h1>标题1</h1><h2>标题2</h2>*{ /*font-size: 45px;*/ color: red; margin: 0px; padding:0px;}h1,h2{ /*如果使用过通配符之后下方没有进行再次赋值，则一律按照通配符的设置*/ /*color: cyan;*/ } 1. 类原创 2016-01-06 22:26:20 · 587 阅读 · 0 评论 -
css3-浮动制作的简单瀑布流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流</title> <link href="waterStyle.css" rel="stylesheet" type="text/css"></head><body> <div id="div1"> <u原创 2016-01-06 20:20:39 · 1117 阅读 · 0 评论 -
css3-定位和浮动
1、 css定位： 改变元素在页面上的位置 2、 css定位机制： 普通流：元素按照其在HTML中的位置顺序决定排布的过程 浮动： 绝对布局： 3、 css定位的属性: position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中 top/left/right/bot原创 2016-01-06 20:19:36 · 2058 阅读 · 0 评论 -
css3-盒子模型的应用
根据一个网页的设计，来仿照网页使用盒子制作一个类似的板块结构： 大致分为三部分： 网页上面的头部： top 网页中间部分的内容： body 网页下部的页脚：footing其中body分为三部分 footing分为两部分实例代码如下： （div标签的class使用点语法 .XXX{}）<!DOCTYPE html><html lang="en"><head> <meta cha原创 2016-01-06 16:03:44 · 1027 阅读 · 0 评论 -
css3-盒子模型之外边距
围绕在内容边框的区域，就是外边距，外边距默认为透明区域外边距接受任何长度单位、百分数值 设置方式和内边距大同小异，可以分为：整体设置：margin 单侧设置：margin-bottom/left/right/top下面是一个内外边距的综合使用：<div class="container"> <div class="bd"> <div class="pd">原创 2016-01-06 13:49:33 · 2020 阅读 · 0 评论 -
css3-盒子模型之边框
边框的样式: border-style: 或者单独设置边框某一侧的样式：border-top/left/bottom/right-style: 边框宽度: border-width: 或者单独设置边框某一侧的宽度：border-top/left/bottom/right-width: 边框颜色border-color: 或者单独设置一侧的颜色： 同上圆角边框的圆角半径： border-ra原创 2016-01-06 13:16:22 · 716 阅读 · 0 评论 -
css3-表格
使用CSS3设置表格的边框及颜色： 在里 CSS3文件里： th是用来设置内边框的，还有tr,td tb,th{text-align: center; //居中background-color: cyan;//整个表格的背景颜色border: 1px solid blue;//边框的宽度和颜色} 这样的边框是双条的,如果不需要这样的，可以使其折叠：（合并边框）tb{width: 400原创 2016-01-05 20:34:21 · 649 阅读 · 0 评论 -
css3-列表
首先，要了解CSS列表的一些属性： list-style 简写列表项 list-style-image 列表项图像 list-style-position 列表标志位置（不常用） list-style-type 列表类型（列表名前边那个点的样式）list-style-type： 直接在属性设置中：list-style-typ原创 2016-01-05 17:13:49 · 661 阅读 · 0 评论 -
HTML5 -- 使用css3实现简单的响应式布局
本文简单的讲解了如何使用css3实现简单的响应式布局：html5文件:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name ="viewport" content="width = device-width,initial-scale=1"> <title>index01</titl原创 2016-05-09 15:12:31 · 32714 阅读 · 1 评论