html5
文章平均质量分 78
qq_34664510
这个作者很懒,什么都没留下…
展开
-
响应式布局
1.灵活的图像和媒体。尺寸按百分比定义,根据环境进行缩放 2.灵活的、基于网格的布局。 3.媒体查询。根据媒体特征,对设计进行调整创建可伸缩图像1.图像缩放刻意空间:其父元素建立的内容区域 2.width:100%会让图像尽可能填充容器,容器宽度比图像宽,会拉伸 3.图标字体、svg可创建无损缩放的图性 4.也可以用于video、embed、objectmax-width:100%;创建弹原创 2017-06-27 15:52:51 · 249 阅读 · 0 评论 -
Html5与Css3元素可见性、浮动、定位、对齐(九)
控制元素的显示类型块级元素 dispaly:block; 行内元素(显示设置设置宽度、高度不起作用) display:inline; 1.不接受padding设置,但padding-top和padding-bottom会越界进入相邻元素的区域,而不是局限于该元素本身的空间 2.可以通过设置行高改变行内元素框的高度 3.可以通过设置水平边框、内边距、外边距改变行内元素框的宽度混合显示:该元原创 2017-07-09 21:17:30 · 3503 阅读 · 0 评论 -
Html5与Css3Web字的属性(六)
web字号px() 百分比(较常用) em(最常用):一般1em=16px,相对单位。以父元素作参照系,父元素大小是不确定的body{ font-size:100%; /*父元素默认为16px*/}h1{ font-size:2.1875em; /*35px/16px*/}css3新增:rem,以根元素为参照系,根元素大小是确定的html{ font-size原创 2017-07-06 14:23:28 · 405 阅读 · 0 评论 -
Html5与Css3颜色和选择器(五)
css3更新的颜色RGBA:红、绿、蓝、不透明度rgba(89,0,127,0.4);HSL和HSLA:色相、饱和度、亮度、不透明度hsl(282,100%,25%);hsl(282,100%,25%,.75);使用与媒体相关的样式表link或style:添加属性media属性 有all、aural、braille、handheld、print、projection(投影设备)、screen、t原创 2017-07-01 18:38:18 · 1879 阅读 · 0 评论 -
Html5与Css3元素和属性(一)
1.元素空元素:可选的空格和斜杠<img src="x.jpg" width="300" alt="pic" /><img src="x.jpg" width="300" alt="pic">2.属性属性-值对间用空格隔开 属性值分为:预定义值(也称枚举值),任意值<link rel="stylesheet" media="screen" href="style.css" />数字值:无需写单位原创 2017-06-27 17:29:13 · 446 阅读 · 0 评论 -
照片墙
.container{ width: 960px; height: 450px; margin: 60px auto; position: relative;/*相对定位*/}img{ padding: 10px 10px 15px; background-color: white; border: 1px solid #dddddd;原创 2017-07-27 17:17:24 · 232 阅读 · 0 评论 -
Html5与Css3表单、文本框、复选框、image新增属性(八)
css5新增的元素与属性表单内元素的属性 1. form属性 之前必须书写在表单内部。而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表单//原来用法<form id="textform"> <input type="text"> <textarea form="textform"></textarea></for原创 2017-07-07 12:30:20 · 1073 阅读 · 0 评论 -
Html5与Css3图像、锚(四)
web图像JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识、重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且质量较高的照片 PNG-32:支持alpha透明的图像 GIF:动图 WebP:支持有损或无损,大小远小于JPEG和PNG,支持alpha原创 2017-07-01 12:08:02 · 395 阅读 · 0 评论 -
Html5与Css3文本、图、标记(三)
文本small:包括免责申明、注意事项、法律限制、版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字。不传达任何额外的语气。文档摘要关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语 (默认为粗体) i:具有不同语态或预期。分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称 (默认为斜体)创建图figure原创 2017-06-30 21:08:42 · 394 阅读 · 0 评论 -
Html5与Css3页面构成(二)
页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别。 2.不用h1~h6标记副标题、标语,应该用段落或其他非标题元素<h1>Hello World</h1>//标题<p class="subhead">This is a html .</p>//副标题,原创 2017-06-28 18:45:29 · 539 阅读 · 0 评论 -
精通css 第六章 (1)导航栏
下拉菜单.nav li{ list-style-type: none; line-height: 30px; text-align: center;}.nav>li{ float: left;}.nav li a{ display: inline-block; width: 100px; height: 30px; text-d原创 2017-07-26 11:52:26 · 351 阅读 · 0 评论 -
CSS3背景相关新增属性
background-clipborder-box:充满边框和内边距,内容. padding-box:充满内边距,内容 content-box:只充满内容background-originborder-box:在边框开始绘制 padding-box:在内边距开始绘制 content-box:只在内容里开始绘制border-imageborder-image=url(“01.png”) 50原创 2017-07-19 11:29:27 · 308 阅读 · 0 评论 -
CSS深入理解(1)margin
css margin可改变容器的尺寸 可视尺寸:实线包含部分(border及border以内) 占据尺寸:虚线包含部分(margin及margin以内)margin与可视尺寸1.适用于没有设定weight,height的普通block水平元素 如float元素,absolute,inline,table-cell都不适用 2.只适用于水平方向 改水平方向的值:有变化 改垂直方向的原创 2017-07-29 17:29:23 · 565 阅读 · 0 评论 -
Html5与Css3布局、盒模型(七)
布局实例:规范的命名和编排<body><div class="page"><!--page开始--> <header class="masthead" role="banner"><!--masthead开始--> <p class="logo"><a href="#"><img src="logo.png"/>Logo图片</a></p> <ul clas原创 2017-07-06 21:59:01 · 993 阅读 · 0 评论 -
HTML5的Rang对象
基本概念Range对象代表页面上的一段连续的区域。通过Range对象,可以获取或修改网页上的任何区域。 Selection与Range对象的使用<body> <script> function rangeTest() { var html; showRangeDiv=document.getElementById("showR原创 2017-07-12 21:02:47 · 265 阅读 · 0 评论 -
HTML5开发和布局(待补充)
移动开发准则1.尽量使用单页面开发(SPA) 2.慎选UI框架 3.动画、特效使用(60fps)**浏览器消耗最小的CSS属性**位置:transform:translate(x,y,z)大小:transform:scale(n)旋转:transform:rotate(ndeg)透明度:opacity:0~14.长度单位用rem基本布局流式布局 绝对定位布局 Flexbox布局原创 2017-07-12 20:36:00 · 260 阅读 · 0 评论 -
H5 canvas
canvas和svg canvas: javaScript动态生成。“位图”,适用于像素处理和动态渲染。修改需要重绘 svg:xml静态生成。“矢量图”,不需要重绘canvas基本结构html<canvas id="canvas" width="200" height="300" style="border: 1px solid blue"></canvas>jswindow.onl原创 2017-09-22 14:01:08 · 368 阅读 · 0 评论