css3
关注
分享
扫一扫
文章平均质量分 81
qq_34664510
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
响应式布局
1.灵活的图像和媒体。尺寸按百分比定义，根据环境进行缩放 2.灵活的、基于网格的布局。 3.媒体查询。根据媒体特征，对设计进行调整创建可伸缩图像1.图像缩放刻意空间：其父元素建立的内容区域 2.width:100%会让图像尽可能填充容器，容器宽度比图像宽，会拉伸 3.图标字体、svg可创建无损缩放的图性 4.也可以用于video、embed、objectmax-width:100%;创建弹原创 2017-06-27 15:52:51 · 282 阅读 · 0 评论 -
Html5与Css3图像、锚（四）
web图像JPEG：适用于大多数照片，颜色较多，可接受质量损失的图像 PNG-8：适用标识、重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24：不支持颜色更多的图像，适用与颜色丰富且质量较高的照片 PNG-32：支持alpha透明的图像 GIF:动图 WebP：支持有损或无损，大小远小于JPEG和PNG，支持alpha原创 2017-07-01 12:08:02 · 431 阅读 · 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 · 1120 阅读 · 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 · 258 阅读 · 0 评论 -
CSS揭秘 第一章 引言
浏览器前缀 Firefox的-moz- IE的-ms- Opera的-o- Safari和Chrome的-webkit- CSS编码技巧.button{ width: 150px; height: 60px; margin: 50px auto; border: 1px solid #446d88; text-align: center; line-h原创 2017-08-20 10:31:23 · 307 阅读 · 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 · 477 阅读 · 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 · 1950 阅读 · 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 · 474 阅读 · 0 评论 -
Html5与Css3元素可见性、浮动、定位、对齐（九）
控制元素的显示类型块级元素 dispaly：block； 行内元素（显示设置设置宽度、高度不起作用） display:inline； 1.不接受padding设置，但padding-top和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素本身的空间 2.可以通过设置行高改变行内元素框的高度 3.可以通过设置水平边框、内边距、外边距改变行内元素框的宽度混合显示:该元原创 2017-07-09 21:17:30 · 3547 阅读 · 0 评论 -
Html5与Css3文本、图、标记（三）
文本small：包括免责申明、注意事项、法律限制、版权信息，只适用于短于，常包含在页面级的footer里 H5对i和b的重新定义 b：提醒文字。不传达任何额外的语气。文档摘要关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语 （默认为粗体） i：具有不同语态或预期。分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称 （默认为斜体）创建图figure原创 2017-06-30 21:08:42 · 442 阅读 · 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 · 583 阅读 · 0 评论 -
HTML5开发和布局（待补充）
移动开发准则1.尽量使用单页面开发（SPA） 2.慎选UI框架 3.动画、特效使用（60fps）**浏览器消耗最小的CSS属性** 位置：transform:translate(x,y,z) 大小：transform:scale(n) 旋转：transform:rotate(ndeg) 透明度：opacity:0~1 4.长度单位用rem基本布局流式布局 绝对定位布局 Flexbox布局原创 2017-07-12 20:36:00 · 294 阅读 · 0 评论 -
CSS3变换、过渡、动画效果
为元素创建圆角1.四个相同的圆角-webkit-border-radius:10px; border-radius:10px;2.一个圆角-webkit-border-top-left-radius:10px; border-top-left-radius:10px;3.椭圆型圆角-webkit-border-radius:10px/50px； /*前者是圆角在水平方向的半径，后者是圆角在垂直方向原创 2017-07-14 20:10:15 · 1199 阅读 · 0 评论 -
CSS深入理解（2）z-index
1.支持负值 2.支持CSS3 animation动画z-index与CSS定位属性position：relative/absolute/fixed/sticky定位元素未发生嵌套 1.后来居上 2.数值大的就在上 定位元素发生嵌套 1.祖先优先原则（非auto）CSS3中的层叠上下文和层叠水平层叠上下文： Html的三维概念，人的视线垂直于屏幕的线为z轴。元素在z轴上的显示顺序。 层原创 2017-07-31 16:36:35 · 297 阅读 · 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 · 1043 阅读 · 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 · 619 阅读 · 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 · 339 阅读 · 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 · 388 阅读 · 0 评论 -
精通css 第六章 (2)图片热点定位
flickr风格图像映射效果<style> .imgmap{ width:333px ;/*等于大图片尺寸*/ height: 500px; position: relative; } .imgmap ul{ margin:0; padding: 0; list-style: no原创 2017-08-10 08:26:58 · 1146 阅读 · 0 评论 -
CSS揭秘 第二章 背景与边框
半透明边框body{ background: url("02.jpg") no-repeat; } .box{ width: 200px; height:150px; margin: 40px ; border:30px solid hsla(0,0%,20%,.5); background: white; background-clip: p原创 2017-08-20 11:07:01 · 411 阅读 · 0 评论