background | 易学教程

CSS布局——display，position，float属性

阅读更多关于 CSS布局——display，position，float属性

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度

脱离文档流分析

阅读更多关于脱离文档流分析

脱离文档流分析 --------------------------------------------(分享自http://www.cnblogs.com/shenfangfang/p/5278528.html) 先来了解一下block元素和inline元素在文档流中的排列方式。　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。常见的内联元素有span、a、strong、em、label、input、select

css布局方式

阅读更多关于 css布局方式

布局方式 1.标准流/静态流　　默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示 2.浮动布局　　主要用于设置块元素的水平排列　　 1）属性:float 　　 2）取值 : 可取left或right，设置元素向左浮动或向右浮动. 　　示例: float:left/right; 　　3）特点: 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位元素设置浮动,就具有块元素的特征,可以手动调整宽高 "文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示　　 4）常见问题 : 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局　　 5）解决: 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏) 在父元素的末尾添加空的块元素。设置clear:both;清除浮动为父元素设置overflow:hidden;解决高度为0 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width:500px; 9 height:500px; 10 margin:0 auto; 11

双飞翼布局（练习）

阅读更多关于双飞翼布局（练习）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; padding: 0; } .bigbox .one { margin: 0 200px 0 300px; background: red; height: 500px; } .bigbox .two { background: blue; width: 300px; height: 500px; position: absolute; left: 0px; top: 0; } .bigbox .three { background: pink; width: 200px; height: 500px; position: absolute; right: 0; top: 0; } </style> </head> <body> <div class="bigbox"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </body> </html> 来源： https://www.cnblogs.com/mrluobiao/p/6736358

第一课——css3 Gradient

阅读更多关于第一课——css3 Gradient

CSS3 发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研 CSS3 在web中的应用，为了不被淘汰，我也开始向 CSS3 进发，争取跟上技术的前沿。从现在开始我会不断的发布一些 CSS3 的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3渐变。 CSS3 Gradient 分为 linear-gradient (线性渐变)和 radial-gradient (径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient ,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有 Mozilla （熟悉的有Firefox，Flock等浏览器）、 WebKit （熟悉的有Safari、Chrome等浏览器）、 Opera （Opera浏览器）、Trident（讨厌的IE浏览器）。本文照常忽略IE不管，我们主要看看在Mozilla、Webkit、Opera下的应用，当然在IE下也可以实现，他需要通过IE特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。那我们了解了这些，现在就开始今天的主题吧。 CSS3的线性渐变一

Html 响应式 Web

阅读更多关于 Html 响应式 Web

网格视图很多网页都是基于网格设计的，这说明网页是按列来布局的。使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。 viewport viewport 是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的" 窗口" （viewport ）中，通常这个虚拟的" 窗口" （viewport ）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> width ：控制 viewport 的大小，可以指定的一个值，如果 600 ，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height ：和 width 相对应，指定高度。 initial-scale ：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale

CSS3:background渐变

阅读更多关于 CSS3:background渐变

今天总结渐变的问题，渐变分为线性渐变、径向渐变。呼呼，废话少说，线性渐变： background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点中间颜色的位置,结束点颜色); Linear:渐变的类型（线性渐变）；渐变的形式：可选参数有两种方式-1、设置旋转角度，0度代表水平从左到右，90度就是从上到下啦，从0度开始逆时针变换。 2、使用关键字，left代表从左到右，top代表从上到下，同理right就是从右到左，lefttop-从坐上到右下，同理leftbottom，righttop，rightbottom。中间颜色与中间颜色位置为可选参数。不过要考虑浏览器的兼容，咱们这样写： -webkit-gradient（linear,0 0,0 100%,from(起始颜色,to(结束颜色)）； /*for Safari4+,Chrome 2+*/ -webkit-linear-gradient（起始颜色, 结束颜色）； /*for Safari 5.1+,Chrome 10+*/ -moz-linear-gradient（起始颜色, 结束颜色）； /*for firefox*/ -o-linear-gradient（起始颜色, 结束颜色）； /*Opera*/ linear-gradient（起始颜色, 结束颜色）； /*标准属性*/

CSS3

阅读更多关于 CSS3

文本效果 1、text-shadow 文本阴影（艺术字） h1{ text-shadow: 5px 5px 5px #FF0000; /*4个参数：水平阴影、垂直阴影、模糊的距离、阴影颜色*/ } 2、text-overflow 文本溢出 p{ text-overflow: clip; /*剪掉溢出的文本*/ text-overflow: ellipsis; /*用省略号...代替溢出的部分来显示，最常用*/ } overflow可以处理所有的溢出，text-overflow专用于文本溢出。我们可以在:hover伪类中设置overflow/text-overflow，当鼠标移到内容上时，显示全部|完整内容。 3、word-break 单词换行拆分方式 p{ word-break:break-all; /*如果换行处的单词过长，会拆分单词，并不会加连词线*/ word-break: keep-all; /*如果换行处的单词过长，会转到下一行显示*/ word-break: normal; /*使用浏览器默认的换行符*/ } 边框 1、圆角边框 div{ border:1px solid red; border-radius:5px; /*设置圆角大小，数值越大，越圆*/ } border-radius需要和border | backgroud-image | background

jquery mobile 自定义图标

阅读更多关于 jquery mobile 自定义图标

Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。给链接添加data-icon 属性，可以添加按钮的图标 html代码 <a href=”index.html” data-role=”button” data-icon=”delete”>Delete</a> 带有图标的按钮：图标 Icon set data-icon属性可以被用来创建如下所示的图标左箭头 data-icon=”arrow-l” 右箭头 data-icon=”arrow-r” 上箭头 data-icon=”arrow-u” 下箭头 data-icon=”arrow-d” 删除　 data-icon=”delete” 添加　 data-icon=”Plus” 减少　 data-icon=”minus” 检查　 data-icon=”Check” 齿轮　 data-icon=”gear” 前进　 data-icon=”Forward” 后退　 data-icon=”Back” 网格　 data-icon=”Grid” 五角星 data-icon=”Star” 警告　 data-icon=”Alert” 信息　 data

div设置多个class

阅读更多关于 div设置多个class

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作： <p class="important warning"> This paragraph is a very important warning. </p> 这两个词的顺序无关紧要，写成 warning important 也可以。我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作： .important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;} //相当于两个class有相同的样式。其实是一个DIV拥有两个Class 空格并不是一个CLASS，用jquery你只需要$(".import")或 $(".warning")就可将其选定。来源： https://www.cnblogs.com/rcstudy/p/5009132.html

订阅 background