【前端笔记】在HTML中画一条横线和IE10支持引用的CSS文件

最新推荐文章于 2024-08-28 03:43:25 发布

寻找现实扭曲力场

最新推荐文章于 2024-08-28 03:43:25 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签：前端 html 横线 web 浏览器

本文链接：https://blog.youkuaiyun.com/pearyangyang/article/details/39723615

前端笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在HTML中绘制横线的三种方法：使用`<hr>`标签、通过`<div>`加边框以及利用`<div>`的`border-bottom`属性。同时，针对IE10浏览器无法正确引用CSS文件的问题，提供了解决方案，即在头部添加`<META http-equiv="X-UA-Compatible" content="IE=8" />`，确保在IE8模式下渲染页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先大家国庆节快乐啊~~~ 这是我第一个在省外的国庆节，毕竟今年毕业了哇，奋斗的我们要加油~~~

最近我会不断总结上一个WEB项目所用到的前端知识，和大家一起分享哈~~~

言归正传，怎么画一条横线？我想到的有三种方法，但是各自样式不一，所以大家按需求来哦。

1.<hr />标签，对的，这个标签就代表一条横线，样式大概是这样的，如图（a与b之间哦）：

<html>
	<head></head>
	<body>
		<div>a</div>
		<hr />
		<div>b</div>
	</body>
</html>

很简单吧

2.<div>来构造，我们知道border是边界的意思，很多时候我们用它设置一些边边框的什么，这里我们就用到了它，看看代码（还是在a和b之间插一个横线）：

<html>
	<head></head>
	<body>
		<div>a</div>
		<div style="border:1px solid #CCC"></div>
		<div>b</div>
	</body>
</html>

效果图：

稍微科普一下，1px代表那个线有多宽的，越大越宽，solid代表它是一个实线，这里还有很多属性如dashed(虚线)，groove(凹槽型效果，具体请看 Border HTML，当然#CCC就是颜色了。

3.还是<div>来构造，只不过用border-bottom，为什么这么用呢，我们经常用到的横线其实我想就是一个div下面一个属性罢了，而不是单独的一个属性，所以代码有所改变，如下：

<html>
	<head></head>
	<body>
		<div style="border-bottom:1px solid #CCC">a</div>
		<div>b</div>
	</body>
</html>

效果图：

今天在帮朋友做一个网站的时候，把写好的CSS放入外部的css文件作引用，可是在火狐，谷歌浏览器都正常显示的情况下，IE10却不能显示，然后找了一下网站的资料，这里感谢百度知道一个网友提供的解决方案(用IE8进行渲染)，用IETester测试IE6，也是可以的~~~：

在<head></head>中添加：

<META http-equiv="X-UA-Compatible" content="IE=8" />

这些全部都是在14寸笔记本100%网页浏览器的效果。

好了，祝大家国庆假期快乐！~~~

（转载本站文章请注明作者和出处 Coder的不平凡 ，请勿用于任何商业用途）