background | 易学教程

盒模型布局详解

阅读更多关于盒模型布局详解

一、盒模型之display（显示方式）一、display组成部分解释 1、块（block）：其可以独行显示并且其自身支持宽高，其中宽可以设置为默认，高可以由子级或内容撑开（可以嵌套所有类型但是其中的p段落标签一般只允许内联嵌套）。 2、内联也叫行（inline）：其可以同行显示并且不支持宽高是因为其宽高是由内容决定的（一般嵌套内联）。 3、内联块（inline-block）：包含块和内联的所有特点，但是如果设置了宽高的话就一定要使用设置的宽高，如果值设置一种则按比例缩放（一般只作为最内层级）。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title>  <style type="text/css"> div { /*块*/ display: block; /*自适应父级可用content的宽度*/ /*width: auto;*/ /*默认0*/ /*height: 0px;*/ } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; width: auto; height: auto; } </style> <!-- 验证宽高设置

第三十七天

阅读更多关于第三十七天

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>border</title>  <style type="text/css"> .bd { width: 100px; 　　height: 100px; background-color: transparent; } .bd { /*border: 50px solid orange;*/ border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; /*border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent;*/ } </style>  <style type="text/css"> .bd { width: 0; height: 0; } .bd { border-top: 50px solid orange; border-right: 50px

CSS Rounded Table Corners, Gradient Background

阅读更多关于 CSS Rounded Table Corners, Gradient Background

问题 Here's me fiddle: http://jsfiddle.net/6yU6N/10/ I want to work some CSS magic on the table header: Rounded corners in upper left and upper right Gradient color background Gradient border Cross-browser compatibility How can this all be done? 回答1: Gradients : Most modern browsers have implemented these using CSS3 but for Internet Explorer you'll have to use special filters. Since CSS3 is an emerging standard, you have to use browser specific prefixes. .gradient{ background: -moz-linear-gradient

css之属性部分

阅读更多关于 css之属性部分

这篇写的是今天的学习到的属性，一共20个。属性再多，但也要会使用，会在使用时可以记起它，才能起到它为我们所需要的作用。样式属性 1、border CSS边框属性允许你指定一个元素边框的样式和颜色。边框样式border-style 属性用来定义边框的样式 none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。效果取决于边界的颜色值例子： border-style: solid; 边框宽度 border-width border-width:5px; 边框颜色border-color 可以设置的颜色： name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000" 您还可以设置边框的颜色为"transparent"。注意： border-color单独使用是不起作用的，必须得先使用border

左栏固定，右栏自适应的两栏布局

阅读更多关于左栏固定，右栏自适应的两栏布局

第一种方法：采用绝对定位+BFC（overflow:auto） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .left{ width: 200px; height: 200px; background: red; position: absolute; } .right{ height: 200px; margin-left: 200px; background: blue; overflow: auto; } </style> </head> <body> <div class="left">左边</div> <div class="right">右边</div> </body> </html> 第二种方法：采用左浮动+BFC （overflow:auto） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .left{ width: 200px; height: 200px;

margin折叠及hasLayout && Block Formatting Contexts

阅读更多关于 margin折叠及hasLayout && Block Formatting Contexts

margin折叠的产生有几个条件：这些margin都处于普通流中，并在同一个BFC中；这些margin没有被非空内容、padding、border 或 clear 分隔开；这些margin在垂直方向上是毗邻的，包括以下几种情况： 1、一个box的top margin与第一个子box的top margin 2、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下 3、一个box的bottom margin与紧接着的下一个box的top margin 4、一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box 垂直方向上毗邻的box不会发生折叠的情况：根元素的外边距不会参与折叠一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠折叠边距的计算当两个margin都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正

jQuery hover() 方法

阅读更多关于 jQuery hover() 方法

1 $("p").hover(function(){ 2 $("p").css("background-color","yellow"); 3 },function(){ 4 $("p").css("background-color","pink"); 5 }); 定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。语法 $( selector ).hover( inFunction,outFunction ) 调用: $( selector ).hover( handlerIn, handlerOut ) 等同以下方式： $( selector ).mouseover( handlerIn ).mouseout( handlerOut ); 注意：如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。调用: $(selector).hover(handlerInOut) 等同于： $( selector ).on( "mouseover mouseout", handlerInOut ); 来源： https://www.cnblogs.com

可编辑的table（原生JS+jQuery）

阅读更多关于可编辑的table（原生JS+jQuery）

原生js： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Table</title> <style type="text/css"> body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px

前端入门笔记之CSS篇

阅读更多关于前端入门笔记之CSS篇

OXO1 写在前面一.html和css 1.HTML和CSS的对比（1）HTML只关注语义和结构，主要是对网页元素的整理和分类。（2）CSS的主要使用场景就是美化页面，布局页面。（3) CSS和HTML搭配使用，实现网页结构，表现分离。 2.CSS概述（1）概念 CSS是叠层样式表（Cascading Style Sheets），也称为CSS样式表或级联样式表。也是一种标记语言。（2)作用 CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。 (3)CSS语法 CSS主要是由选择器以及一条或者多条申明组成。选择器 { 属性1: 值1；属性2: 值2； } demo : p { color: red; font-size: 12px; } 注：选择器：指定修改样式的目标声明：要改成的样式（4）CSS注释： /* 我是被注释掉的内容 */ OXO2 CSS上选择器分为：基础选择器和复合选择器两大类。一. 基础选择器基础选择器分为：标签选择器，类选择器，id选择器和通配符选择器。 1.标签选择器 (1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。 (2)语法标签名 { 属性1：值1；属性2：

Android ImgView属性

阅读更多关于 Android ImgView属性

ImageView是用于界面上显示图片的控件。属性 1、为ImageView设置图片 ① android:src="@drawable/img1"； src设置图片，默认图片等比例放缩，以最适应的大小显示。 ② android:background="@drawable/img1" background是组件通用属性，不仅可以设置组件的背景颜色，也可以用图片做背景。【提示】①以图片做背景，那么图片将适应组件的大小。 ②但如果控件是宽高为wrap_content，则和src的效果相同。 ③如果src和background属性同时设置，src设置的图片将在上方，background设置的图片将在上方。src图片不一定完全遮盖下面的图片，根据src的放缩模式而定。 ④资源文件名称由小写字母、数字、下划线组成。（注意：不能用大写字母） ③ 案例【准备】对应的图片资源可以放再 res/drawable文件夹下，这是两张图片没有进行任何缩放的效果【代码】 1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http:/

订阅 background