CSS3和HTML5新增特性及使用(保留方便查看)

CSS3

1.边框图片 border-image: url(test.png) 10/10px;  outline:10px solid #ff0;outline-offset:15px;边框的边框,两边框之间距离

2.三角形   span{display:inline-block;border:50px solid transparent;border-top-color:red;border-left-color:red;}

3.背景大小  background-size:50%/100px 200px/cover/contain;//原图50%/宽为100px 200px/覆盖/容纳

4.阴影    box-shadow:red 0px 0px 10px 0px inset/outside;阴影颜色 X偏移 Y偏移 阴影模糊半径 扩展半径

内部/外部显示  阴影累加box-shadow:red 0px 0px 10px 0px inset,green 0px 0px 10px 0px outside;

文本阴影: text-shadow:red 0px 0px 10px; 阴影颜色,X偏移,Y偏移,模糊半径

5.圆角   边框圆角border-radius:5px/10%;   border-radius:50%:圆

border-radius:150px 150px 0px 0px;/ border-radius:20px 100px 0px;/border-radius:20px 100px;

border-top-left-radius:150px;/border-top-left-radius:130px 40px;

6.HSLA   background:hsla(0,100%,100%,0.5); 色调,饱和度,亮度,透明度//(0,0%,100%)白;(0,0%,0%)黑

7.RGB    backgrund:rgb(255,0,0) 三个值的范围为0~255

(255,0,0)红;(0,255,0)绿,(0,0,255)蓝; (255,255,0)黄;(0,0,0)黑,(255,255,255)白

8.渐变   ①线性渐变:background: linear-gradient(#fff, #333);  //由#fff渐变为#333

background: linear-gradient(#000, #f00 50%, #090); //由#00渐变为#f00,并占50%,最后为#090,

background:linear-gradient(0deg,yellow 50px,blue 51px,blue 100px,#F89 101px,#F89 200px);

从下到上黄色高度0-50px,蓝色高度50-100px,#f89高度101-200px

background:linear-gradient(0deg,yellow 50px,blue 100px,#F89 200px);从下到上渐变

重复线性渐变:background:repeating-linear-gradient(45deg,#FFF,#FFF 45px,#ccc 46px);

②径向渐变:background:radial-gradient(100px 100px,yellow,blue); 从内到外由yellow变为blue,

background:radial-gradient(100px 500px at 50px 10px,yellow,blue);

内部宽100px;高50px的黄色圆在距上面50px左边10px渐变为蓝色

重复径向渐变:background:repeating-radial-gradient(yellow,yellow 20px,blue 21px,blue 40px);

9.White-space处理文字空白:pre保留html中的格式nowrap强制不折行,直到遇到br标签+overflow:

hidde超出部分隐藏+text-overflow:ellipsis;以省略号的形式显示, (overflow:auto;带滚动条的隐藏)

div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}   div:hover{white-space: normal;}文字显示一行,划过全部显示

10.链接字体 @font-face { font-family : name ; src : url( url ) ; }

url('../font/lie_to_me_-_ttf-webfont.otf') format('otf'),  url('../font/lie_to_me_-_ttf-webfont.ttf') format('ttf'),

url('../font/lie_to_me_-_ttf-webfont.woff2') format('woff2'), url('../font/lie_to_me_-_ttf-webfont.woff') format('woff');

11.文本域的*缩放resize:both;overflow:auto/horizontal/vertical; 整体/高/宽缩放

12.创建伸缩容器  display:flex;伸缩流方向;默认水平/row;竖直;column; 伸缩性:flex:2;容器按比例分配额外空间。

13.缩放    transform-origin:10% 20px;transform:scale(1.5,0.5);以X轴10%,Y轴的20px为中心点

缩放为原来的宽1.5倍,高0.5倍;//只有一个数值时宽高缩放一致。

14.旋转    div{transition:2s;}   div:hover{transform:rotateY(180deg);}  滑过div时2秒旋转180度

15.变形    transform:skew(-30deg,10deg) 内容逆时针倾斜30%;整体顺时针旋转10度;

16.位移    transform:translate(20px,40px);向水平方向位移20px;向竖直方向位移40px;

例:p:hover{ transform:translate(1000px) rotate(360deg);}

模块移动(文字、图片):  两次移动

font:normal 40px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409; -moz-animation: 3s slidein; -webkit-animation: 3s slidein; -webkit-perspective: 100; -moz-perspective: 300px; }

@-moz-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;} }

@-webkit-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;}    }

