html页分割线最简单的实现方式

我们在写前台页的时候一般会碰到需要实现两个快中间加一条竖线，这样会使得页面分布更加清晰，下面就来说一说我的分割线的实现方式，设置一个div并给他设置宽高，然后设置其边框的颜色和宽度。

竖向分割线：

<body><div style="width:200px;height:200px;background-color:#f0f0f0;float:left;"></div><div style="width:2px;height:200px;border-left:1px solid #ccc;float:left;margin-left:15px;"></div><div style="width:200px;height:200px;background-color:#ccc;float:left;margin-left:15px;"></div>
</body>

效果图：

横向分割线:

<body><div style="width:200px;height:200px;background-color:#f0f0f0;"></div><div style="height:2px;width:200px;border-top:1px solid #ccc;float:left;margin-top:15px;"></div><div style="width:200px;height:200px;background-color:#ccc;margin-top:30px;"></div>
</body>

效果图：

html页分割线最简单的实现方式相关推荐

OneClock 不息屏的极简时钟，不仅仅是翻页时钟那么简单！
OneClock Mac时钟软件包括翻页时钟.数字时钟.表盘时钟,更多表盘三种样式.支持黑色和白色主题切换.透明度设置等设计. 不仅仅适配Mac 在iOS设备上,限于苹果并未开放任何屏保时钟.桌面时钟 ...
（div，p）等标签之间“分割线”的两种实现方式
在项目.网页中经常会遇到在两个区域之间增加一条"线"来到达分割的效果,我在这里提供两种思路方法,以解决不同的实际问题. 1 直接使用htmld 的<hr>标签,会显示一 ...
C++ 之父 Bjarne Stroustrup : 简单的表述方式才是最优的方案
2016 年的最后一天,图灵访谈给各位小伙伴儿献上特大彩蛋!借用 Bjarne 大师的话"趁你还足够年轻的时候,喜欢上某些学科,选择具有挑战性和感兴趣的工作并养成良好的习惯!",预 ...
访谈 | C++之父Bjarne Stroustrup: 简单的表述方式才是最优的方案
Bjarne Stroustrup(本贾尼·斯特劳斯特卢普) 1982年,贝尔实验室(美国AT&T公司)的Bjarne Stroustrup博士在c语言的基础上引入并扩充了面向对象的概念,发明 ...
凯撒密码---最简单的加密方式之一
凯撒密码---最简单的加密方式之一 "恺撒密码"据传是古罗马恺撒大帝用来保护重要军情的加密系统. 它是一种置换密码,通过将字母按顺序推后起3位起到加密作用,如将字母A换作字母D,将 ...
HTML+CSS+JS商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品网购网站模板
HTML5期末大作业:蛋糕团购商城网站设计--蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品一.作品展示二.文件目录三.代码实现 <!doct ...
简单粗暴的方式解决eclipse下安装STS失败的问题
简单粗暴的方式解决eclipse下安装STS失败的问题参考文章: (1)简单粗暴的方式解决eclipse下安装STS失败的问题 (2)https://www.cnblogs.com/zhangyua ...
Zxing与 Zbar生成二维码最简单的实现方式
Zxing与 Zbar生成二维码最简单的实现方式导入依赖 implementation 'cn.bingoogolapple:bga-qrcode-zbar:1.2.1' 或者 implementa ...
java a星寻路算法_用简单直白的方式讲解A星寻路算法原理
很多游戏特别是rts,rpg类游戏,都需要用到寻路.寻路算法有深度优先搜索(DFS),广度优先搜索(BFS),A星算法等,而A星算法是一种具备启发性策略的算法,效率是几种算法中最高的,因此也成为游戏中 ...

html页分割线最简单的实现方式

html页分割线最简单的实现方式相关推荐

最新文章

热门文章