边框背景

css的常用样式

守給你的承諾、 提交于 2020-01-20 20:14:44
1、边框属性(默认边框不可见) (1)border 设置边框的样式 格式:宽度 样式 颜色 线条样式:solid 实线,none 无边,double 双线 (2)width 用于设置标签的宽度 格式: width:300px; (3)height 用于设置标签的高度 格式; height:300px (4)background-color 用于设置标签的背景颜色 背景颜色设置的两种主流方式: ①英文单词 例如:red,blue,yellow ②颜色代码 格式#红绿蓝,每个颜色用两个16进制位数表示 例如:#ff1100 红色ff,绿色11,蓝色00,红色最重,绿色其次,没有蓝色 来源: https://www.cnblogs.com/liang-xp/p/12219211.html

02-CSS3边框与圆角

喜欢而已 提交于 2020-01-19 14:24:56
border-radius属性(圆角) border-radius: length / %单独设定某个角 border-top-left-radius //左上角 border-top-right-radius //右上角 border-bottom-right-radius //右下角 border-bottom-left-radius //左下角设置多个角一个值:四个圆角值相同两个值:第一个值为 左上角与右下角,第二个值为 右上角与左下角三个值:第一个值为 左上角,第二个值为 右上角与左下角,第三个值为 右下角四个值:第一个值为 左上角,第二个值为 右上角,第三个值为右下角,第四个值为左下角 box-shadow属性(盒阴影) 设置一个或多个下拉阴影的框box-shadow: h-shadow v-shadow blur spread color inset  //(水平 垂直 模糊 扩展 颜色 内阴影)//不写inset时,默认外阴影 border-image属性(边界图片) border-image 构建个性化的 可扩展按钮  //IE和Opera不兼容 border-image: source slice width outset repeat border-image-source border-image-source: url("里面时url地址");  /

##HTML基础

99封情书 提交于 2020-01-18 06:30:39
HTML基础 一:基础   HTML ( Hyper Text Markup Language ):超文本标记语言   目前学习最新的版本: HTML5.   优点: 1 ,智能代码补全 2 ,代码提示 3 ,自动保存 4 ,多个浏览器支持   用来表达网页而用来编辑的程序: nootpad ,写字板,记事本, webstrom     W3C:外围网联盟     W3C 标准:        HTML 标签是由 尖括号包围的关键词,比如 <html>       HTML 标签通常是成对出现的,比如 <b> 和 </b>       标签对中的第一个标签是开始标签,第二个标签是结束标签       开始和结束标签也被称为开放标签和闭合标签 开始工作:   File----new---HTML file (建立一个 html 文件)   File----new---direction (建立一个文件夹)   <html> 与 </html> 之间的文本描述网页   <body> 与 </body> 之间的文本是可见的页面内容   <h1> 与 </h1> 之间的文本被显示为标题( h1-h6 都是标题标签, h1 字体最大, h6 字体最小)   <p> 与 </p> 之间的文本被显示为段落   Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。   文本样式:

w3c搬运CSS念念碎

冷暖自知 提交于 2020-01-18 01:51:10
w3c搬运CSS念念碎 基本使用 当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。 如果值为若干单词,则要给值加引号 p { font-family: "sans serif"; } 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。 选择器 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。 id选择器:#id名 在现代布局中,id

哪些你知道或不知道的css,在这里或许都齐全

♀尐吖头ヾ 提交于 2020-01-16 20:50:43
暑假实习的时候带我的师傅,告诉我要注重基础,底层实现原理。才能在日新月异的技术行业站住脚跟,以不变应万变,万丈高楼平地起,所以我们应该不断的去学习,去交流。交流,不应该仅仅停留在技术方面,更多的应该是在思维方式。语言只是一种工具,编程的思想才是核心。我们只有在明白了编程的思想之后,才能去创造属于自己的东西,随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后,我开始我学习的新旅程;读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》,里面有很多有意思的CSS技巧,有时间有兴趣的朋友可以去读读这本书,读完之后我们可以一起交流,学习,一起解答你我的迷惑知识点,期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳: 有问题欢迎讨论 sunseekers 本文所有链接均来自《CSS揭秘》,内容基本都来自原书 css编码技巧 尽量减少代码重复的重复,尽量减少改动时要编辑的地方,易维护,性能高; 使用css变量,currentColor,inherit...目前css变量很少,兼容性有待改善 响应式网页设计,每个媒体查询都会增加成本;避免媒体查询 使用百分比长度来取代固定长度,或者使用与视口相关的单位(vw,vh,vmin,vmax),她们的值解析为视口宽度或高度的百分比 当你需要在较大分辨率下得到固定宽度, 使用max-width代替width

初学Css笔记