17.过渡    p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }

p{transition:transform 2s ease-in 0.5s,background 1s ease-out,color 5s ease-in-out,height 1s lincar;}

p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }

2s内加速位移1000px且延迟0.5s开始;1s内背景减速变蓝,

5s内字体颜色先加速再减速变白,1s内高度恒速变为500px

18.动画   p:hover{animation-play-state:paused;}

p{animation:a1 5s ease-in;animation-iteration-count:3;animation-direction:alternate;animation-fill-mode:forwards;}

@keyframes a1{ 0%{ transform:translate(0p,0px);} 30%{transform:translate(500px,0px);}

50%{transform:translate(1000px,300px);} 70%{transform:translate(300px,500px);}

100%{transform:translate(1300px,800px)} }

19.鼠标指针变化:变成抓手cursor:pointer;   cursor:move;

HTML5

1.插入音频:  支持格式:Oggvorbis、MP3和WAV

<audio  src=”a.mp3” >    属性:controls包含基本的播放控件(开始、结束、音量、位置)

preload=”auto/metadate/none”  音频文件的下载方式:整个文件/音频时长和开头/不预先下载

Loop/autoplay  无限次播放/自动播放  例:<audio src=”a.mp3” controls preload=”metadate” autoplay >

<source src="soundfile.ogg" type="audio/ogg">调整兼容

2.插入视频: 支持格式:OGG、MP4、WEBM

<video  src=”b.mp4” poster=”1.jpg”>当视频文件失效时,用poster图片代替原图片显示,其它属性与audio相同

<video controls>      <source src="butterfly.mp4" type="video/mp4" >

<source src="butterfly.ogv" type="video/ogg">

<p>两种格式都不支持的浏览器看到的是这行文字</p>

<object type="application/x-shockwave-flash" data="flowplayer-3.2.16.swf" width="500" height="375">

<param name="movie" value="flowplayer-3.2.16.swf">    <param name="flashvars" value='config={"clip":"butterfly.mp4"}' />

<p>如果html5标签和flash格式都不识别,请点击下载

<a href="butterfly.mp4">butterfly.mp4</a>或者<a href="butterfly.ogv">butterfly.ogv</a>  </p>

</object>

</video>

<hr>

<!--flash为主html5为辅,不识别点击下载a-->

<object type="application/x-shockwave-flash" data="flowplayer-3.2.16.swf" width="500" height="375">

<param name="movie" value="flowplayer-3.2.16.swf">

<param name="flashvars" value='config={"clip":"butterfly.mp4"}' />

<video controls>

<source src="butterfly.mp4" type="video/mp4">

<source src="butterfly.ogv" type="video/ogg">

<p>如果html5标签和flash格式都不识别,请点击下载

<a href="butterfly.mp4">butterfly.mp4</a>或者<a href="butterfly.ogv">butterfly.ogv</a>  </p>

</video>

</object>

3.<object>元素定义了在 HTML 文档中嵌入的对象,例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

<object width="400" height="50" data="bookmark.swf"></object>

<object width="100%" height="500px" data="snippet.html"></object>

4.新增html5布局标签

·<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容

·<aside> 页面或站点主题之外的内容,可用在文章的侧栏

·<blockquote> 标签定义摘自另一个源的块引用。

·<center> 标签对其包围的文本进行水平居中处理。

·<figure> 独立于文本流之外的一段内容,如图片和图标等

·<figcaption>  figure中的标题

·<header>文档的页眉

·<footer>文档的页脚

·<nav>导航

·<section>文章的章节

·<detials>包含下拉隐藏效果的内容

·<summary>嵌套在detials中的概要或标题

·<mark>被突出标记的内容

·<meter>计量器    ·<adress>地址标记

·<program>进度指示

4.新增表单标签

<input  type=”search”>   搜索框

<input  type=”search”>   搜索框

<input  type=”email”>    邮箱输入

<input  type=”range”>   显示进度条

<input  type=”tel”>      电话号码输入

<input  type=”number”>  数字输入

<input  type=”URL”>   网址输入

<input  type=”date”>    日期类型(带时间控件)

<input  type=”datetime”>  日期类型(不带时间控件)

<input  type=”week”>    选择星期(带时间控件)

