HTML5+CSS3（3）
一、CSS3新增属性用法整理
四、属性选择器
[att^=value]：该属性的值以指定值开始。
[att$=value]：该属性的值以指定的值结束。
[att*value]：该属性的值包含指定的值，而无论其位置。
实例
使用[att$=value]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div[class$="i"]{
color: #30f;
font-family: "微软雅黑";
font-size: 16px;
}
</style>
</head>
<body>
<div class="title">该属性的值包含指定的值</div>
<div class="ti">除了Internet explore 6，所有的主浏览器都支持属性选择器</div>
</body>
</html>
运行结果
五、练习
1.使用RGBA颜色值
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;
}
</style>
</head> <body>
<form>
<p class="name">
<label for="name">姓名</label>
<input type="text" name="name" id="name" />
</p>
<p class="email">
<label for="email">邮箱</label>
<input type="text" name="email" id="email" />
</p>
<p class="submit">
<input type="submit" value="提交" />
</p>
</form>
</body> </html>
运行结果
2.添加阴影效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<img src="img/pic2.jpg" />
<div></div>
<p>添加阴影效果</p>
</body>
</html>
运行结果
3.设计椭圆图形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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; }
</style>
</head>
<body>
<div></div>
</body>
</html>
运行结果
4.定义背景坐标
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;
}
</style>
</head> <body>
<div>
<h1>春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 </p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。</p>
</div>
</body> </html>
运行结果
六、问题
HTML5+CSS3（3）的更多相关文章
- 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 菜鸟学习HTML5+CSS3（一）
主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD) HTML 5的DTD声明为:<!d ...
- HTML5+CSS3（2）
一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...
- HTML5漫谈（7）——如何保护HTML5应用代码
独家供稿:移动Labs HTML5应用采用的仍然是Javascript(JS).HTML.CSS 等Web语言,因而其代码保护就是这些Web代码的保护,而HTML5应用主要功能一般采用JS实现,因此J ...
- HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
- 使用HTML5画布（canvas）生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- HTML5测试（二）
HTML5测试(四) 1.input 元素中,下列哪个类型属性定义了输入电话号码的控件? A.mob B.tel C.mobile D.telephone 答案:B 具有 type 属性的 input ...
随机推荐
- ubuntu16.04中如何启用floodlight的其中一种方式
1. 提前一台安装好mininet,另一台安装好floodlight 2. 在mininet里面的custom文件夹下自定义文件ProjectGroup10_Topology.py from mini ...
- cordova原生页面切换效果插件的使用：com.telerik.plugins.nativepagetransitions
1. 添加插件:cordova plugin add com.telerik.plugins.nativepagetransitions2. 使用方法: 在index.html中添加: <met ...
- Redis管道功能
Redis管道,Redis存储用户浏览数据 当频繁的存储获取Redis数据库中的数据时,可以使用Redis的pipeline(管道)功能,将多个相互没有依赖关系的读写操作,如:下一步执行的Redis操 ...
- python中logging模块的用法
很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,loggin ...
- cdcq的独立博客
cdcq的独立博客终于又复活啦,以后就用这个了 地址: http://cdcq.coding.me 现在用的是luogu的博客:https://cdcq.blog.luogu.org/
- JNI加载hal的dlopen()相关操作
1.函数集合 #include <dlfcn.h> void *dlopen(const char *filename, int flag); char *dlerror(void); v ...
- 使用 opendistro for elasticsearch 做为graylog的后端存储
graylog 是一个很不错的日志分析.收集.报警平台,包好了丰富的插件,同时内部的架构设计很不错 input 组件很多,使用stream.pipeline可以方便的进行数据处理,可以同时3.0 对于 ...
- 20175202 《Java程序设计》第五周学习总结
20175209 2018-2019-2 <Java程序设计>第五周学习总结 教材知识点总结 1.接口声明: 使用关键字interface来定义接口. 定义接口时使用关键字interfac ...
- 电路 - 基尔霍夫定律（KLL）;节点流入电流等于流出电流。
下面是我在学习STM32 中ADC测量电压,时候接触掉ADC的测量范围在0~3.3V 之间,不满足于实际使用,用于电路知识设计电压放大电路.(图片来自野火) 上面个的电路,可以等效出一个电路公式:(V ...
- 深入理解 ORM框架
1.ORM是什么? object Relational mapping 对象关系映射,是一种为了解决面向对象与关系型数据库存在不匹配现象的技术,简单说,orm通过描述对象和数据库之间映射的元数据,将程 ...