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视教第一部分 ...

随机推荐

jquery学习——遍历
1.each() $(selector).each(function(index,element)) var arr = [ "a", "bb", " ...
phpcms模板标签整理
{template "content","header"} 调用根目录下phpcms\template\content\header文件 {CHARSET} 字 ...
使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
javascript特殊运算符
in运算符 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该运算符左边的值是右边对象的一个属性名,则返回true, ...
Reorder array to construct the minimum number
Construct minimum number by reordering a given non-negative integer array. Arrange them such that th ...
Shortest Palindrome
Given a string S, you are allowed to convert it to a palindrome by adding characters in front of it. ...
poj 1442
一个排序的题目. 题意:给你m个数a[m],和n个数b[n]. 首先a[0]….a[b[0]]排序.输出第一个数. 然后a[0]….a[b[1]]排序.输出第二个数. 以此类推,直到输出第n个数. 思 ...
一键自动发布ipa(更新svn，拷贝资源，压缩资源，加密图片资源，加密数据文件，加密lua脚本，编译代码，ipa签名，上传ftp)
一键自动发布ipa(更新svn,拷贝资源,压缩资源,加密图片资源,加密数据文件,加密lua脚本,编译代码,ipa签名,上传ftp) 程序员的生活要一切自动化,更要幸福^_^. 转载请注明出处http: ...
code vs 1026 逃跑的拉尔夫
1026 逃跑的拉尔夫时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解题目描述 Description 年轻的拉尔夫开玩笑地从一个小镇上偷走 ...
如何给DropDownList在后台代码中添加一个空的选项
代码如何: ddl_dept.Items.Insert(, new ListItem("---请选择---","")); new ListItem的第一个参数表 ...

css3 妙味

css3 妙味的更多相关文章

随机推荐

热门专题