#647
展开↯#648
作者：广西南宁市
简单时间选择器
<select name="nian" id="nian"></select>年
<select name="nian" id="yue"></select>月
<select name="nian" id="ri"></select>日
<script>$(function() {
var mydate = new Date();
var nian = mydate.getFullYear();
var yue = mydate.getMonth() + 1;
for (var i = nian; i > 1900; i--) {
var html_nian = '<option value="' + i + '">' + i + '</option>';
$('#nian').append(html_nian);
}
for (var ii = 1; ii <= 12; ii++) {
var html_yue = '<option value="' + ii + '">' + ii + '</option>';
$('#yue').append(html_yue);
}
$('#nian').change(function() {
my_ri($('#nian').val(), $('#yue').val())
});
$('#yue').change(function() {
my_ri($('#nian').val(), $('#yue').val())
});
})
function my_ri(n, y, r) {
if (n > 0 && y > 0) {
$('#ri').html('');
var mydate_ri = new Date(n, y, 0);
var ri = mydate_ri.getDate();
for (var iii = 1; iii <= ri; iii++) {
var html_ri = '<option value="' + iii + '">' + iii + '</option>';
$('#ri').append(html_ri);
}
$.each($('#nian').find('option'), function(i) {
if ($('#nian').find('option').eq(i).attr('value') == n) {
$('#nian').find('option').eq(i).attr('selected', 'selected')
}
})
$.each($('#yue').find('option'), function(i) {
if ($('#yue').find('option').eq(i).attr('value') == y) {
$('#yue').find('option').eq(i).attr('selected', 'selected')
}
})
$.each($('#ri').find('option'), function(i) {
if ($('#ri').find('option').eq(i).attr('value') == r) {
$('#ri').find('option').eq(i).attr('selected', 'selected')
}
})
}
}</script>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2018-01-24, 14:39:33
#649
作者：广西南宁市
js计算器
<style>#box {
margin:50px auto;
padding:2px;
background-color:#ebebeb;
}
#title {
text-align:left;
font-weight:bold;
font-size:12px;
}
input[type="button"] {
width:60px;
height:45px;
line-height:20px;
text-align:center;
}
.num {
border:0px;
background-color:#fafafa;
}
.symbol {
background-color:#f3f3f3;
border:0px;
}
#zhi {
height:40px;
width:250px;
text-align:right;
border:0px;
background-color:#ebebeb;
font-size:30px;
font-weight:bold;
}
#count {
height:20px;
width:250px;
text-align:right;
border:0px;
background-color:#ebebeb;
}
</style><table id="box">
<tbody><tr id="title">
<td colspan="4">计算器</td>
</tr>
<tr>
<td colspan="4"><input type="text" id="count"></td>
</tr>
<tr>
<td colspan="4"><input type="text" id="zhi"></td>
</tr>
<tr>
<td><input type="button" id="CE" value="CE" class="symbol" onclick="CE()"></td>
<td><input type="button" id="C" value="C" class="symbol" onclick="returnToZero()"></td>
<td><input type="button" id="delete" value="←" class="symbol" onclick="delete1()"></td>
<td><input type="button" id="except" value="/" class="symbol" onclick="look(this.value)"></td>
</tr>
<tr>
<td><input type="button" id="num7" value="7" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="num8" value="8" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="num9" value="9" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="cheng" value="*" class="symbol" onclick="look(this.value)"></td>
</tr>
<tr>
<td><input type="button" id="num4" value="4" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="num5" value="5" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="num6" value="6" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="add" value="+" class="symbol" onclick="look(this.value)"></td>
</tr>
<tr>
<td><input type="button" id="num1" value="1" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="num2" value="2" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="num3" value="3" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="minus" value="-" class="symbol" onclick="look(this.value)"></td>
</tr>
<tr>
<td><input type="button" value="±" class="symbol" onclick="contrary()"></td>
<td><input type="button" id="num0" value="0" class="num" onclick="display(this.value)"></td>
<td><input type="button" id="point" value="." class="symbol" onclick="look(this.value)"></td>
<td><input type="button" id="equal" value="=" class="symbol" onclick="start()"></td>
</tr>
</tbody></table>
<script>
//显示数字
function display(value) {
var zhi = document.getElementById("zhi");
var count = document.getElementById("count");
var countValue = count.value;
var symbol = countValue.substring(countValue.length - 1);
var value = value; //点击事件触发放回的value值赋值给变量value
if (equal == 1) //点击=,*,/,-,+与后,再次点击先归零,再传值
{
zhi.value = "";
zhi.value += value;
equal = 0;
} else if (zhi.value == "0") {
zhi.value = value;
} else {
zhi.value += value;
}
}
//点击+，-，*，时，count的显示
function look(value) {
var zhi = document.getElementById("zhi");
var count = document.getElementById("count");
var value = value;
count.value += zhi.value + value;
equal = 1;
}
//计算
function start() {
var zhi = document.getElementById("zhi");
var count = document.getElementById("count");
var value = count.value + zhi.value;
var return1 = eval("(" + value + ")");
document.getElementById("count").value = "";
zhi.value = return1;
equal = 1;
}
//归零
function returnToZero() {
document.getElementById("zhi").value = "0";
document.getElementById("count").value = "";
}
//Backspace
function delete1() {
var zhi = document.getElementById("zhi");
var value = zhi.value;
var return1 = value.substr(0, value.length - 1);
zhi.value = return1;
}
//CE
function CE() {
document.getElementById("zhi").value = 0;
}
//contrary取相反数
function contrary() {
var zhi = document.getElementById("zhi");
var value = zhi.value;
zhi.value = parseInt(value * (-1));
}</script>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2018-01-24, 14:37:10
#650
作者：广西南宁市
原生js轮播图（原创）
<style>
html,body,div,ul,li {
padding:0;
margin:0;
}
ul,li,ol {
list-style:none;
}
.box {
position:relative;
width:600px;
height:300px;
margin:20px auto;
}
.picture {
width:600px;
height:300px;
overflow:hidden;
position:absolute;
}
.picture ul {
position:absolute;
width:2400px;
height:300px;
}
.picture ul li {
float:left;
width:600px;
height:300px;
}
.control {
position:absolute;
bottom:0px;
left:450px;
}
.control li {
cursor:pointer;
float:left;
width:20px;
height:20px;
text-align:center;
line-height:20px;
background:lightblue;
margin:4px;
border-radius:5px
}
.control .active {
background:yellow;
}
</style>
<div class="box" id="box">
<div class="picture">
<ul id="picture">
<li><img src="http://www.jq22.com/img/cs/500x300-1.png" width="600px" height="300px"></li>
<li><img src="http://www.jq22.com/img/cs/500x300-2.png" width="600px" height="300px"></li>
<li><img src="http://www.jq22.com/img/cs/500x300-3.png" width="600px" height="300px"></li>
<li><img src="http://www.jq22.com/img/cs/500x300-1.png" width="600px" height="300px"></li>
</ul>
</div>
<ol class="control" id="control">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
var box = document.getElementById("box");
var picture = document.getElementById("picture").children;
var control = document.getElementById("control").children;
var ul = document.getElementById("picture");
for (var i = 0; i < control.length; i++) {
control[i].index = i;
control[i].onclick = function() {
for (var j = 0; j < control.length; j++) {
control[j].className = "";
}
this.className = "active";
animate(ul, -this.index * 600, 10);
}
}
var k = 0;
function autoPlay() {
k++;
if (k > control.length) {
ul.style.left = 0 + "px";
k = 1;
}
animate(ul, -k * 600, 10);
for (var i = 0; i < control.length; i++) {
control[i].className = "";
}
var index = k % control.length;
control[index].className = "active";
}
var tim = setInterval(autoPlay, 2000);
box.onmouseover = function() {
clearInterval(tim);
}
box.onmouseout = function() {
tim = setInterval(autoPlay, 2000);
}
function animate(ele, target, ms) {
clearInterval(ele.timer);
//方便清除本元素上一次的定时器操作
ele.timer = setInterval(function() {
//判断目标元素是向左或者向右（）
var step = ele.offsetLeft < target ? 10 : -10;
var result = Math.abs(target - ele.offsetLeft);
/*到动画最后移动步长时*/
if (result < 10) {
clearInterval(ele.timer);
ele.style.left = target + 'px';
} else {
//向目标元素发生位移。
ele.style.left = ele.offsetLeft + step + 'px';
}
}, ms);
}
</script>Run code
Cut to clipboard
<style>* {
padding:0;
margin:0;
list-style:none;
}
.banner {
width:640px;
height:300px;
overflow:hidden;
margin:0 auto;
}
.inner {
width:9999px;
position:relative;
animation:aaa 16s infinite 2s running;
}
@keyframes aaa {
0% {
transform:translateX(0px);
}
5% {
transform:translateX(-640px);
}
25% {
transform:translateX(-640px);
}
30% {
transform:translateX(-1280px);
}
50% {
transform:translateX(-1280px);
}
55% {
transform:translateX(-1920px);
}
75% {
transform:translateX(-1920px);
}
80% {
transform:translateX(-2560px);
}
100% {
transform:translateX(-2560px);
}
}.inner:hover {
animation-play-state:paused;
cursor:pointer;
}
.innerwrapper {
float:left;
width:640pxpx;
}
.banner img {
width:640px;
height:300px;
}
</style>
<div class="banner">
<div class="inner">
<div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="banner1"></div>
<div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x300-1.png" alt="banner2"></div>
<div class="innerwrapper"><img src="http://www.jq22.com/img/cs/300x500-1.png" alt="banner3"></div>
<div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-2.png" alt="banner4"></div>
<div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="banner1"></div>
</div>
</div>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2018-01-24, 14:25:49
#651
作者：广西南宁市
跨浏览器检测视窗大小
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框 （在这里对获取到的参数进一步使用）
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions; Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2018-01-24, 14:23:19
#652
作者：广西南宁市
canvas圆圆圈圈的动态效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,shrink-to-fit=no" />
<title> 上下班路上的那一幅静态广告 </title>
<style>
.stage{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;width:800px;max-width:100%;border:1px solid #CCC;}
</style>
</head>
<body>
<canvas class="stage" width="800" height="500"></canvas>
<script>
"use strict";
(function(query){
var ARC=0.004,
ANGLE=10,
PI2=Math.PI*2,
NUM=150,
VELOCITY=3;
function Scene(ctx,width,height){
this.ctx=ctx;
this.width=width;
this.height=height;
this.sprites=[];
ctx.globalCompositeOperation="lighter";
this.render=this.render.bind(this);
}
Scene.prototype={
add:function(sprite){
this.sprites.push(sprite);
},
render:function(timer){
var sprites=this.sprites,ii=sprites.length,i=ii,ctx=this.ctx,w=this.width,h=this.height;
ctx.clearRect(0,0,width,height);
requestAnimationFrame(this.render);
while(i){
sprites[--i].update(timer,w,h);
}
for(;i<ii;i++){
sprites[i].draw(ctx);
}
this.make(ii);
},
start:function(){
this.render();
},
make:function(num){
if(num<NUM){
var radius=getRadius();
num++;
this.add(new BallArtist("",-radius,height/2,radius,getColor(),getAngle()));
}
}
};
function Sprite(draw,behaviors){
this.draw=draw;
this.behaviors=behaviors||[];
}
Sprite.prototype.update=function(timer,w,h){
var behaviors=this.behaviors,
i=0,
ii=behaviors.length;
for(;i<ii;i++){
behaviors[i].call(this,timer,w,h);
}
};
function BallArtist(name,x,y,radius,color,angle){
this.name=name,
this.x=x;
this.y=y;
this.v=Math.random()*VELOCITY+VELOCITY;
this.radius=radius;
this.color=color;
this.angle=angle;
this.vr=Math.random()*ARC*(angle>0?1:angle<0?-1:0);
}
BallArtist.prototype=new Sprite(function(ctx){
ctx.beginPath();
ctx.fillStyle=this.color;
ctx.arc(this.x,this.y,this.radius,0,PI2);
ctx.fill();
},[function(timer,width,height){
if(this.x>width+this.radius || this.y<-this.radius || this.y>height+this.radius){
var radius=getRadius();
this.reset(-radius,height/2,radius,getColor(),getAngle());
return;
}
this.angle+=this.vr;
var sin=Math.sin(this.angle),
cos=Math.cos(this.angle);
this.x+=cos*this.v;
this.y+=sin*this.v;
}]);
BallArtist.prototype.reset=function(x,y,radius,color,angle){
this.x=x;
this.y=y;
this.v=Math.random()*VELOCITY+VELOCITY;
this.radius=radius;
this.color=color;
this.angle=angle;
this.vr=Math.random()*ARC*(angle>0?1:angle<0?-1:0);
};
var cvs=document.querySelector(query),
ctx=cvs.getContext("2d"),
width=cvs.width,
height=cvs.height,
num=0,
scene=new Scene(ctx,width,height),
color=["hsla(",0,",100%,30%,.8)"],
angle=Math.PI/180*ANGLE,
radius;
function getColor(){
color[1]=Math.random()*360;
return color.join("");
}
function getAngle(){
return Math.random()*angle-(angle/2);
}
function getRadius(){
return 20*Math.random()+5;
}
scene.start();
})("canvas");
</script>
</body>
</html>
Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2018-01-24, 11:45:59
#653
作者：广西南宁市
a++ 与 ++a 的区别：
实例
结果：
#include <stdio.h>
int main()
{
int c;
int a = 10;
c = a++;
printf("先赋值后运算：\n");
printf("Line 1 - c 的值是 %d\n", c );
printf("Line 2 - a 的值是 %d\n", a );
a = 10;
c = a--;
printf("Line 3 - c 的值是 %d\n", c );
printf("Line 4 - a 的值是 %d\n", a );
printf("先运算后赋值：\n");
a = 10;
c = ++a;
printf("Line 5 - c 的值是 %d\n", c );
printf("Line 6 - a 的值是 %d\n", a );
a = 10;
c = --a;
printf("Line 7 - c 的值是 %d\n", c );
printf("Line 8 - a 的值是 %d\n", a );
}Run code
Cut to clipboard
unsigned int a=60; //0011 1100
unsigned int b=13; //0000 1101
a=a^b; //a=a^b=0011 0001
b=a^b; //b=a^b=0011 1100 相当于b1=(a^b)^b
a=a^b; //a=a^b=0000 1101 相当于a1=(a^b)^((a^b)^b)Run code
Cut to clipboard
实例
#include<stdio.h>
int main( )
{
unsigned int a=60; //0011 1100
unsigned int b=13; //0000 1101
printf("a=%d,b=%d",a,b); //输出a，b的值
printf("\n");
a=a^b; //a=a^b=0011 0001
b=a^b; //b=a^b=0011 1100
a=a^b; //a=a^b=0000 1101
printf("a=%d,b=%d",a,b); //输出a，b的值
}Run code
Cut to clipboard
结果：
a=60，b=13；
a=13，b=60；Run code
Cut to clipboard
文章：C语言学习笔记 发表时间：2018-01-22, 17:46:49
#655
作者：广西南宁市
大扎好，我系轱天乐，我系脏渣辉，贪挽懒夜，里没有挽过的船新版本，挤需体验三番钟，里一定会干我一样，爱桑介款游戏，今晚的传奇，我揍系你的松弟！
文章：@意见反馈/技术支持/伊网/安企网 发表时间：2018-01-21, 22:40:17
#657
作者：广西南宁市
h5页面，关闭手机键盘
document.activeElement.blur();Run code
Cut to clipboard
<script>
//图片取消上传
$("body").on("mousemove touchstart tap",function(){
//$("body").mousemove(function(){
<?php
if($Applessss) echo'document.activeElement.blur();';
?>
//if($("input").is(":focus")) $("input").focus();
var sdfdsunmppsss=$('#sdfdsunmpp dot').text();
//console.log(sdfdsunmppsss);
if(sdfdsunmppsss=='select') $('#sdfdsunmpp').html('<a href="javascript:;" onclick="$(\'#sdfdsunmpp\').html(\'<dot>select</dot>\');if ((navigator.userAgent.indexOf(\'MSIE\') >= 0) && (navigator.userAgent.indexOf(\'Opera\') < 0)) alert(\'请更换你的破浏览器！\');path.click();" style="cursor: pointer;color: #666;text-decoration: underline;">UpImg</a>');
});
</script>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2018-01-20, 18:42:23
#658
作者：广西南宁市
从正常的历史上来看，东北就不应该那么发达。
东北在历史上只有2个发展时期，一是闯关东，二是一五计划二五计划时期，一个是关内人到关外谋生，一个是国家一穷二白，大力投入建设一些地区的时期。
但是现在，东北并没有什么优势，强行投入发展不过是一厢情愿。
不如顺势而为，合并东三省，集中建设大城市，进行大规模机械化农业，发展农业相关产业，让人口流走，最多能保留在环渤海一带就不错了。
想恢复共和国长子的地位，属于不可能的情况。
你慢慢有了区域自主的意识了，他马上再给你开个空头支票，让你意识到国家还没忘了你，于是你的那种刚刚萌发的自主意识又消失了。
然而那是拿着鸡毛当令箭的空头支票。最后绝对不会有没有效果，反映在经济上就是还是一般，于是这一般的经济增速 和 高调宣传的空头支票 之间的强烈反差。于是又开始 投资不过山海关的宣传了，又是一顿舆论围剿
-
然后再重复上面的动作，几轮下来，你也就从假衰落变成真衰落了。
儿子：妈妈，小姨来我家玩，我爸趁她没注意就亲了她一口。
小姨气得朝着爸爸的脸上打了一掌的“掌”是怎么写的？
妈妈：啊？
东北在历史上只有2个发展时期，一是闯关东，二是一五计划二五计划时期，一个是关内人到关外谋生，一个是国家一穷二白，大力投入建设一些地区的时期。
但是现在，东北并没有什么优势，强行投入发展不过是一厢情愿。
不如顺势而为，合并东三省，集中建设大城市，进行大规模机械化农业，发展农业相关产业，让人口流走，最多能保留在环渤海一带就不错了。
想恢复共和国长子的地位，属于不可能的情况。
你慢慢有了区域自主的意识了，他马上再给你开个空头支票，让你意识到国家还没忘了你，于是你的那种刚刚萌发的自主意识又消失了。
然而那是拿着鸡毛当令箭的空头支票。最后绝对不会有没有效果，反映在经济上就是还是一般，于是这一般的经济增速 和 高调宣传的空头支票 之间的强烈反差。于是又开始 投资不过山海关的宣传了，又是一顿舆论围剿
-
然后再重复上面的动作，几轮下来，你也就从假衰落变成真衰落了。
儿子：妈妈，小姨来我家玩，我爸趁她没注意就亲了她一口。
小姨气得朝着爸爸的脸上打了一掌的“掌”是怎么写的？
妈妈：啊？
文章：一个制片人的自白 发表时间：2018-01-18, 10:19:11
#659
作者：广西
苹果手机上传GIF不动
文章：@意见反馈/技术支持/伊网/安企网 发表时间：2018-01-16, 22:21:13
#660
作者：广西南宁市
thinkphp模块名不区分大小写
Thinkphp中如何表达MYSQL中的某字段不为空is not null
thinkphp mysql 空字段
define('APP_DEBUG','false');Run code
Cut to clipboard
Thinkphp中如何表达MYSQL中的某字段不为空is not null
$where['door_open_api_key'] = array('exp',' is not null AND door_open_api_key != ""');Run code
Cut to clipboard
文章：Yourphp，thinkphp修改分页代码 发表时间：2018-01-15, 16:51:57
#661
作者：广西南宁市
手机网站二级栏目自动居中
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="clearUl" id="menuullidemoli">
<li>范德萨发达省份</li>
<li>32432</li>
<li>34</li>
</ul>
<script>
(function (d){
$(d).css('clear','both');
var nw;
var t=0;
$(d+' li').each(function(){
$(this).css('display','inline-block');
nw=$(this).width();
t=t+nw;
});
var pw=$(d).width();
//console.log(pw);
if(pw<t){
$(d+' li').each(function(){
$(this).css('float','left');
});
}else{
$(d).css('textAlign','center');
}
})("#menuullidemoli"); //ul id
</script>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2018-01-15, 15:34:24
#662
作者：广西南宁市
this.setData() 异步回调
this.setData({userInfo: userInfo}, callback)Run code
Cut to clipboard
*/
onLoad: function (options) {
var that = this;
App.editTabBar(that);
// var ajaxdata
//console.log(that.data);
var url = 'https://ssl.resonance.net.cn/test/index.php/Home/About/index';
util.ntime(utilMd5, that, url, "calll");
},
calll: function (that,res){
//console.log(res.content)
WxParse.wxParse('article', 'html', res.content, that, 5);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
function updatenew(url, token, that, calll) {
that.setData(res.data, that.calll(that,res.data))Run code
Cut to clipboard
setTimeout(回调函数,时间,参数1,...,参数n)Run code
Cut to clipboard
文章：微信小程序开发笔记 发表时间：2018-01-06, 17:19:13
#663
作者：广西
文章：一个制片人的自白 发表时间：2018-01-10, 04:07:49
#664
作者：广西南宁市
用一个div模拟成body，然后footer放这个模拟div外，然后margin-top负值把footer拉上去
A>B 表示选择A元素的所有子B元素。
与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。
另外：没有<的用法。
A+B表示HTML中紧随A的B元素。
nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p，这个可能不太好理解，自己试一试就知道了。
图片黑白css 使用CSS将图片转换成黑白(灰色、置灰) CSS3 Filter 去色
A>B 表示选择A元素的所有子B元素。
与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。
另外：没有<的用法。
A+B表示HTML中紧随A的B元素。
nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p，这个可能不太好理解，自己试一试就知道了。
<style>.parent {
text-align:center;
margin:0 auto;
width:200px;
height:200px;
background:red;
}
.children {
positiona;absolute;
margin-top:75px;
width:50px;
height:50px;
background: black;
display:inline-block;/*使其父元素text-align生效*/
}</style><div class="parent">
<div class="children"></div>
</div>Run code
Cut to clipboard
图片黑白css 使用CSS将图片转换成黑白(灰色、置灰) CSS3 Filter 去色
<style>
img{ -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;}
img:hover{-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
filter: gray(0);
}
</style>
<img src="VCG21gic16069628.jpg">Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2016-02-03, 16:31:50
<style>body { width: 100%; height: 100%; position: fixed; background-color: #34495e; } .content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 160px; overflow: hidden; font-family: 'Lato', sans-serif; font-size: 35px; line-height: 40px; color: #ecf0f1; } .content__container { font-weight: 600; overflow: hidden; height: 40px; padding: 0 40px; } .content__container:before { content: '['; left: 0; } .content__container:after { content: ']'; position: absolute; right: 0; } .content__container:after, .content__container:before { position: absolute; top: 0; color: #16a085; font-size: 42px; line-height: 40px; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } .content__container__text { display: inline; float: left; margin: 0; } .content__container__list { margin-top: 0; padding-left: 110px; text-align: left; list-style: none; -webkit-animation-name: change; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-name: change; animation-duration: 10s; animation-iteration-count: infinite; } .content__container__list__item { line-height: 40px; margin: 0; } @-webkit-keyframes opacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes change { 0%, 12.66%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 16.66%, 29.32% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } 33.32%,45.98% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 49.98%,62.64% { -webkit-transform: translate3d(0, -75%, 0); transform: translate3d(0, -75%, 0); } 66.64%,79.3% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 83.3%,95.96% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } } @keyframes opacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes change { 0%, 12.66%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 16.66%, 29.32% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } 33.32%,45.98% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 49.98%,62.64% { -webkit-transform: translate3d(0, -75%, 0); transform: translate3d(0, -75%, 0); } 66.64%,79.3% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 83.3%,95.96% { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } } </style> <div class="content"> <div class="content__container"> <p class="content__container__text"> Hello </p> <ul class="content__container__list"> <li class="content__container__list__item">world !</li> <li class="content__container__list__item">bob !</li> <li class="content__container__list__item">users !</li> <li class="content__container__list__item">everybody !</li> </ul> </div> </div>