边框背景 | 易学教程

html table 表格

阅读更多关于 html table 表格

前面的话　　在CSS出现之前，table元素常常用来布局。这种做法在HTML4之后不再推荐使用。而现在有些矫枉过正，使用table展示数据都可能会被说不规范。本文将详细介绍HTML表格table table 【默认样式】 //IE7-浏览器不支持border-spacing table{ 　　border-collapse: separate; 　　border-spacing: 2px; 　　border: 1px solid gray; } 【属性】　　1、border(在html5中，border只能为"1"或" ")(html5已废弃) border="0"//没有边框 border="8"//8像素宽的边框　　2、cellpadding(px/%)(html5已废弃) 　　规定单元边界与单元内容之间的间距　　3、cellspacing(px/%)(html5已废弃) 　　规定单元格之间的间距　　4、summary(html5已废弃) 　　表格内容的摘要　　5、width(html5已废弃) 　　表格宽度 <table border="2" cellpadding="5" cellspacing="3" summary="测试表格" width="300"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td>

常用CSS样式属性|CSS样式表

阅读更多关于常用CSS样式属性|CSS样式表

【长度单位】 CSS可使用长度单位单位单位说明范例 pt Point，就像是Word里面的Point一样大小 font-size:10pt px Pixels，依您屏幕分辨率而决定大小 font-size:10px pc Pica，6个Pica是一英吋 font-size:10pc mm 公厘，用过尺...这个设定值完全不会因为其它设定而改变 font-size:10mm cm 公分，不会因为使用者设定而改变 font-size:10cm % 百分比，大部分是指所在位置宽度或者长度百分比 font-size:10% 【颜色表示】 CSS可用颜色表示方式表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到 color:#feefc7 rgb(#,#,#) 用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找 color:rgb(135,255,124) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色 color:rgb(70%,35%,41%) 颜色名称用颜色的名称来指定颜色 color:brown 【背景可用值】 CSS可用背景值名称说明可能值范例 background 背景下面的背景设定值皆适用 background:fixed background-attachment

盒子模型

阅读更多关于盒子模型

盒子模型一.认识盒子模型概念：把HTML页面中的元素看作是一个矩形的盒子也就是一个呈装内容的容器。组成：由元素的内容，外边距，边框和内边距组成。二.盒子模型相关属性边框属性： 1.设置边框样式：例如： <p> 只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各边样式： p{ border-style:dashed solid solid solid;} 或综合设置4条边，然后采用上边覆盖： p{border-style:solid;} p{border-top-style:dashed;} 2.设置边框宽度: 单位常用px border-top-width：上边框宽度 border-right-width：右边框宽度 border-bottom-width：下边框宽度 border-left-width：左边框宽度 border-width：上边框宽度[右边框宽度下边框宽度左边框宽度 ] 3.设置边框颜色：综合设置四边颜色必须按顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。注意：设置边框颜色时必须设置边框样式，如果未设置样式或设置为none，则其他边框属性无效。 4.综合设置边框： 5.内边距属性： padding-top：上内边距 padding-right

纯CSS实现聊天框气泡效果(一)

阅读更多关于纯CSS实现聊天框气泡效果(一)

