![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
badlyForPapers
做学术,发论文。
展开
-
【Html】浮动模型
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。div{ width:200px; height:200px; borde原创 2015-12-10 04:35:33 · 556 阅读 · 0 评论 -
【Html】垂直居中-父元素高度确定的多行文本(方法二)
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。html代码: 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。原创 2015-12-10 18:32:36 · 318 阅读 · 0 评论 -
【Html】隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:position : absolutefloat : left 或 float:right元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。如下面的代码,小伙伴们都知原创 2015-12-10 18:36:31 · 530 阅读 · 0 评论 -
【Html】外部式css样式,写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在内(不是在标签内)使用标签将css样式文件链接到HTML文件内,如下面代码:base.css" rel="stylesheet" type="text/css" />注意:1、css样式文件名称以有意义的英文字母命名,如 main.css。2、r原创 2015-12-06 16:00:44 · 3523 阅读 · 0 评论 -
【Html】三种CSS样式的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况1、使用内联式CSS设置“超酷的互联网”文字为粉色。2、然后使用嵌入式CSS来设置文字为红色。3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三原创 2015-12-06 16:31:23 · 3146 阅读 · 0 评论 -
【Html】类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:相同点:可以应用于任何元素不同点:1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。下面代码是正确的: 三年级时,我还是一个class="stress">转载 2015-12-06 17:36:03 · 598 阅读 · 0 评论 -
【Html】子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元(注意:是第一代,可以并列,不是第一个)。如代码:.food>li{border:1px solid red;}这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。原创 2015-12-07 00:41:08 · 583 阅读 · 0 评论 -
【Html】包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如代码:.first span{color:red;} 三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器原创 2015-12-07 00:45:31 · 640 阅读 · 0 评论 -
【Html】通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:* {color:red;}原创 2015-12-07 00:58:05 · 538 阅读 · 0 评论 -
【Html】伪类选择符
更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。关于伪选择符: 关于伪类原创 2015-12-07 01:21:18 · 585 阅读 · 0 评论 -
【Html】分组选择符
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:h1,span{color:red;}它相当于下面两行代码:h1{color:red;}span{color:red;}原创 2015-12-07 01:24:00 · 471 阅读 · 0 评论 -
【Html】垂直居中-父元素高度确定的多行文本(方法一)
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:htm原创 2015-12-10 18:26:11 · 422 阅读 · 0 评论 -
【Html】垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码: hi,imooc!css代码:.container{ height:100px; line-height:100px; background:#999;}完整代码:垂直居中原创 2015-12-10 18:15:23 · 579 阅读 · 0 评论 -
【Html】水平居中总结-不定宽块状元素方法(三)
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。代码如下: 1 2 3 css代码:.container{ float:left原创 2015-12-10 18:01:34 · 364 阅读 · 0 评论 -
【Html】什么是层模型?
什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(原创 2015-12-10 04:37:17 · 963 阅读 · 0 评论 -
【Html】层模型--绝对定位
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。原创 2015-12-10 04:47:25 · 506 阅读 · 0 评论 -
【Html】层模型--相对定位
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。原创 2015-12-10 04:52:52 · 1121 阅读 · 0 评论 -
【Html】层模型--固定定位
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以原创 2015-12-10 04:57:06 · 1392 阅读 · 0 评论 -
【Html】Relative与Absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:1、参照定位的元素必须是相对定位元素的前辈元素: 相对参照元素进行定位从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元原创 2015-12-10 05:16:08 · 1609 阅读 · 0 评论 -
【Html】字体缩写
网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;原创 2015-12-10 12:07:21 · 1204 阅读 · 0 评论 -
【Html】水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的。如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。如下代码:html代码: 我是文本,哈哈,我想要在父容器中水平居中显示。css代码: div.txtCenter{ text-align:center;原创 2015-12-10 16:42:36 · 894 阅读 · 0 评论 -
【Html】CSS浮动(float,clear)通俗讲解
写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你。 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例。教程开始: 首先要知道,div是块级元素,在页原创 2015-12-10 17:48:25 · 577 阅读 · 0 评论 -
【Html】水平居中总结-不定宽块状元素方法(一)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):加入 table 标签设置 display;inline 方法设置 position:relative 和 left:50%;这一小节我们来讲一下第一种方法:原创 2015-12-10 17:53:49 · 718 阅读 · 0 评论 -
【Html】水平居中总结-不定宽块状元素方法(二)
第二种方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:html代码: 1 2 3 css代码:.container{ text-align:center;}.container ul{ list-原创 2015-12-10 17:57:33 · 324 阅读 · 0 评论 -
【Html】继承
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。p{color:red;}三年级时,我还是一个胆小如鼠的小女孩。可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但原创 2015-12-07 02:55:55 · 476 阅读 · 0 评论 -
【Html】特殊性-权值
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:p{color:red;}.first{color:green;}三年级时,我还是一个胆小如鼠的小女孩。p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种cs原创 2015-12-10 00:04:48 · 666 阅读 · 0 评论 -
【Html】<address>标签,为网页加入地址信息
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。语法:联系地址信息如:文档编写:lilian 北京市西城区德外大街10号本文的作者:lilian 在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用原创 2015-12-04 21:04:24 · 819 阅读 · 0 评论 -
【Html】想加入一行代码吗?使用<code>标签
在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用标签了,如下面例子:var i=i+300;注意:在文章中一般如果要插入多行代码时不能使用标签了。 如下代码在浏览器端的显示效果为:1 2 document.getELementById("id1");3 document.getE原创 2015-12-05 11:56:22 · 1486 阅读 · 0 评论 -
【Html】使用<pre>标签为你的网页加入大段代码
在上节中介绍加入一行代码的标签为,但是在大多数情况下是需要加入大段代码的,如下图:怎么办?不会是每一代码都加入一个标签吧,没有这么复杂,这时候就可以使用标签。语法:语言代码段 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如下代码: var message="欢迎"; for(var i=1转载 2015-12-05 12:18:14 · 1108 阅读 · 0 评论 -
【Html】table标签,认识网页上的表格
有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:想在网页上展示上述表格效果可以使用以下代码:创建表格的四个元素:table、tbody、tr、th、td1、…:整个表格以标记开始、标记结束。2、…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等转载 2015-12-05 14:11:10 · 1227 阅读 · 0 评论 -
【Html】caption标签,为表格添加标题和摘要
表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下:摘要摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 语法:<table summary="表格简介文本">标题用以描述表格内容,标题的显示位置:表格上方。原创 2015-12-06 10:40:50 · 1858 阅读 · 0 评论 -
【Html】使用mailto在网页中链接Email地址
标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。下面是一个完整的实例:在浏览器中显示的结果:发送点击链接会打开电子邮件原创 2015-12-06 12:00:21 · 1051 阅读 · 0 评论 -
【Html】使用表单标签,与用户交互
网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。语法:讲解:1. :标签是成对出现的,以开始,以结束。2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method : 数据传送的方式(get/post)。原创 2015-12-06 12:41:10 · 401 阅读 · 0 评论 -
【Html】使用单选框、复选框,让用户选择
在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:语法:1、type: 当 type="radio" 时,控件为单选框 当 type="checkbox" 时,控件为复选框2、value转载 2015-12-06 14:24:13 · 1346 阅读 · 0 评论 -
【Html】使用下拉列表框进行多选
下拉列表也可以进行多选操作,在标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。如下代码:在浏览器中显示的结果:原创 2015-12-06 14:50:17 · 9869 阅读 · 0 评论 -
【Html】form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。语法:转载 2015-12-06 15:11:36 · 951 阅读 · 0 评论 -
【Html】认识<hr>标签,添加水平横线
在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示:语法:html4.01版本 xhtml1.0版本 <hr />注意:1. 标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。2. 标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些原创 2015-12-04 20:05:19 · 4137 阅读 · 0 评论 -
【Html】<blockquote>标签,长文本引用
的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。 等等,上一节标签不是也是对文本的引用吗?不要忘记标签是对简短文本的引用,比如说引用一句话就用到标签。 如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用blockquote>。语法:blockquote>引用文本如原创 2015-12-04 16:15:52 · 961 阅读 · 0 评论 -
【Html】<q>标签,短文本引用
想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么标签是你所需要的。语法:引用文本如下面例子:最初知道庄子,是从一首诗庄生晓梦迷蝴蝶。望帝春心托杜鹃。开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己转载 2015-12-04 13:54:18 · 1102 阅读 · 0 评论 -
【Html】层叠
我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。如下面代码:p{color:red;}p{color:gre原创 2015-12-10 00:07:32 · 578 阅读 · 0 评论