今天在做网页的时候,需要用到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. asp.net DropDownList实现ToolTip功能

    在绑定DropDownList控件时,可能出现绑定显示的文本过长以至于超过控件长度的内容看不到,这时候就需要使用ToolTip完成其功能,即鼠标放到相应选项后就可显示其完成内容. 首先,在页面引入jQ ...

  2. JS学习笔记(一)基本数据类型和对象类型

    js是一种弱类型的语言,所有的变量都用var进行声明,字符串用双引号或单引号括起来,常见基本数据类型为number,string,boolean等.如 var num = 123;或var num = ...

  3. Html5 Video的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Ubuntu 14.04 静态IP设置

    1. 编辑/etc/network/interfaces vim /etc/network/interfaces 2.将以下五项添加到/etc/network/interfaces中 Static d ...

  5. ASP.Net中使用Report Service

    昨天研究以下Report Service,发现SQL Service自带的报表服务器也非常强大, 一,报表在不同的应用中表现形式 参考:http://www.cnitblog.com/yide/arc ...

  6. calltree看代码调用图

    calltree是在linux下面看c代码(尤其是复杂的内核代码)的神器. 推荐  calltree+vim + ctags + cscope + taglist [ vim: 搭建vim看代码的环境 ...

  7. c++ build options(important)

    The C runtime library  4 versions: Multi-threaded (/MT) Multi-threaded Debug (/MTd) Multi-threaded D ...

  8. latex 常用小结

    在写论文,甚至有些课程的报告的时候,latex是常用的工具.这篇博文简单的记录了latex常用的一些内容. 1 基本模块 没用过latex的读者,最想问的问题莫过于latex的 “hello worl ...

  9. HTML禁止使用右键

    <html> <script type="text/javascript"> <!-- document.oncontextmenu=function ...

  10. shell实现死循环

    参考自http://codingstandards.iteye.com/blog/780524 .while true do command; done .while : do command; do ...