CSS气泡实现过程 <div class="arrow"></div> <style type="text/css"> .arrow { width:0; height:0; font-size:0; border:solid 10px #000; } </style> 我们可以得到一个黑色的正方形，其实这是边框组成的，因为div的宽度和高度都是0。那么，我们具体来看看，div宽度和高度都是0时，它的上下左右四边框都是怎样的，下面我们把边框的各边框的各边颜色分别设置为不同颜色： <div class="arrow"></div> <style type="text/css"> .arrow{ width:0; height:0; font-size:0; border:solid 10px; border-color:#ff0 #0f0 #00f #000; } </style> 我们发现，原来当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做小尖角，我们只要把不需要的三边的边框颜色设置为与背景相同即可，这样只要能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。代码如下： <!DOCTYPE html> <html> <head> <style> body { background:#fff; }

CSS盒子以及简单的数值设置

阅读更多关于 CSS盒子以及简单的数值设置

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 块元素与内联元素区别一般情况做布局用块元素 div。在一行上就用<span> 块元素又名块级元素（block element）和其对应的是内联元素(inline element),都是html规范中的概念 block元素的特点 1.总是在新行上开始 2.高度，行高以及外边距和内边距都可控制 3.宽度缺省是它的容器的100%，除非设定一个宽度 4.它可以容纳内联元素和其他块元素 div就是一个块元素 <h1> <h2> <h3> <h4> <h5> <h6> <hr>-水平分隔线 address-地址 blockquote-块引用 center-居中对齐块 dir-目录列表 filedset-form控制组 inline内联元素的特点 1.和其他元素都在一行上 2.高，行高以及外边距和内边距不可改变 3.宽度就是它的文字或图片的宽度，不可改变 4.内联元素只能容纳文本或者其他内联元素 spa是行元素 CSS的盒子模型盒子模型是CSS的基石之一i，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列、并列排列、嵌套排列）堆积而成。网页布局主要是div+css布局

CSS揭秘:背景与边框（1）~半透明边框

阅读更多关于 CSS揭秘:背景与边框（1）~半透明边框

最近在阅读《CSS揭密》一书，将学习过的内容自己简单纪录一下，只为了加深一下子自己的记忆，方便学习，大家感兴趣的可以去看一下这本书。半透明边框背景知识 rgba()、hsla()颜色 RGBA 说明： RGBA(R,G,B,A) 取值： R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数 A：Alpha透明度,取值0~1之间。 RGBA记法此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。 IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理 HSLA 说明： HSLA(H,S,L,A) 取值： H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 S：Saturation(饱和度)。取值为：0.0% - 100.0% L：Lightness(亮度)。取值为：0.0% - 100.0% A：Alpha透明度。取值0~1之间。说明： HSL记法此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。兼容性：浅绿 = 支持红色 = 不支持粉色 = 部分支持难题半透明颜色是2009年发生的一场重大变革。从那次之后，人们可以在挖网页设计中使用它们，但是为了尝鲜还需要付出额外的代价，比如我们要做好回退

CSS -盒模型

阅读更多关于 CSS -盒模型

盒模型 content-box 内容盒 - 内容就是盒子的世界 border-box 边框盒 - 框架材质盒子的世界公式内容盒 content-box width = 内容宽度 .con { margin : 25px ; border : 5px solid red ; padding : 15px ; box-sizing : content-box ; width : 100px ; } 此处设置的宽度仅仅指的是内容的宽度，不包含内、外边距和边框的尺寸！！边框盒 border-box width - 内容宽度 + padding + border .bor { margin : 25px ; border : 5px solid red ; padding : 15px ; box-sizing : border-box ; width : 100px ; } 此处的宽度指的是从边框的最左边到最后面的距离！！！ margin - 外边距 1、盒子的外边框，他是完全透明的，开发者只可以设置它的边距。 2、margin包含了上下左右四条边，开发者可以单独设置每一条边的边距，也可以同时设置四条边的宽度单独设置 margin-top 上边距 margin-buttom 下边距 margin-left 左边距 margin-right 右边距同时设置 margin：30px

div行内样式style常用属性

阅读更多关于 div行内样式style常用属性

div 行内样式style常用属性观看演示下载源代码〖作者：Nimitz 〗〖发布日期：2014-02-16 〗一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。例： <div style="width:200px;height:200px;"></div> 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。例：点击查看效果： <div style="width:300px;height:300px;"> <div style="margin:5px 10px 20px 30px;width:200px; height:200px;"> </div> </div> 说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。 7、margin-bottom:到父容器下边框的距离。在标准的浏览器中，box模型首先确定的是content的宽度和高度，而margin和padding不会影响content的宽度和高度—

样式属性

阅读更多关于样式属性

1、背景与前景 background-color: #000; ——背景颜色 background-image: url(路径) ——背景图片 background-attachment: fixed; ——背景是固定的，不随字体滚动 background-attachment: scroll; ——背景随字体滚动 background-repeat: no-repeat; —— no-repeat 不平铺；repeat 平铺；repeat-x 横向平铺；repeat-y 纵向平铺 background-position: center; ——背景图居中，设置背景图位置时，repeat必须为“no-repeat” 字体 font-family:"字体类型"; ——常用微软雅黑、宋体为通用字体，任何浏览器都可识别 font-size:12px; ——字体大小，px为像素单位 font-weight:bold; ——bold 是加粗，normal 是正常 font-style:italic; ——倾斜，nomal为不倾斜 text-decoration:undreline; ——下划线，overline 上划线，line-through 删除线，none 去除 text-align:水平对齐方式； vertical-align：垂直对齐方式； text-indent：28px; ——

03HTML5学习之视觉元素与图像

阅读更多关于 03HTML5学习之视觉元素与图像

文章目录 1、配置线条与边框水平分隔线元素边框属性与间距属性边框属性边框样式属性内边距属性 2、图像类型图片互换格式（GIF）图片透明度动画压缩优化交错联合照片专家小组（JPEG）图像压缩优化渐进式JPEG 可移植网络图形格式（PNG）图像新型的WebP图像格式 3、图像元素无障碍访问和图像图像超链接 4、HTML5视觉元素 HTML5 Figure元素 HTML5 Figcaption元素 HTML5 Meter元素 HTML5 Progress元素 5、背景图像 background-image属性同时配置背景色和背景图浏览器显示背景图 background-repeat属性 background-position属性 background-attachment属性 6、更多有关图像的知识图像映射映射元素区域元素配置收藏图标 7、图片使用原则图像使用指导原则图片重用权衡图片大小和质量考虑图片的下载时间使用合适的分辨率指定维度注意亮度与对比度 8、CSS3视觉效果 CSS3 background-clip属性 CSS3 background-origin属性 CSS3中对多张背景图像的处理 CSS3圆角效果 CSS3 box-shadow属性 CSS3的opacity属性 1、配置线条与边框

订阅边框背景