用flex实现css里的三大经典布局,不需要额外很多代码。1,垂直居中 :子元素在父元素中,水平垂直居中。justify-content:center设置水平方向居中,align-center设置垂直方向居中。<div id="parent"><div id="child"></div></div>#parent {
/* align-content和align-items必须配合使用 */display: flex;justify-content: center;align-content: center;align-items: center;width: 300px;height: 300px;outline: solid 1px;}#child ...
话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant:使用CSS,可以对字体进行设置,字体属性包括五种常见属性:字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant。通过这五个属性,可以设定文本在web页面的显示效果或文本的打印效果。1.字体系列font-family支持按照优先级顺序列出各种要指派使用的字体,当用户系统没有安装首选字体...
sublime开发前端确实好用,有好多些个的插件,轻量便捷,但是在使用sublime中的一些插件的时候总是会遇到困扰,跟自己想象中的不一样,比如在使用SublimeCodeIntel插件的时候,就会遇到一个烦人的问题:在css中输入分号要换行的时候,总是弹出自动提示,按下回车就会确认提示,很是烦人。为此:特意上网查了2个小时,终于找到解决方案:打开Sublime默认设置文件:‘Perferences->Package Settings->SublimeCodeIntel->Setting - De...
单行居中,多行居左,超过两行用省略号(绝对定位)<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 320px;margin: 10px auto;background: #ddd;position: relative;}h2 {position: relative;line-height...
模板:<button class="r receive_code">获取验证码</button><span class="r code"></span>脚本:// 生成六位数字验证码$(".code").html(null);function createCode() {var code = "";var length = 6;var i;var str = "";var content;var codeSpan = $(".code");var arrColor = ["blue", "red", "green", "brown", "gray", "pink", "red", "green", "brown", "blue"];codeSpan.html(null);for (i = 0; i < length; i++) {index = Ma...
CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。CSS3属性选择器下面是CSS3的属性选择器的语法,及使用。元素名字[元素类型=“类型名字”]:选择器名字{属性:值;属性:值;
} 在元素类型匹配时,就可以使用类似正则的匹配方法。 [att=val] 指定特定名字的元素 [att*=val] 匹配val*的元素, [att^=val] 匹配val开头的元素,比如id为val1、val432432都可...
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行2. m...
1、line-height的定义 定义:两行文字基线之间的距离。 注:不同字体之间的基线是不同的。2、line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area),是一种围绕文字看不见的盒子,大小与font-size有关; ②内联盒子(inline boxes),不会让内容成块显示,而是排成一行。如果外部含inline水平标签,则属于内联盒子;如果是个光秃秃的文字,则属于”匿名内联盒子“; ③行框盒子(line boxe...
css语法结构:selector{property:value;}属性值名称过长且带有空格,要用引号包含,如"sans serif"css中的注释:/*this is a comment*/css中的简写:颜色 十六进制形式#RRGGBB RGB函数值形式RGB(x,x,x) x可为0~255数值,也可以是0~100%百分数(但是与255乘积必须是整数) 直接写颜色名,如 red yellow等 用户系统色盘值当数值为0的时候,单位可省略;border属性简写:width style colorfont属性: 文字...
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有:noneblockinlineinline-blockinherit 下面,我将按照顺序将上述几种属性做一个完整的讲解。第一部分:display:none none这个值表示此元素将不被显示。比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为可气的是,它还没有关闭的选项,这时(以chrome为例),我们就可以按下F12,打开开发者工...
body{}表示是对body标签的设置,就是<html><head></head><body></body></html> 里面的body。 *{}表示对页面所有元素的设置,一般我们会设置*{margin:0px;padding:0px}来表示所有元素的margin和padding为0; 这两个的设置一般是为了页面标签的初始化,因为不同的浏览器默认标签有一些不同的属性。比如chrome默认li有margin-left:30px;的属性,p标签也默认有属性。有些浏览器会给body默认属性。如果不进行设置的话在不同浏览器...
目录:1.1 设置样式的七个选择器1.2 css常见属性浅析1.3 css布局中常用方法1.1 设置样式的七个选择器 1、其中选择器介绍 1. 直接在标签里的style标签写样式 2. id选择器(名字以“#”号开头): 只能被某一个标签使用 3. class选择器(名字以“.”号开头): 可以被多个标签同时引用 4. 标签选择器:比如你设置一个div标签选择器,那么所有div默认都会使用这个样式 ...
看完图下面是测试代码:<html><head><title>jb51.net</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"></style></head><body><SCRIPT LANGUAGE="JavaScript">var s = "";s = "\r\n网页可见区域宽:" document.body.clientWidth;s = "\r\n网页可见区域高:" document.body.clientHeight;s = "\r\n网页可见区域宽:" document.body.offsetWidth " (包括边线的宽)";s = "...
4. 背景布局(1)background基本语法background : background-color || background-image || background-repeat || background-attachment || background-position 语法取值该属性是复合属性。请参阅各参数对应的属性。
默认值为:transparent none repeat scroll 0% 0%。使用说明设置对象的背景样式。如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如:设置 background : white 等...
去过宜家的同学应该都有注意到,宜家的家具基本都是组合的,可拆装。模块化的特点也是这样,可以组合,相对独立,在需要的时候可以很方便的加上。那怎么写可以基本实现这种方式呢?很久之前就知道 宜家 ,以前在广州的时候也去过一次,给我的印象就是:大、贵、巧。地方很大,东西很贵,设计很巧。现在住的地方离宜家不远,这个月找时间去逛了下,地方还是那么大,东西还是那么贵,设计还是那么的巧。虽然没有买什么东西,不过也还...