今天在做网页的时候,需要用到CSS画横线,虽然比较简单,但也出了一些小问题,拿来做个备忘。

方法一:用DIV,代码如下:(推荐此方法)

    <div style="width:800px;height:1px;margin:0px auto;padding:0px;overflow:hidden;"></div>

说明:上面代码中的红色部分overflow:hidden;很重要,如果不加这句的话,在IE6下高度将会被拉的很开。

方法二:用HR,代码如下:

    <hr style="margin:0px;height:1px;border:0px;color:#D5D5D5;"/>

但是用方法二HR的方法,在IE6下总是在高度方面,上面总是空了一点距离,找不到好的解决方法,不知有高手是否知道,请留言指教!

*************************************************************

在开发中遇到一种需求:画一条竖线。

直接border-right就可以了。

参考博客:

http://www.cnblogs.com/helloIT/p/5368746.html

http://jingyan.baidu.com/article/f79b7cb3a95e7c9144023ee7.html

用CSS样式画横线和竖线的方法的更多相关文章

  1. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

  2. CSS实现画一条竖线

    在开发中遇到一种需求:画一条竖线. 横线倒是很好画,直接<hr/>就可以了.但是竖线没有这么现成的标签,囧囧囧~ 在网上搜索了很多资料,莫衷一是,也没有什么可信的结果. 1.原来这就是竖线 ...

  3. CSS样式表与HTML结合的方法

    从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...

  4. css 样式 文字过长 换行处理方法

    css强制换行.强制不换行及自动换行的写法 css强制不换行 div{white-space:nowrap;} css自动换行 div{ word-wrap: break-word; word-bre ...

  5. css 样式使用方法的累积

    我们直接看样例然后在来解释使用方法. <!DOCTYPE html> <html> <head> <style> input[type="ch ...

  6. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  7. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

  8. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  9. 如何去掉bootstrap table中表格样式中横线竖线

    修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...

随机推荐

  1. HTML之学习笔记(十一)其它标签

    1.下拉列表和下拉框(select标签) winform中的ComboBox和ListBox在HTML中都是<select>标签,使用option标签添加列表中的数据. 格式: <s ...

  2. office2010安装出错,windows installer服务不能更新一个或多个受保护的windows文件

    转自:http://www.08lr.cn/article/1985.html office2010安装过程中出现如下图错误:windows installer 服务不能更新一个或多个受保护的wind ...

  3. 小鱼提问1 类中嵌套public修饰的枚举,外部访问的时候却只能Class.Enum这样访问,这是为何?

    /// <summary> /// 常量等定义 /// </summary> public class General { /// <summary> /// 文件 ...

  4. 算法——A*——HDOJ:1813

    Escape from Tetris Time Limit: 12000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  5. nginx+php的配置

    作了N多次php环境的搭建,网上的方法还真是多,但是实际操作起来总有一些大大小小的出入,很多错误经常让我纠结不已.久病成医,渐渐地我自己就总结出了一些经验.自我感觉良好. 这种方法并非以前所流行的ap ...

  6. 【转】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...

  7. html5 input的type属性启动数字输入法

    html5 input的type属性启动数字输入法   当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...

  8. python 学习之Windows 下的编码处理!

    问题1: Non-ASCII character '\xe9' in file 问题原因:程序编码上出现问题 解决方法:在程序头部加上代码 #-*- coding: UTF-8 -*- 设置代码编码为 ...

  9. [LeetCode]题解(python):144-Binary Tree Preorder Traversal

    题目来源: https://leetcode.com/problems/binary-tree-preorder-traversal/ 题意分析: 前序遍历一棵树,递归的方法很简单.那么非递归的方法呢 ...

  10. ETL工具之ODI

    ETL工具之ODI         到目前为止,Oracle的ETL工具包括两种,分别是Oracle Warehouse Builder(OWB)和Oracle Data Integrator(ODI ...