css边框 | 易学教程

CSS基础（七）-- 边框及其他样式之增加边框

阅读更多关于 CSS基础（七）-- 边框及其他样式之增加边框

随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。 #------------------------------------------------我是可耻的分割线------------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border:1px solid red;">边框</div> </body> </html> 效果：在 style 中加入 border:1px 表示加入边框 solid 表示边框样式， red 表示边框颜色 Bordert-left ，表示只在左边加边框 Bordert-right ，表示只在右边加边框 Border-top ，表示只在上边加边框来源： https://www.cnblogs.com/lirongyang/p/11303319.html

用css样式，为表格加入边框

阅读更多关于用css样式，为表格加入边框

Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。在右侧代码编辑器中添加如下代码： <style type="text/css"> table tr td,th{border:1px solid #000;} </style> 上述代码是用 css 样式代码（后面章节会详细讲解），为 th ， td 单元格添加粗细为一个像素的黑色边框。结果窗口显示出结果样式：实例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>为表格添加边框</title> <style type="text/css"> table tr td,th{border:1px solid #000;} </style> </head> <body> <table summary=""> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td>

HTML/CSS 学习笔记（整理）

阅读更多关于 HTML/CSS 学习笔记（整理）

<html> <head> <title>网页标题</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />元数据标签（编码格式，关键字和内容描述） </head> <body> <h1></h1>文章标题 <p></p>段落 <hr/>水平线 <br/>换行 <strong>内容加粗</strong> <em>内容倾斜</em> <img src="图片地址" title="鼠标悬停显示内容" alt="地址错误显示内容" width="宽" height="高"/> </body> </html> 标签分类： <标签名>内容</标签名> <标签名属性名="属性值" 属性名="属性值"/> 规范要求：标签名小写，属性名小写，属性值加引号，（属性和属性，标签名之间有空格）必须有闭合标签，正确嵌套，子标签注意缩进注意：所有符号必须是英文环境下的符号特殊符号： &文字；空格： > ： > < ： < 版权符号：© 引号：" ----------------------------------------------------- 相对路径：相对于当前html页面所在地址例如： c:/demo/first.html中<img src="pic.jpg"/>

CSS布局：元素水平垂直居中

阅读更多关于 CSS布局：元素水平垂直居中

CSS布局：元素水平垂直居中本文将依次介绍在不同条件下实现水平垂直居中的多种方法水平垂直居中是在写网页时经常会用到的需求，在上两篇博客中，分别介绍了水平居中和垂直居中的方法。本文的水平垂直居中就是将之前的水平居中和垂直居中用到的方法综合起来。用到的原理都是一样的。相信掌握水平居中和垂直居中的方法后，就能自己总结如何实现水平垂直居中 Tip：下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂，生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理，那么不管问题怎么变都可以根据自己的理解选择合适的方法。一、使用text-algin和line-height 1.原理使用text-algin属性的center值，实现水平居中。使用line-height属性，使其的值等于父元素的高度，实现垂直居中两者综合实现水平垂直居中 2.适用场景（1）通常用于可以设置行高的元素上 3.实现步骤（1）在父元素上设置文本水平居中 text-algin:center; （2）在子元素上设置行高等于父元素高度 line-height:100px; 4.完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .box {

文本阴影和边框阴影

阅读更多关于文本阴影和边框阴影

文本阴影语法 text-shadow：h-shadow v-shadow blur color；在CSS3之前，除非使用图片，否则无法给文本添加阴影效果。现在，使用text-shadow属性，可以为文本添加一个或多个阴影及模糊效果。前两个0ffset必需添加，后两个clur，color可选! 不管是偏移，还是模糊，都不会改变元素本身的尺寸。因此，发生偏移、模糊后，阴影可能会超出元素本身，延伸到元素的边界之外。除了单阴影外，还可以使用逗号分隔的阴影列表，为文本设置多重阴影效果。通过多重阴影的叠加，可以实现很多有趣的效果。如，word中的空心文字、阳文、阴文这些文本特效，都可以通过多重阴影来实现。在文本的上、下、左、右四个方向各添加1px的黑色阴影，可以实现空心文字效果；在文本的左上和右下各添加 1px的错位补色阴影，可以实现阳文文字效果；把阳文的左上和右下的阴影颜色颠倒，即可实现阴文文字效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{font-size:50px; color: white} .b1{text-shadow:-1px 0 #000, 0 1px red, 1px 0 blue,

css常用标签

阅读更多关于 css常用标签

字体属性：(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高 line-height: normal;(正常) 单位：PX、PD、EM 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体 font-variant: small-caps;(小型大写字母) normal;(正常) 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体： (font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性： (background) 色彩background-color:

盒子模型

阅读更多关于盒子模型

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？牛奶是怎样运输，让消费者购买的呢？我们说过，行内元素比如文字类似牛奶，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。 CSS 其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。盒子模型（Box Model）这里略过老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。 CSS3的盒子模型我们后面会讲。首先，我们来看一张图，来体会下什么是盒子模型。所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外

HTML-iframe标签

阅读更多关于 HTML-iframe标签

碎碎：这两天在实践中，用到了 iframe，之前对其不甚了解，了解之中遇到好多奇葩问题，今天记录下这两天遇到的相关的内容。嵌入的 iframe 页面的边框嵌入的 iframe 页面的背景嵌入的 iframe 页面居中嵌入的 iframe 页面的滚动条 iframe 父页面调用子页面 iframe 子页面调用父页面 1. iframe 嵌入页面的边框 //HTML 元素：主要有 src: 要嵌入的页面 <iframe id="framePage" src="iframe/inner_page.jsp"></iframe> // 默认有边框: 新建测试文件，命名：test_iframe01.html,内容如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> //为了方便区别，对应设置了样式 <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; //为了方便区别，设置背景样式 } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; /

html之样式

阅读更多关于 html之样式

HTML 样式 1. font字体 font-family 字体样式比如:微软雅黑、Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体 color 字体颜色 font-size:50px 字体大小注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。 text-align:center 对齐方式 font-style 字体风格斜体 normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示 font-variant 小型大写字母 font-weight 字体粗细normal:400 bold:700 最粗:900 总结属性描述 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。 font-family 设置字体系列。 font-size 设置字体的尺寸。 font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。 2. background背景

HTML基础3

阅读更多关于 HTML基础3

页面的制作过程 1 页面的制作过程 1 设计师制作设计图划分区域最重要最复杂 2 前端工程师制作页面填充内容 2 如何划分区域用合适的元素来表示不同的区域已学习 HTML 设置区域的位置、尺寸、背景等样式 CSS 3 划分区域中的 CSS 知识每个元素都会在页面中生成一个矩形区域 CSS 称该矩形区域为盒子 (box) 2. 盒模型概述 1 盒子的分类不同的元素产生的盒子类型可能不同一个元素，产生什么样的盒子，取决于它 CSS 的 display 属性 2 盒子的组成一个盒子由： margin 、 border 、 padding 、 content 组成 3. CSS 的尺寸单位在 CSS 中，有很多属性的取值，需要表示为一个尺寸，一个尺寸，由数值和单位组成。 4. 盒模型 content 内容含义用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间相关 CSS属性 Overflow 含义：内容溢出时的处理方式不可继承默认值： visible 溢出部分仍然显示其他取值 hidden溢出部分隐藏 scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用 auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现 min-width 含义：最小宽度保证 width属性的值不小于该属性值不可继承默认值

订阅 css边框