-
唯美输入框html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="#">
<div>
<label for="enabled">可用输入框:</label>
<input type="text" id="enabled" />
</div>
<div>
<label for="disabled">禁用输入框:</label>
<input type="text" id="disabled" disabled="disabled" />
</div>
</form>
</body>
</html>
css
div {
margin: 30px;
}
input[type="text"]:enabled {
border: 1px solid #f36;
box-shadow: 0 0 5px #f36;
}
input[type="text"]:disabled{
box-shadow: none;
}
查看全部 -
好看的菜单
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS制作立体导航</title>
<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
background: #ebebeb;
}
.nav{
width:560px;
height: 50px;
font:bold 0/50px Arial;
text-align:center;
margin:40px auto 0;
background: #f65f57;
/*制作圆*/
/*制作导航立体风格*/
}
.nav a{
display: inline-block;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.nav a:hover{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}
.nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 13px;
text-shadow:1px 2px 4px rgba(0,0,0,.5);
list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
/*删除第一项和最后一项导航分隔线*/
.nav a,
.nav a:hover{
color:#fff;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</body>
</html>
查看全部 -
渐变背景代码
background-image:linear-gradient(to top left, red,blue,green,yellow,pink);
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
查看全部 -
nth-child()是父元素的子元素
查看全部 -
把div初始颜色（不是0%的时候）设置成别的颜色就明白both的作用了
查看全部 -
从图像现在的中心点开始，所以是-50%
查看全部 -
input的opacity(不透明度）为0，并放置在span上面，点击的时候使span的不透明度变为1显示出来（此时span依旧在input下面），
input[type="radio"] + span {opacity: 0;}使没被点击的span的opacity变为0
查看全部 -
在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
查看全部 -
<!--border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ --！》
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius: 50px 0px 0px 50px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
}
查看全部 -
章节
问答
笔记
评论
Responsive设计——不同设备的分辨率设置
下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：
1.1024px显屏
@media screen and (max-width : 1024px) { /* 样式写在这里 */ }2.800px显屏
@media screen and (max-width : 800px) { /* 样式写在这里 */ }3.640px显屏
@media screen and (max-width : 640px) { /* 样式写在这*/ }4.iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ }5.iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ }6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }查看全部 -
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>
查看全部 -
font：文字大小/行高查看全部 -
“+”使用说明
查看全部 -
我就是占位的
查看全部 -
我就是占位符
查看全部
举报