![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 246 阅读 · 0 评论 -
Html5与Css3图像、锚(四)
web图像JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识、重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且质量较高的照片 PNG-32:支持alpha透明的图像 GIF:动图 WebP:支持有损或无损,大小远小于JPEG和PNG,支持alpha原创 2017-07-01 12:08:02 · 374 阅读 · 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 · 1067 阅读 · 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 · 221 阅读 · 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 · 272 阅读 · 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 · 421 阅读 · 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 · 1856 阅读 · 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 · 402 阅读 · 0 评论 -
Html5与Css3元素可见性、浮动、定位、对齐(九)
控制元素的显示类型块级元素 dispaly:block; 行内元素(显示设置设置宽度、高度不起作用) display:inline; 1.不接受padding设置,但padding-top和padding-bottom会越界进入相邻元素的区域,而不是局限于该元素本身的空间 2.可以通过设置行高改变行内元素框的高度 3.可以通过设置水平边框、内边距、外边距改变行内元素框的宽度混合显示:该元原创 2017-07-09 21:17:30 · 3499 阅读 · 0 评论 -
Html5与Css3文本、图、标记(三)
文本small:包括免责申明、注意事项、法律限制、版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字。不传达任何额外的语气。文档摘要关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语 (默认为粗体) i:具有不同语态或预期。分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称 (默认为斜体)创建图figure原创 2017-06-30 21:08:42 · 390 阅读 · 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 · 515 阅读 · 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 · 257 阅读 · 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 · 1145 阅读 · 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 · 263 阅读 · 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 · 986 阅读 · 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 · 546 阅读 · 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 · 303 阅读 · 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 · 328 阅读 · 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 · 1078 阅读 · 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 · 369 阅读 · 0 评论