用CSS样式画横线和竖线的方法
今天在做网页的时候,需要用到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样式画横线和竖线的方法的更多相关文章
- css划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
- CSS实现画一条竖线
在开发中遇到一种需求:画一条竖线. 横线倒是很好画,直接<hr/>就可以了.但是竖线没有这么现成的标签,囧囧囧~ 在网上搜索了很多资料,莫衷一是,也没有什么可信的结果. 1.原来这就是竖线 ...
- CSS样式表与HTML结合的方法
从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
- css 样式 文字过长 换行处理方法
css强制换行.强制不换行及自动换行的写法 css强制不换行 div{white-space:nowrap;} css自动换行 div{ word-wrap: break-word; word-bre ...
- css 样式使用方法的累积
我们直接看样例然后在来解释使用方法. <!DOCTYPE html> <html> <head> <style> input[type="ch ...
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- JS中获取CSS样式的方法
1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...
- 如何去掉bootstrap table中表格样式中横线竖线
修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
随机推荐
- HTML之学习笔记(十一)其它标签
1.下拉列表和下拉框(select标签) winform中的ComboBox和ListBox在HTML中都是<select>标签,使用option标签添加列表中的数据. 格式: <s ...
- office2010安装出错,windows installer服务不能更新一个或多个受保护的windows文件
转自:http://www.08lr.cn/article/1985.html office2010安装过程中出现如下图错误:windows installer 服务不能更新一个或多个受保护的wind ...
- 小鱼提问1 类中嵌套public修饰的枚举,外部访问的时候却只能Class.Enum这样访问,这是为何?
/// <summary> /// 常量等定义 /// </summary> public class General { /// <summary> /// 文件 ...
- 算法——A*——HDOJ:1813
Escape from Tetris Time Limit: 12000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- nginx+php的配置
作了N多次php环境的搭建,网上的方法还真是多,但是实际操作起来总有一些大大小小的出入,很多错误经常让我纠结不已.久病成医,渐渐地我自己就总结出了一些经验.自我感觉良好. 这种方法并非以前所流行的ap ...
- 【转】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...
- html5 input的type属性启动数字输入法
html5 input的type属性启动数字输入法 当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...
- python 学习之Windows 下的编码处理!
问题1: Non-ASCII character '\xe9' in file 问题原因:程序编码上出现问题 解决方法:在程序头部加上代码 #-*- coding: UTF-8 -*- 设置代码编码为 ...
- [LeetCode]题解(python):144-Binary Tree Preorder Traversal
题目来源: https://leetcode.com/problems/binary-tree-preorder-traversal/ 题意分析: 前序遍历一棵树,递归的方法很简单.那么非递归的方法呢 ...
- ETL工具之ODI
ETL工具之ODI 到目前为止,Oracle的ETL工具包括两种,分别是Oracle Warehouse Builder(OWB)和Oracle Data Integrator(ODI ...