这一生的挚爱 提交于 2020-01-16 02:23:50
Css介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 Css笔记 字体相关属性: font (字体) color (颜色) font- (字体-加粗) font-size (字体-大小) font-weight (字体-类型) text-shadow (文本的阴影效果) line-height (行间的距离,行高) letter-spacing (字体间的距离) text-align (文本-水平对齐) direction (内容显示方向) 背景相关属性: Background (背景) background-attachment (固定到背景) background-color (背景-颜色) background-image (背景-图片) background-position (背景-图片-位置) background-repeat (背景-是否及如何重复背景图像) background-size (背景-大小) 边框相关属性: border (边框) border-color (边框-颜色) border-style (边框-样式) border

那些特殊边框效果在报表中要怎样实现?

只愿长相守 提交于 2020-01-16 01:30:26
斜线表头 单斜线表头 1. 点击选中要设置斜线边框的单元格; 2. 点击“报表”菜单——边框设置选项; 点击斜线的边框按钮 单元格中输入内容为 纵向维度名称,横向维度名称 ,例如:样品信息, 项目信息; 单元格失去焦点后,我们就可以看到下面的效果: 双斜线表头 设置的方法步骤和但斜线表头一样,不同的是在单元格中输入 纵向维度,横向维度,统计指标名称 ,例如: 样品信息, 项目信息, 统计值。 注意:斜线表头中输入的内容中间分隔的逗号使用的是 英文逗号 。 文字下划线 使用报表工具实现诸如下面的这种承诺函,申请表类的文档,数据动态变化的部分是带有线的就可以通过设置边框线的方式实现。 下面具体说下实现方法: 首先选中单元格,然后选择工具栏中的边框设置,选择下边框线。 预览报表就能看到单元格下划线的效果了。 注意: 由于相邻的单元格共用边框,即某个单元格的下边框是其下方相邻单元格的上边框,上边框、左边框、右边框也类似。如果某单元格上方的相邻单元格设置了下边框,那这个单元格也就设置了上边框。从边框的角度看,这是非常的合理的。但是,当我们把下边框当做下划线来使用,这就不合理。其不合理之处在于下划线属于某个单元格所有,而下边框属于相邻单元格所共有。 这种不合理在处理普通单元格和合并单元格相邻时,会表现出来。 例如,B2 是个合并格,无论设置 B1 或是 C1 的单元格的下划线,B2

使用纯CSS实现圆角边框并完美兼容

99封情书 提交于 2020-01-16 01:12:21
纯CSS实现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会有这篇文章呢,事情是这样的。在我们的以前的项目中,实现圆角框往往是用背景图片来实现的,但是,当这些项目发布上线后,在维护过程中,有时需要添加一些新的需求,因为以前的项目中大量采用了圆角图片,并且这些图片全部采用了CSS sprites方式合并的图,为了不增加更多的额外工作,并且也不想用JS来添加更多的http请求,所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好,也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作,为什么不让它来实现呢? 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。 图一 从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin:0 5px;就是左右两侧的外边距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次递减。因此根据这个原理我们可以实现简单的html结构和样式。 1、Html结构层: <div class="sharp color1"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4">

Java web前端(CSS)

旧城冷巷雨未停 提交于 2020-01-15 08:20:22
CSS的简述 1.什么是CSS Cascading Style Sheet 层叠级联样式表 CSS :层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式可以层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的,应用优先级高的,不冲突的样式规则共同作用。 2.CSS的优势 内容和表现分离 网页结构表现统一,可以实现复用 外 样式十分的丰富 建议使用独立于html的css文件 利用SEO,容易被搜索引擎收录! 3.CSS的发展史 CSS1.0 CSS2.0 DIV(块) + CSS,HTML 与 CSS 结构分离的思想,网页变得简单,SEO CSS2.1 浮动,定位 CSS3.0 圆角,阴影,动画…. 浏览器兼容性~ CSS的使用方式 1.内联样式:把CSS样式嵌入到html标签当中,类似属性的用法 <h1 style= "color:red;" >我是标题</h1> 好处:可以单独什么某个元素样式,缺点:不利于样式重用 2.内部样式:在head标签中使用style标签引入css <style> h1 { color : green ; } <

CSS盒模型详解(图文教程)

空扰寡人 提交于 2020-01-11 09:14:02
本文最初发表于 博客园 ,并在 GitHub 上持续更新。以下是正文。 盒子模型 前言 盒子模型,英文即box model。无论是div、span、还是a都是盒子。 但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个:width、height、padding、border、margin。如下: width和height: 内容 的宽度、高度(不是盒子的宽度、高度)。 padding:内边距。 border:边框。 margin:外边距。 盒子模型的示意图: 代码演示: 上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。 注意: 宽度和真实占有宽度,不是一个概念! 来看下面这例子。 标准盒模型和IE盒模型 我们目前所学习的知识中,以标准盒子模型为准。 标准盒子模型: IE盒子模型: 上图显示: 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式: width和height: 内容 的宽度、高度(不是盒子的宽度、高度)。 padding:内边距。 border:边框。 margin:外边距。 CSS盒模型和IE盒模型的区别: 在 标准盒子模型 中,