![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5+css3
文章平均质量分 59
erdouzhang
这个作者很懒,什么都没留下…
展开
-
HTML5 笔记1— details元素、mark元素、progress元素、meter元素
基本只有google支持1.detail元素有<summary>未点击前:点击三角形展开内容:<body> <details> <summary>HTML5+CSS3</summary> <p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后...</p> </details></body>2detail元素没有<summary>点击前:点原创 2017-03-10 11:31:04 · 1609 阅读 · 0 评论 -
改变文字选中时背景颜色
在线演示html:<body> <h1>Woman</h1> <p>Every woman is ... You are worth it! </p></body>css:<style> body { background:url(images/09.png) no-repeat 50% 0; margin: 10% 20%;原创 2017-05-10 21:26:03 · 1838 阅读 · 0 评论 -
CSS3笔记1 — 文字阴影、边框阴影、自动换行
1. 文字阴影CSS:<style> h1 { text-shadow: 15px 15px 1px #ccc; }</style>html:<body> <h1>文字阴影</h1></body>解析: text-shadow : x y r color; x: 阴影离开文字的横向距离。 y : 阴影离开文字的纵向距离. r : 阴影模糊半径。 color : 阴原创 2017-03-11 17:12:48 · 900 阅读 · 0 评论 -
CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原
在线演示鼠标经过或悬停时,图片会缓慢放大;鼠标离开,图片缓慢还原。 下图分别为:原图、鼠标经过代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{原创 2017-03-09 19:56:38 · 10846 阅读 · 0 评论 -
三角形图标绘制(对话框中三角形)
html:<article> <h1>Html</h1> <p>At W3Schools...more.</p> </article>css:body { background-color: #d4676a; margin: 50px;}article { width: 400px; padding: 20px 40px;原创 2017-05-10 09:40:10 · 1523 阅读 · 0 评论 -
渐变色绘制
1.背景颜色渐变 html:<a href="#">BUTTON</a>css:a { display: inline-block; font-size: 2em; border-radius: .3em; text-decoration: none; padding: 1em 2em; color: #fff; ba原创 2017-05-10 10:24:42 · 2109 阅读 · 0 评论 -
页面背景色渐变
渐变效果: css:html,body { height: 100%;}body { background: linear-gradient(#51b0e7,#006084);}上下两块: css:body { background: linear-gradient(#51b0e7 50%,#006084 50%);/*上下各50%*/}横线背景:原创 2017-05-10 10:47:02 · 2914 阅读 · 0 评论 -
锯齿图形绘制
html:<header>CSS3 linear gradient</header>css:body { background-color: #fff; margin: 0;}header { width: 100%; height: 220px; line-height: 220px; color: #fff; f原创 2017-05-10 11:12:17 · 1636 阅读 · 0 评论 -
SVG图像绘制多边形
在线演示原始图为图一;鼠标滑过使SVG图形上移30px,如图二; html:<div id="sec"> <div id="sec-description"> <h1>Hello</h1> <p>If you...pain. </p> </div> <svg width="200px" height="500px"> <po原创 2017-05-10 12:59:47 · 6184 阅读 · 0 评论 -
CSS3制作鼠标经过三角形旋转
在线演示html:<div id="box"></div>css:#box { margin: 100px auto; width: 0; height: 0; border: 30px solid transparent;/*三角形宽30px 边框都为透明*/ border-top-color: red;/*顶部边框为红色*/ border-bott原创 2017-04-01 09:49:58 · 1888 阅读 · 0 评论 -
CSS3画三角形
1.向下transform: translateY(-50%) rotate(45deg); translateY代表Y轴旋转,rotate代表角度。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div {原创 2017-03-09 20:30:57 · 464 阅读 · 0 评论 -
HTML5 笔记2 — ol加强属性start、reversed
1.ol加强属性–start属性来定义标号开始值通过给ol标签添加属性start来设置有序列表的开始值,如下:表示列表从3开始排列。<ol start="3"> <li><a href="#">有序列表A</a></li> <li><a href="#">有序列表B</a></li> <li><a href="#">有序列表C</a></li> <li><a href="#"原创 2017-03-10 17:39:14 · 1652 阅读 · 0 评论 -
html5笔记3 — canvas绘画矩形、圆
canvas是html5中新增加的一个元素,专门用来绘制图形。1. 创建画布<script src="canvas.js"></script>引入canvas.js文件<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas></body>意思是: 先引入canvas.js脚原创 2017-03-10 17:54:55 · 532 阅读 · 0 评论 -
html5笔记4 — canvas绘制文字
绘制文字html代码:<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas></body>js代码:function draw(id){ // 1.获取canvas的id var canvas = document.getElementById('canvas');原创 2017-03-10 23:36:14 · 768 阅读 · 0 评论 -
html5笔记5 — canvas保存文件
canvas保存文件js: function draw(id){ // 获取canvas的id var canvas = document.getElementById('canvas'); // 取得上下文 var context = canvas.getContext('2d'); // 绘制背景 context.fillStyle = "#f45da9"; cont原创 2017-03-11 11:17:21 · 925 阅读 · 0 评论 -
html5 笔记6 — 视频、音频
html:<body> <audio src="MP3.mp3" controls="controls">您的浏览器太老了,不支持我们的HTML5页面,请更新浏览器</audio> <video src="video.mp4" width="650" height="280" controls="controls" poster="01.jpg" loop="loop">请更新浏览器</vi原创 2017-03-11 12:24:22 · 231 阅读 · 0 评论 -
CSS3 笔记3 — 弹性盒布局flex
弹性盒布局使用CSS3中的一个box-flex属性就可以随着浏览器窗口的改变而自适应。大盒子不给固定宽度。 弹性盒布局是在盒布局的基础上进行自适应。 兼容性:-webkit-box-flex:1; (Safara浏览器、Chrome浏览器)-moz-box-flex:1;(Firefox浏览器)html :<body> <div class="box"> <div class="l原创 2017-03-13 10:26:47 · 523 阅读 · 0 评论 -
CSS3笔记 4 — Media Queries的使用方法
@media 设备类型 and (设备特征) { 栏式代码 }在样式的代码开头必须写@media ,然后定制设备的类型:设备特征是:min-width:400px 指设备宽度大于400px;例如:@media screen and (min-width:400px) { 样式代码;}原创 2017-03-13 11:51:10 · 267 阅读 · 0 评论 -
CSS3笔记2— transform旋转、缩放、倾斜、移动
1.旋转CSS:<style> div { width: 200px; height: 200px; background-color: pink; -ms-transform: rotate(45deg);/*IE9*/ -moz-transform: rotate(45deg);/*Firefox*/ -webkit-trans原创 2017-03-13 09:26:23 · 6223 阅读 · 0 评论 -
CSS3-鼠标经过图片旋转、缩放、还原
在线演示 html:<body> <div class="box"> <a href="#"><img src="img/02.jpg" alt=""></a> </div></body>css:<style> .box img{ width: 250px; height: 450px; } @-webkit-keyframes p原创 2017-03-13 16:35:53 · 9199 阅读 · 0 评论