!doctype html报错h5,HTML5+CSS3（3）

四、属性选择器

[att^=value]：该属性的值以指定值开始。

[att$=value]：该属性的值以指定的值结束。

[att*value]：该属性的值包含指定的值，而无论其位置。

实例

使用[att$=value]

div[class$="i"]{

color: #30f;

font-family: "微软雅黑";

font-size: 16px;

}

该属性的值包含指定的值

除了Internet explore 6，所有的主浏览器都支持属性选择器

运行结果

五、练习

1.使用RGBA颜色值

input,

textarea {

padding: 4px;

border: solid 1px #E5E5E5;

outline: 0;

font: normal 13px/100% Verdana, Tahoma, sans-serif;

width: 200px;

background: #FFFFFF;

box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;}

input:hover,

textarea:hover,

input:focus,

textarea:focus {

border-color: #C9C9C9;

}

label {

margin-left: 10px;

color: #999999;

display: block;

}

.submit input {

width: auto;

padding: 9px 15px;

background: #617798;

border: 0;

font-size: 14px;

color: #FFFFFF;

}

姓名

邮箱

运行结果

2.添加阴影效果

img{

-webkit-box-shadow: 2px 2px 10px #06c;height: 240px;

}

div{

padding: 5px;

margin: 5px;

height: 50px;

width: 150px;

background-color: #ccc;

-webkit-box-shadow: 2px 2px 20px #06c;

}

p{

text-shadow: 10px 10px 20px #0066CC;}

添加阴影效果

运行结果

3.设计椭圆图形

div{

height: 300px;

width: 300px;

background: url(img/bg1.jpg) no-repeat;

border: 1px solid red;

-moz-border-radius: 100px;

-webkit-border-radius:100px ;

border-radius: 100px;

}

运行结果

4.定义背景坐标

div {

height: 600px;

width: 416px;

border: solid 1px red;

padding: 120px 4em 0;

background: url(img/p3.jpg) no-repeat;

-moz-background-origin: border;

-webkit-background-origin: border;

background-origin: border;

-moz-background-size: cover;

-webkit-background-size: cover;

background-size: cover;

overflow: hidden;

}

div h1 {

font-size: 18px;

font-family: "幼圆";

text-align: center;

}

div p {

text-indent: 2em;

line-height: 2em;

font-family: "楷体";

margin-bottom: 2em;

}

春

盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。

桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。

运行结果

六、问题

鼠标移入onmouseover，移出onmouseout

注册

在js里面添加的属性名使用驼峰法，在css里面使用连接线