css绝对定位 | 易学教程

css sprite实例

阅读更多关于 css sprite实例

css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例，需要的码农可以参考一下。一、什么是css sprites css sprites 直译过来就是 CSS精灵。通常被解释为“ CSS图像拼合 ”或“ CSS贴图定位 ”。其实就是通过将多个图片融合到一张图里面，然后通过 CSS background 背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用 css sprites降低图片数量，带来的将是速度的提升。 css sprites是什么通俗解释： CSS Sprites 其实就是把网页中一些背景图片整合拼合成一张图片中，再利用CSS的“ background-image ”，“ background- repeat ”，“ background-position ”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。二、适合与不适合CSS sprites拼合布局 1、适合：一般小图标素材小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites

css 固定宽高比容器

阅读更多关于 css 固定宽高比容器

申明：本文参考结一老师的文章 css中如何做到容器按比例缩放核心思想：给目标元素设置一个容器，设置高度为0，用垂直padding(百分比)来撑开高度，因为padding设置百分比时是基于容器的width属性的，我们再给目标元素设置绝对定位和100%宽高即可。实现一个16:9的视频 demo代码如下： <div class="wrap"> <div class="left"> <div class="inner"> <img src="left.jpg" alt=""> </div> </div> <div class="right"> <div class="top"> <img src="right-t.jpg" alt=""> </div> <div class="bottom"> <img src="right-b.jpg" alt=""> </div> </div> </div> .wrap{ overflow: hidden; background-color: #efefef; } .left, .right{ float: left; width: 50%; } .left > .inner{ position: relative; padding-top: 100%; } .left img{ position: absolute; height: 100

css部分概念

阅读更多关于 css部分概念

1.层叠规则之间属性相同，值不同的时候就会发生声明冲突，这个时候层叠就会起作用了，层叠会将我们声明的不同的值进行保留，相同的值进行比较，选权重值更高的一个来运行。具体情境如下：假设我们定义了一个div标签，再定义其宽高，并赋予它一个类名为div，然后我们通过CSS文件对他的样式进行更改，用元素选择器指定它的背景颜色为红色，再用类选择器指定它的背景颜色为蓝色，这个时候就发生了前面提到的声明冲突，运行结果我们会发现div的背景颜色变成了蓝色，而决定div最终变为蓝色背景的就是层叠。那么层叠是根据什么来决定要在执行哪一个声明的呢？一、比较优先级。声明分为普通声明和重要声明，例：color:red;是一个普通声明，color:red !important;是一个重要声明，在发生声明冲突时，层叠会执行重要声明。二、比较特殊性。所谓特殊性，就要引入一个概念，那就是权重值，内联样式（即内嵌在元素标签内部的样式，如<a style:color：red></a>）的权重值为（1,0,0,0），id选择器的权重值为(0,1,0,0)，类选择器的权重值为(0,0,1,0)，元素选择器的权重值为(0,0,0,1)，通配符的权重值为0，重要声明的权重值最高，层叠会根据声明的权重值，执行权重值大的声明。PS:权重值：重要声明>内联样式>id选择器>类选择器>元素选择器>通配符 2.继承所谓继承

第七十三节，css盒模型

阅读更多关于第七十三节，css盒模型

css盒模型学习要点： 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出本章主要探讨HTML5中CSS盒模型，学习怎样了解元素的外观配置以及文档的整体布局。一．元素尺寸 CSS盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：属性值说明 CSS版本 width 　　　　　 auto、长度值或百分比　　　　设置元素的宽度 1 height 　　　　 auto、长度值或百分比　　　　设置元素的高度 1 min-width 　　　　 auto、长度值或百分比　　设置元素最小宽度 2 min-height 　　　　 auto、长度值或百分比　　　　　　设置元素最小高度 2 max-width 　　　　 auto、长度值或百分比　　　　设置元素最大宽度 2 max-height 　　　　 auto、长度值或百分比　　　　设置元素最大高度 2 width，height设置元素尺寸，元素的宽度和高度值说明 auto　　　　　自适应　　　　　像素px　　　　设置元素尺寸　　　　　百分比　　　　设置元素百分比尺寸，相对于父元素来衡定的 div{ background-color: #ff1c19; width: 400px; height: 200px; } <div> <p>你好</p> <

html/css基础

阅读更多关于 html/css基础

html 一、标签（重要） 1.web标准的组成三部分结构层 html 样式层css 行为层JS。 2.标签的分类（单标签，双标签） (嵌套关系，并列关系) 3.文本格式化标签 b, p i u h1 en 4.img标签使用及属性 <img src="路径" alt=“图片加载失败显示”title=“鼠标悬停出现”width=“宽”height=“高”> *图片设置宽高，最好宽和高只选择一项设置防止变形;除非有确定的宽和高 5.a标签的使用以及页面定位功能标签<a herf="#" 属性:href路径 target窗口打开方式:_blank(新窗口打开) _self(当前窗口打开) ( <base target="打开方式">写在hady标签内 base英文基础的意思S ) onclick:(点击)="return fase" 禁止当前页面跳转锚点定位加id名 herf="路径+#id名" 6.绝对定位/相对定位: 绝对路径是从盘符,网络资源路径出发(不常用) 相对路径是从文件本身出发. H5标签：<nav></nav>导航 <aside></aside>侧边栏 <article><article>文章 footer脚注 header头部二、无序列表(常用、重要) ul li （导航多种相同的）例: <ul> <li><p></p><li> *在ul内写其他标签，

2017-3-25 CSS 样式表（二）

阅读更多关于 2017-3-25 CSS 样式表（二）

一、样式属性： 1、大小： width 宽度 height 高度 2、背景： background-color ：背景色　　　　background-image：url（路径）背景图片　　　　background-repeat ：背景图的平铺方式 /*no-repeat不平铺，repeat 平铺，repeat-x 横向平铺， repeat-y 纵向平铺*/ 　　　　background-position　　背景图片位置/* center 居中，right top 右上角，left 100px top 100px 离左边100像素，离上边100像素（可以设置负值）*/ 　　　　background-attachment　　设置背景图片是否滚动/* fixed 背景是固定的，不随字体滚动，scroll 背景随字体滚动。*/ 　　　　background-size　　背景图的大小 200px 200px 3、字体： font-family　　字体样式　　　　font-size　　字体大小 12px 14px 　　　　font-style　　italic倾斜　　　　font-weight　　bold加粗　　　　text-decoration　　underline下划线，overline上划线，line-through删除线，none没有，用来去掉超链接的下划线　　　

HTML邮件模板心得

阅读更多关于 HTML邮件模板心得

个HTML邮件模板禁忌： 1. 结构尽量简单，最好使用table布局可以保证在CSS样式失效、或者html被禁用的情况下最大程度的还原布局和样式。 2. 不要使用<head>标签一般会被过滤掉。 3. 不要使用JavaScript和Flash 正常情况下这个是绝对被过滤的。。 4. 使用内联CSS样式，不要引入外部CSS文件，不要使用<style>标签 Gmail等不支持style标签。 5. CSS禁忌：不要使用绝对定位，不要使用背景图片，不要使用半透明，不要使用IE滤镜和CSS表达式，不要使用CSS3属性…… 6. 图片要添加alt属性，保证在禁用图片的情况下传递有效信息 7. 图片添加宽高属性 8. 不要试图使用iframe引入外部页面 9. 尽量精简代码，减少图片数量和体积 10. 一般使用UTF-8编码邮件客户端/服务商对CSS支持情况转自 baidu ，来源未知，未完全验证来源： CSDN 作者： iteye_8677 链接： https://blog.csdn.net/iteye_8677/article/details/82509077

html、css 高级

阅读更多关于 html、css 高级

表格元素及相关样式 1、<table>标签：声明一个表格 2、<tr>标签：定义表格中的一行 3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格表格相关样式属性 border-collapse 设置表格的边线合并，如：border-collapse:collapse; <style> .table01{ width:500px; height:200px; border:1px solid black; /* 设置表格的边线合并 */ border-collapse:collapse; /* 设置表格水平居中 */ margin:0px auto; } .table01 th{ border:1px solid black; background:lightskyblue; color:white; } .table01 td{ border:1px solid black; /* 设置文字水平居中 */ text-align:center; } </style> <body>  <table class="table01"> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>1<

css sprites拼合

阅读更多关于 css sprites拼合

一、什么是css sprites css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。二、适合与不适合DIV CSS sprites拼合布局 1、适合：一般小图标素材小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数，但很快加载完又会释放。 2、不适合：大图大背景大背景一般用于网页背景，拼合时，设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小，网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些，所以大图不推荐拼接拼合来使用css sprites背景定位布局。 3、sprites适合推荐小结一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。三、div css

css

阅读更多关于 css

css CSS :cascaiding style sheet 层叠样式表。css的作用就是给HTML页面标签添加各种样式。定义网页的显示效果 css将网页内容和显示样式进行分离，提高了显示功能 HTML缺陷不能够适应多种设备要求浏览器必须智能化足够庞大数据和显示没有分开功能不够强大 CSS优点使数据和显示分开降低网络流量使整个网站效果一致使开发效率提高了（耦合度降低，一个人负责写html，一个人负责写css）比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。 CSS的引入方式行内样式： <div> <p style="color:green">我是一个段落</p> </div> 内接样式 <style type="text/css"> /*写css代码*/ span{ color: green; } </style> 外界样式：链接式 <link rel="stylesheet" href="./demo1.css"> demo1.css span{ color: red; background-color:red; } 样式引入的优先级行内样式优先，link和style的样式谁写在后面谁优先生效 css选择器基本选择器

订阅 css绝对定位