整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

网页编程:如何在HTML中插入一条水平线?

天的主题是网页编程中的水平线。

同学们好,今天我来分享一些免费的少儿编程知识。只要每天坚持学习一行代码,你也可以成为编程高手!今天我们要学习如何在HTML中插入一条水平线,使用的是HR标签。HR是一个自闭合标签,虽然它没有标准的属性,但我们可以通过CSS来控制它的外观。

先来看看我们的实例效果。在页面上,两行文字被一条直线分开。这条直线就是HR标签,效果已经展示出来了。现在我们来看看实现的代码。HR标签的写法非常简单,但在最开始的时候,它有四个属性,现在已经不被标准支持了。尽管如此,我们仍然可以使用它。

今天的实例中,我们已经将这些标签加入到了代码中。如果你感兴趣,可以查看下方的代码。按下空格键可以看到过时的属性不会被智能提示,但这并不影响代码的正确性。将注释取消后保存,然后回到浏览器刷新,可以看到属性仍然有效。线条的高度为3,宽度为400,并且居中显示。取消阴影后,线条将变为纯色。

这只是一个演示,你可以参考一下。从这个示例中,我们可以看到,HR标签的宽度是根据页面宽度自动调整的。当它的宽度达到整个浏览器时,它会自动换行。既然属性已经过时了,那么我们如何通过HTML来控制外观呢?CSS是我们今天要学习的内容。

先取消注释的代码,让HTML失效,然后保存。回到浏览器刷新,就可以看到线条变成了蓝色。

今天的分享就到这里,希望各位同学可以试着写三遍,不需要看视频也可以掌握这个技巧。如果你需要案例和相关文档,可以向我咨询。

我们下期再见,想学习编程的同学记得关注哦。

SS居中是前端工程师经常要面对的问题,也是基本技能之一。

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中。

今天,我们就和大家分享一些居中的常用方法。

把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。

使用line-height让单行文字垂直居中

把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。

使用display:table-cell

对于那些个不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,然后结合text-align:center;vertical-align:middle;来使元素居中。

利用css3的translate实现居中

css3里的移动属性也能实现元素的水平居中对齐。但是,一样注意的是只支持高版本浏览器。IE8及以下版本想都别想了。

弹性盒子实现垂直水平居中

弹性盒子也是css3新增的样式,完全解决了垂直布局难的问题。需要注意的是 :一样要考虑浏览器的兼容性。

使用表格

如果你使用的是表格的话,那完全不用为各种居中问题而烦恼了,只要用到 td(也可能会用到 th)元素的 align=”center” 以及 valign=”middle” 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。

如果想在css中控制表格内容的居中,垂直居中可以使用 vertical-align:middle,至于水平居中,貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中,IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用,对块状元素无效。

使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半。

如果只想实现一个方向的居中,则可以只使用left , margin-left 来实现水平居中,使用top , margin-top来实现垂直居中。

终极定位元素居中

通过让内部定位的盒子left,right,top,bottom四个值同时为0,然后让margin的四个值自动平分空间,实现元素的垂直水平都居中对齐。一样要注意IE7及以下低版本浏览器的不配合问题。

以上所述是小编给大家介绍的CSS实现居中的几种方法,希望对大家有所帮助。

<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>

过以下CSS样式代码实现水平方向居中布局效果

.parent{position:relative;}
.child{position:absolute;left:50%;transform: translateX(-50%)}

优点:

父级元素是否脱离文档流, 不影响子集元素水平居中效果

缺点:transform属性是CSS3中新增属性, 浏览器支持情况不好