<input  type=”month”>   选择年月(带时间控件)

<input  type=”datetime-local”>年、月、日、时、分(带时间控件)

4.网页title滚动

<script type="text/javascript">

function scroll() {

var titleInfo = document.title;

var firstInfo = titleInfo.charAt(0);

var lastInfo = titleInfo.substring(1, titleInfo.length);

document.title = lastInfo + firstInfo;

}

setInterval("scroll()", 500);

</script>

5.获取地理位置

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟学堂</title>

</head>

<body>

<p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>

<button onclick="getLocation()">点我</button>

<div id="mapholder"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else

{

x.innerHTML="该浏览器不支持获取地理位置。";

}

}

function showPosition(position)

{

lat=position.coords.latitude;

lon=position.coords.longitude;

latlon=new google.maps.LatLng(lat, lon)

mapholder=document.getElementById('mapholder')

mapholder.style.height='250px';

mapholder.style.width='500px';

var myOptions={

center:latlon,zoom:14,

mapTypeId:google.maps.MapTypeId.ROADMAP,

mapTypeControl:false,

navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

};

var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);

var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="用户拒绝对获取地理位置的请求。"

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="位置信息是不可用的。"

break;

case error.TIMEOUT:

x.innerHTML="请求用户地理位置超时。"

break;

case error.UNKNOWN_ERROR:

x.innerHTML="未知错误。"

break;

}

}

</script>

</body>

</html>

附一:.响应式布局

Pc: 1902px   1600px   1366px   1280px

平板  1024px   992px    768px     ipad竖屏768X1024

手机  767px    480px    414px     414X395  375X365

外部样式:

<link rel="stylesheet" href="css/1.css" media="screen">    //user-scalable=no"页面不进行缩放

<link rel="stylesheet" href="css/2.css" media="screen and (max-width:480px)">

//手机页面自适应

<meta name="viewport" content="width:device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">

<!-- 以下方式只是刷新不跳转到其他页面 -->

<meta http-equiv="refresh" content="10">

<!-- 以下方式定时转到其他页面 -->

<meta http-equiv="refresh" content="5;url=hello.html">

javascript的实现

<script language="javascript" type="text/javascript">

// 以下方式直接跳转window.location.href='hello.html';

// 以下方式定时跳转setTimeout("javascript:location.href='hello.html'", 5000);

</script>

导入样式

<style>   @import url('css/base.css') screen;   @import url('css/1024.css') screen and (max-width:1024px);

@import url('css/767.css') screen and (max-width:767px);

</style>

附二:.圣杯布局

<header>header头部</header>

<nav>nav导航</nav>

<div>

<aside>aside侧栏</aside>

<article>article文章</article>

</div>

<footer>footer</footer>

附三:大型门户站基础css样式命名和应用原则

1.CSS命名规范。

全局样式 base.css 公共块的样式;    首页样式 index.css

内容页面的样式 content.css        频道页面样式 channel.css    详细页面样式 detail.css

2.页面框架结构保留字。

页面容器:#wrapper

页面头部:#header #head

页面中心内容:#maincontent

页面底部:#footer #foot

横向方位容器1:main,side

横向方位容器2:leftframe,midframe,rightframe

横向分段容器:section,field,column

盒子内容属性:contentbg

盒子上方属性:topbg

盒子下方属性:bottombg

盒子左边属性:leftbg

盒子右边属性:rightbg

3.导航保留字。

导航:nav

主导航:mainnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

快速菜单:quickmenu

子菜单:submenu

下拉菜单:dropmenu

4.功能保留字。

列表:list

标题:title

摘要:intro

内容:text

按扭:btn

搜索:search

登陆:login

注册:regsiter

提示信息:msg

小技巧:tips

图标: icon

滚动:scroll

附四

(1).一段时间后页面自动跳转:

在head中<meta http-equiv=”refresh” content=”5;url=网页地址(可设置刷新效果)”

(2).网页关键词与介绍:

<meta name="keyword" content="厨房 厨具 卫具 厨房家电 ">

<meta name="description" content="厨房家电系列">
---------------------
作者:周瑜大人
来源:CSDN
原文:https://blog.csdn.net/qq_38266792/article/details/80525061
版权声明:本文为博主原创文章,转载请附上博文链接!

上一篇:JDBC操作数据库


下一篇:教程:让你的表单升级到CSS3和HTML5客户端验证