响应式
java_zhaoyanli
不忘初衷,善始善终。
展开
-
HTML5的新增标签
Document header,nav{ width: 800px; height: 60px; border: 1px solid #ccc; margin:0 auto; } nav{ margin-t原创 2016-05-24 18:18:13 · 288 阅读 · 0 评论 -
伪类选择器第一个字变大写
p{ width: 500px; height: 300px; border:1px solid #000; } p::first-letter{ font-size:50px; } JavaScript一种直译式脚本语言,是一种动态原创 2016-05-25 10:27:23 · 1086 阅读 · 0 评论 -
伪元素选择一行
/* p{ width: 500px; height: 300px; border:1px solid #000; } */ p::first-line{ color:red; } JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原原创 2016-05-25 10:32:50 · 214 阅读 · 0 评论 -
before和after的使用
p::before{ content: "今天"; width: 100px; height: 100px; display: block; background: red; } p::after{ content:"星期日原创 2016-05-25 10:36:00 · 1335 阅读 · 0 评论 -
凹凸文字
body{background: gray;} p:nth-child(1){ font-size:100px; font-weight: bold; font-family: "微软雅黑"; text-shadow: 1px 1px #000,-1px -1px #fff;原创 2016-05-25 10:51:42 · 367 阅读 · 0 评论 -
文字阴影
Document p{ font-size: 80px; font-family: "微软雅黑"; font-weight: bold; text-shadow:5px 5px 10px green,10px 10px 10px red,20px 20px 10px yello原创 2016-05-25 10:48:58 · 438 阅读 · 0 评论 -
盒子阴影
Document div{ margin:50px; width: 300px; height: 300px; background: green; box-shadow:5px 5px 10px 20px red,15px 15px 10px 20px原创 2016-05-25 11:10:54 · 206 阅读 · 0 评论 -
border-radius圆角
Document div{width: 200px;height: 200px;border:1px solid green;margin:20px;} div:nth-child(1){ width: 200px; height: 200px; border: 10px solid原创 2016-05-25 11:14:51 · 390 阅读 · 0 评论 -
用css3写一个iPhone手机案例
Document body{ background:#ccc; } .iphone{ width: 300px; height: 600px; background: #2b2b2b; margin:30px auto;原创 2016-05-25 11:36:29 · 472 阅读 · 0 评论 -
css3的背景坐标
Document div{ width: 332px; height: 341px; border:20px solid rgba(0, 0, 0, 0.5); padding:20px; background: url(img/am.jpg) no-r原创 2016-05-25 11:38:41 · 599 阅读 · 0 评论 -
CSS3的内径剪切问题(背景边框是虚线)
Document div{ width: 300px; height: 300px; border:20px dashed green; background: url(img/am.jpg) no-repeat; padding:20px;原创 2016-05-25 11:40:32 · 824 阅读 · 0 评论 -
css3,background-color:背景缩放
div{ width: 800px; height: 500px; border: 1px solid #000; background: url(img/am.jpg) no-repeat; /* background-size:100px 200px; */原创 2016-05-25 11:49:46 · 996 阅读 · 0 评论 -
设置多背景
Document div{ width: 1000px; height: 600px; border: 1px solid #000; background: url(img/am.jpg) no-repeat , url(img/am2.jpg) no-repeat bott原创 2016-05-25 11:56:42 · 370 阅读 · 0 评论 -
CSS写大叉和红心
Document @font-face {font-family: "iconfont"; src: url('font/iconfont.eot'); /* IE9*/ src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */原创 2016-05-25 13:01:48 · 3191 阅读 · 0 评论 -
HTML5 Canvas绘制环形进度条
canvas中没有直接绘制圆的方法,但有一个绘制弧线的context.arc方法,arc()方法介绍context.arc(x,y,r,sAngle,eAngle,counterclockwise);参数说明:x: 圆的中心的 x 坐标 y: 圆的中心的 y 坐标 r: 圆的半径 sAngle: 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度转载 2016-05-25 13:10:36 · 1567 阅读 · 0 评论 -
nth-of-type选择器
Document p{ background: blue; width: 50px; height: 50px; } h4{width: 50px;height: 50px;background: yellow;} .box p:nth-child(3)原创 2016-05-24 22:51:26 · 275 阅读 · 0 评论 -
nth-child选择器
Document li{list-style: none;width: 50px;height: 50px;background: blue;margin-top:10px;} li:nth-child(5){ background: green; } .box li{background: red;原创 2016-05-24 22:49:57 · 303 阅读 · 0 评论 -
CSS3伪类选择器
Document p{width: 50px;height: 50px;background: red;} p:first-child{ background: green; } p:last-child{ background: green; }原创 2016-05-24 22:49:05 · 394 阅读 · 0 评论 -
H5新增的表单属性
原创 2016-05-24 18:20:09 · 603 阅读 · 0 评论 -
js自动获得焦点
Document window.onload = function(){ var txt = document.getElementById("txt"); txt.focus(); }原创 2016-05-24 18:21:34 · 2675 阅读 · 0 评论 -
js自动选择表单
Document window.onload = function(){ var txt = document.getElementById("txt"); txt.onmouseover = function(){ txt.select(); }原创 2016-05-24 18:22:59 · 394 阅读 · 0 评论 -
H5中新增的表单元素
邮箱: 网址: 日期: 时间: 数值: 音量: 搜索: 颜色:原创 2016-05-24 18:24:16 · 3210 阅读 · 0 评论 -
H5中的表单分组
宝马 奔驰 奥迪 刘德华 郭富城 张学友 黎明原创 2016-05-24 18:25:56 · 1367 阅读 · 0 评论 -
H5中的输入框自动填充表单
宝马 悍马 野马 宝宝 比亚迪 法拉利 鼠标移入的时候才出现倒三角原创 2016-05-24 18:28:21 · 2375 阅读 · 0 评论 -
js调色板
方法一: window.onload = function(){ var r = document.getElementById("r"); var g = document.getElementById("g"); var b = document.getElementById("b");原创 2016-05-24 18:30:00 · 772 阅读 · 0 评论 -
音频audio
audio> 您的浏览器不支持此标签原创 2016-05-24 18:50:34 · 534 阅读 · 0 评论 -
音乐导航栏(鼠标移入便播放音乐)
Document *{margin: 0;padding: 0;} li{list-style: none;} ul{width: 800px;height: 35px;border: 1px solid #ccc;margin:50px auto;overflow: hidden;} ul li{width: 99px;h原创 2016-05-24 18:56:20 · 835 阅读 · 0 评论 -
视频video
您的浏览器不支持此标签原创 2016-05-24 19:20:21 · 351 阅读 · 0 评论 -
视屏暂停的时候添加广告
Document div{ width: 1000px; height: 500px; position: relative; } p{ width: 100px; height: 100px; b原创 2016-05-24 19:28:29 · 746 阅读 · 0 评论 -
视频的各种设置
Document *{margin: 0;padding: 0;} button{ width: 50px; height: 30px; background: #0587F7; border:none; border-radius: 5原创 2016-05-24 19:31:52 · 401 阅读 · 0 评论 -
css关系选择器
Document p{ background: red; width: 100px; height: 100px; } .box>p{ background: green; } h2+p{原创 2016-05-24 19:57:28 · 1178 阅读 · 0 评论 -
CSS3属性选择器
Document a[href]{ color:green; } a[href="http://www.baidu.com"]{ border:2px solid #000; } img[src="img/am.jpg"]{ border原创 2016-05-24 22:47:34 · 298 阅读 · 0 评论 -
JetBrains激活(Active)---webStrom激活
来源于:http://blog.csdn.net/xx1710/article/details/51725012选择 License server (2016.6.21更新)http://121.42.190.89:1025 (2016.7.28更新)http://idea.qinxi1992.cn/(2016.8.11更新)http://114.215.133.转载 2017-02-07 10:48:38 · 721 阅读 · 1 评论