css3 妙味

css3 属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>css3属性</title>

</head>

<body>

<h1>自定义属性p[kang]</h1>

<!--<style>

    p[kang]{color:red;}   /*属性选择器*/

    p[kang=k]{border:1px solid green;}    /*指定 k */

    p[kang~="two"]{border:1px solid blue;}   /*属性含有two 可加"" 可不加*/

    /*p[kang~=two]{border:1px solid deeppink;}   */

    p[kang^=s]{font-size:40px;}       /*属性以s 开头*/

    p[kang$=e]{border:1px solid #009cec;}       /*属性以e结尾 */

    p[kang*=o]{background: #ccc;}   /*含有 o */

    p[kang|=a]{background: #009cec;}   /*只有a 或以 a-开头*/

</style>

<p kang="k">1</p>

<p kang="j two">2</p>

<p kang="santwo">3</p>

<p kang="hoe">4</p>

<p kang="a">5</p>

<p kang="ab">6</p>

<p kang="a-b">7</p>-->

<h1>属性应用</h1>

<!--

<h2>对不同href的给予不同的背景图片</h2>

<style>

    p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}

    p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}

    p a[href*=text]{ background-image:url(img/text.gif);}

    p a[href*=pdf]{ background-image:url(img/swf.gif);}

    p a[href*=exl]{ background-image:url(img/x.gif);}

</style>

<p>

    <a href="/doc/javascript.html">妙味课堂</a>

</p>

<p>

    <a href="/text/javascript.html">妙味课堂</a>

</p>

<p>

    <a href="/pdf/javascript.html">妙味课堂</a>

</p>

<p>

    <a href="/exl/javascript.html">妙味课堂</a>

</p>

-->

<h1>结构选择器</h1>

<style>

    p{height:30px;border:1px solid #000;}

    p:nth-child(2){color:red;}   /*找 p的父元素div下的第二个元素，如果是p元素，则为红色*/

    body *:nth-child(2){color:deeppink;}   /*找第二个元素*/

    p:nth-of-type(2){border:1px solid green;}  /*找 p的父元素div下的第二个p*/

    /*p:nth-child(odd){background:red;}   /!* odd 奇数行 *!/*/

    /*nth-last-child

    :first-child == :nth-child(1)

    :last-child == :nth-last-child(1)

    :first-of-type == nth-of-type(1)

    :last-of-type == nth-last-of-type(1)

    */

    p:empty{background: blue;}

    p:only-of-type{background:yellow;}

    p:only-child{background: orange;}   /*只有一个子节点，且子节点不包含文本节点*/

    /* p: only-of-type*/

    span{display: block; width:10px;height: 10px;}

</style>

<div>

    <p>p1</p>

    <h1>h1</h1>

    <p>p2</p>

    <p>p3</p>

    <p></p>      <!--p:empty-->

    <p><span></span></p>

</div>

</body>

</html>

css3 2.0

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

        p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}

        p:first-line{ background:red;}   /*文本第一行*/

        p:first-letter{ font-size:30px;}  /*第一个字母*/

        p::selection{background:#F60;color:#690;}   /*选择文字的效果*/

        div~span{color:green;}   /*div 后面的 span 123*/

        h1:not(.test){background: red;}    /*过滤class */

        /*文字从右到左排列 ie6支持*/

        h2{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}

        /*文字超出隐藏 ie6支持*/

        h3{width:100px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    </style>

</head>

<body>

<p>p文本伪类：前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，

    在 HTML5&CSS3 被炒至沸沸扬扬的今天，

</p>

<div><span>456</span></div>

<span>123</span>

<h1>h1</h1>

<h1 class="test">h2</h1>

<h1>h3</h1>

<h2>文字从右到左排列</h2>

<h3>文字超出隐藏123565636834634466346346</h3>

</body>

</html>

css3 弹性盒模型

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css弹性盒模型</title>

</head>

<body>

<style>

    .box {

        height: 170px;

        border: 10px solid #000;

        padding: 10px;

        display: -webkit-box; /* 盒模型 */

        /*-webkit-box-orient:vertical;  !*排列顺序  默认横排*!*/

        /*-webkit-box-direction:Reverse;  !*  反序 *!*/

        -webkit-box-pack: justify;   /*  富裕空间    end 是右对齐  center 是居中  justify 分散对齐 */

        -webkit-box-align: end;  /*  靠底 */

    }

    .box div {

        width: 100px;

        height: 100px;

        background: red;

        border: 1px solid #fff;

    }

    /* 具体调整各个div位置 */

    /*

    .box div:nth-of-type(1) {-webkit-box-ordinal-group: 2;}

    .box div:nth-of-type(2) {-webkit-box-ordinal-group: 4;}

    .box div:nth-of-type(3) {-webkit-box-ordinal-group: 1;}

    .box div:nth-of-type(4) {-webkit-box-ordinal-group: 5;}

    .box div:nth-of-type(5) {-webkit-box-ordinal-group: 3;}

    */

    /* 指定宽度 box-flex */

 /*

    .box div:nth-of-type(1){width:300px;}

    .box div:nth-of-type(2){-webkit-box-flex:2;}  /*  占  2/ 2+3+4+5 =  2/14 */

 /*   .box div:nth-of-type(3){-webkit-box-flex:3;}

    .box div:nth-of-type(4){-webkit-box-flex:4;}

    .box div:nth-of-type(5){-webkit-box-flex:5;}

    */

</style>

<div class="box">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

</html>

css3 div上下左右都居中 height:100% -webkit-box-align:center;

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

html{height:100%;}

body{height:100%;margin:0;}

.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}

.box div{width:100px;height:100px;background:red;border:1px solid #fff;}

</style>

</head>

<body>

<div class="box">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

</html>

弹性盒模型：父元素 display:-webkit-box;

box-orient: horizontal / vertical 水平垂直显示

box-direction: normal / reverse 元素正序反序

box-oridinal-group 设置元素具体位置，见上面例子

box-flex 弹性空间可指定各元素不同宽度，以及自适应比例

•子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

box-pack 富裕空间处理（元素水平对齐方式，分散对齐等）

start左对齐 end右对齐 center justify

box-align 元素垂直对齐方式

star顶对齐 end center

阴影 box-shadow :[inset] x y blur [spread] color

内投影阴影偏移模糊半径扩展模糊半径

图片倒影 img{ display:block;-webkit-box-reflect:below;}

above|below|left|right;

可拖动 resize 边框大小

both:水平垂直都可缩放 horizontal 水平缩放 vertical 垂直缩放

.box{width:100px;height:100px;background:url(miaov.jpg);border:5px solid #000; resize:both; overflow:auto;}

怪异盒模型，忽略div 的padding 和 border宽度属性 box-sizing:border-box

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}

.div{height:50px;background:red;}

</style>

</head>

<body>

<div class="box">

    <div class="div"></div>

</div>

Content-box  标准盒模型 width/height=border+padding+content

box-sizing:border-box 怪异盒模型 width/height=content div宽度直接等于指定宽高，忽略padding 和border值

</body>

</html>

分栏：

-webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;

lcolumn-width 栏目宽度

lcolumn-count 栏目列数

lcolumn-gap 栏目距离

lcolumn-rule 栏目间隔线

进度条

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.wrap{width:200px;height:30px;overflow:hidden;border:1px solid #000;}

.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px); transition:3s;}

.wrap:hover .box{ margin-left:-100px;}

</style>

</head>

<body>

<div class="wrap">

    <div class="box"></div>

</div>

</body>

</html>

百度光斑有3个地方应用了位置调整，第一个，rgba有150px的透明，第二个整体背景偏移，第三个hover再偏移

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{width:300px;height:300px;

background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png) no-repeat; transition:1s;}

.box:hover{background-position:300px 0,-100px -100px;}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

css3 妙味的更多相关文章

妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些一.总结一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
(非妙味3)：浏览器window事件：及浏览各种尺寸介绍
(触发)window.onload; window.onscroll; window.onresize; (兼容)网页可视区尺寸.网页全文尺寸.滚动距离 (实例)广告块高度动态居中.回到顶部 ...
妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
妙味，结构化模块化整站开发my100du
********************************************************************* 重要:重新审视的相关知识 /* 妙味官网:www.miaov ...
妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...

随机推荐

spring和hibernate整合时无法自动建表
在使用spring整合hibernate时候代码如下: <property name="dataSource" ref="dataSource" /> ...
网页的title左边的小图片怎么添加
首先,代码中的title标签里是不能加图片的.但是浏览器标提栏前面是可以加一个小图标的. 解决方案:第一步,做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透 ...
xargs命令
xargs命令常用工具命令 xargs命令是给其他命令传递参数的一个过滤器,也是组合多个命令的一个工具.它擅长将标准输入数据转换成命令行参数,xargs能够处理管道或者stdin并将其转换成特定命令 ...
Linux CAT与ECHO命令详解 <<EOF EOF
Linux CAT与ECHO命令详解 cat命令是Linux下的一个文本输出命令,通常是用于观看某个文件的内容的: cat主要有三大功能: .一次显示整个文件. $ cat filename .从键盘 ...
java实现远程储存读取文件
import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileN ...
poj 1060
http://poj.org/problem?id=1060 题意:多项式的运算的题目,不过这个运算有个特点,就是只要是同项的多项式,无论相加还是相减,都为0,给你三个多项式,分别为a,b,c. 要你 ...
mysql grant ,User,revoke
mysql的权限一直都都是很关心的重点,我知道的也只是很少的一部分,对于每个数据库我习惯创建一个一个用户,该用户只对自己从属的数据库产生进行操作,在一部分的程度上可以保护自己的数据库, 比如我有一个数 ...
在VS中MFC、ATL与WIN32有什么联系或区别？
有时候遇到一些初学者问我这个问题:在VS中使用MFC和ATL与使用WIN32有什么联系或区别?通俗来说,win32是通过调用windows api去实现需要的功能.而MFC和ATL是封装好的类库,包含 ...
Unity3d《Shader篇》自定义光照模型
一.理论公式1:被光照的物体最终所呈现的颜色公式最终颜色=材质颜色*发光颜色公式2:材质颜色 tex2D(_MainTex,uv) 公式3:光照颜色光照颜色=自发光+环境光+漫反射+镜面反射 ...
pgpool介绍和安装经验
Pgpool的介绍一.介绍是一个工作在PostgreSQL多服务器和PostgreSQL数据库客户端之间的中间件. 二.概念图三.功能连接池:pgpool -Ⅱ保存连接到PostgreSQ ...

css3 妙味

css3 妙味的更多相关文章

随机推荐

热门专题