Hal颜色与HSLA颜色的使用示例
<style>
body{background-image:url(../html5/images/bg.png) no-repeat;
}
div{
width:100%;
height:100px;
color:white;
}
div#div1{
background-color:hsl(120,100%,50%);
color:hsl(0,100%,100%);
}
div#div2{
/* HSLA颜色是值利用色调（H）、饱和度（s)、亮度（l)、alpha通道值（a)来定义颜色 */
background-color:hsla(120,100%,50%,0.5);
color:hsla(0,100%,100%,0.5);
}
</style>
</head>
<body>
<div id="div1">示例文字1</div>
<div id="div2">示例文字2</div>
</body>
<style>
body{
margin:20px 0;
}
#container{
width:960px;
margin:auto;
}
#wrapper{
width:740px;
float:left;
}
p{
line-height:600px;
text-align:center;
font-weight:bold;
font-size:2em;
margin:0 0 20px 0;
}
#main{
width:520px;
float:right;
background:yellow;
}
#sub01{
width:200px;
float:left;
background:orange;
}
#sub02{
width:200px;
float:right;
background:green;
}
/* 窗口宽度在1000px以上 */
@emdia screen and (min-width:1000px;){
/* 3栏显示 */
#container{
width:1000px;
}
#wrapper{
width:1000px;
float:left;
}
#main{
width:560px;
float:left;
}
#sub01{
width:200px;
float:left;
}
#sub02{
width:200px;
float:right;
}
}
/* 窗口宽度在640px以上，999px以下*/
@media screen and (min-width:640px) and (max-width:999px){
/* 2栏显示 */
#contaniner{
width:640px;
}
#wrapper{
width:640px;
float:none;
}
p{
line-height:400px;
}
#main{
width:200px;
float:right;
}
#sub01{
width:200px;
float:left;
}
#sub02{
width:100$;
float:none;
clear:both;
line-height:150px;
}
}
/*窗口宽度在639px以下*/
@emdia screen and (max-width:639px){
#container{
width:100%;
}
#wrapper{
width:100%;
float:none;
}
body{
margin:20px;
}
p{
line-height:300px;
}
#main{
width:100%;
float:none;
}
#sub01{
width:100%;
float:none;
line-height:100px;
}
#sub02{
width:100%;
float:none;
line-height:100px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="wrapeer">
<p id="main">MAIN</p>
<p id="sub01">sub 01</p>
</div>
<p id="sub02">sub 02</p>
</div>
aloha通道与opacity属性结果使用示例.
<style>
body{
background-image:url(../html5/images/bg.png);
}
div{
width:100%;
height:100px;
color:white;
font-size:48px;
}
div#div1{
background-color:rgb(0,255,100);
color:rgb(255,255,255);
}
div#div2{
background-color:rgba(0,255,100,0.5);
color:rgb(255,255,255);
}
div#div3{
background-color:rgba(0,255,100,0.5);
color:rgba(255,255,255,0.5);
}
div#div4{
background-color:rgb(0,255,100);
color:rgb(255,255,255);
opacity:0.5;
}
</style>
</head>
<body>
<div id="div1">示例文字1</div>
<div id="div2">示例文字2</div>
<div id="div3">示例文字3</div>
<div id="div4">示例文字4</div>
</body>
transparent值的使用示例
<style>
该示例中有三个div元素，第一个div元素的背景色设定为transparent值，第二个div元素的边框
的文字颜色被设定为transparent值，第三个div元素的文字颜色被设定为transparent值。三个
div元素的背景色均为白色，边框均为黄色，文字均未黑色。
div{
background-color:white;
border:solid 3px yellow;
width:100%;
height:100px;
}
body{
background-image:url(../html5/images/bg.png);
}
div#div1{
background-color:transparent;
}
div#div2{
border-color:transparent;
}
div#div3{
color:transparent;
}
</style>
</head>
<body>
<div id="div1">示例文字1</div>
<div id="div2">示例文字2</div>
<div id="div3">示例文字3</div>
</body>
out-offset属性
<style>
/* div{
/*outline-offset属性的使用方法，只要给属性制定一个带像素单位的整数即可，该整数
outline:red solid thin;
border:blue solid thin;
outline-offset:-10px;
}*/
div{
/*给outline-offset属性指定负数属性值（内部的红色轮廓线）*/
padding:5px;
border:blue solid thin;
outline:red solid thin;
outline-offset:-5px;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
resize属性
<style>
#div1{
background-color:pink;
overflow:auto;
resize:both;
width:150px;
height:150px;
}
#div2{
background-color:orange;
width:100%;
height:150px;
}
</style>
</head>
<body>
。none:用户不能修改元素尺寸。
。both:用户可以修改元素的宽度和高度。
。horizontal:用户可以修改元素的宽度，但不能修改元素的高度。
。vertical:用户可以修改元素的高度，但不能修改元素的宽度。
。inherit:继承父元素的resize属性值。
<div id="div1">示例文字 </div>
<div id="div2">页面中其他内容</div>
</body>
<style>
p{
color:blue;
font-family:宋体;
}
p#text03{
color:-moz-initial;
color:initial;
font-family:"宋体";
}
</style>
</head>
<body>
<p id="text01">示例文字1</p>
<p id="text02">示例文字2</p>
<p id="text03">示例文字3</p>
</body>
2146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
