搜索
您的当前位置:首页正文

DIV和CSS排版中制作细线条的几种方法(转)_html/css_WEB-ITnose

2023-11-27 来源:谷彼宠物网

今天制作div的高度控制的时候发现IE下控制div的高度很小的时候无效,特意查了一下相关文章。

最终有了解决方案,参考下面文章:

如果要制作一条高度小于12PX(大约)的线条,在IE中会显示出高于实际高度的,看下面。

可看出实际高度大于6PX,这也算是IE的一个BUG吧。以下三种方法可解决这个问题,推荐使用第一种方法。 1:

2. div之间要加个空格 注:IE5.0 无效

3:

备注:在FireFox下一点问题也没有,IE的Bug。 overflow: hidden; font-size:1px;

小编还为您整理了以下内容,可能对您也有帮助:

DIV+CSS网页布局时需要知道的几个技巧_html/css_WEB-ITnose

本文向大家简单描述一下DIV CSS网页布局需要掌握的技巧,良好的习惯可能会使你的设计周期加倍缩短,下面让我们一起来学习吧。你对对DIV CSS网页布局需要掌握的技巧是否熟悉,这里和大家分享一下,良好的习惯可能会使你的设计周期加倍缩短。 以下是进行CSS设计时的几个小技巧 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。 2.DIV CSS网页布局时使用浮动功能时记得适当清除指令 浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。 3.边界重合时利用padding或border来避免 有事可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合; 4.尝试避免同时对元素指定padding/border以及高度或宽度 Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。 5.DIV CSS网页布局时不要依赖min-width/min-height Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。 6.若有疑问,先减少百分比 有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。 7.DIV CSS网页布局时记住写法(TRBL) Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left.所以margin:01px3px5px;的结果是上方无边界,右边1像素,以此类推。这样就不会弄错次序了。 8.只要不是零的值,都要指定单位 CSS需要您对每个font,Margin等各种值指定单位。唯一的例外就是Line-height

CSS如何怎么设置div边框颜色宽度和高度?

CSS设置div边框颜色宽度和高度步骤如下:

1、新建一个html文件,创建一个类名为wrap的div。

2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色(没有边框时方便看出来div的大小)。

3、通过div 的border属性控制边框颜色,设置border的宽度为2px,线型为实线,颜色为蓝色。

4、这样就可以设置div边框颜色宽度和高度,如下图:

扩展资料:

css border属性:

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性:

border-width,border-style,border-color

如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。

如何利用CSS实现各种几何图形形状效果_html/css_WEB-ITnose

如何利用CSS实现各种几何图形形状效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度。大家都知道CSS具有强大的功能,能够让页面变得美观靓丽,随着CSS的版本的提高,功能也越来越强大,下面简单介绍一下如何使用CSS实现各种几何图形效果。一.实现正方形:

蚂蚁部落.mytest{ width:100px; height:100px; background-color:green;}

二.实现矩形:

蚂蚁部落.mytest{ width:150px; height:100px; background-color:green;}

三.实现圆形:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ width:100px; height:100px; background:green; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}

四.实现椭圆形:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ width:200px; height:100px; background:green; -moz-border-radius:100px / 50px; -webkit-border-radius:100px / 50px; border-radius:100px / 50px;}

五.实现三角形:以下代码可以根据实际需要设置其他方向的角北京色为白色,就可以实现某一方向为三角形。

蚂蚁部落.mytest{ width:0px; height:0px; border-left:100px solid green; border-right:100px solid black; border-bottom:100px solid red; border-top:100px solid blue;}

六.平行四边形:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ width:150px; height:100px; margin-left:20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background:green;}

七.鸡蛋形状:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ display:block; width:126px; height:180px; background-color:green; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}

八.提示框:

蚂蚁部落.parent{ width:300px; height:100px; margin:40px auto; background-color:green; position:relative;}.square{ width:0px; height:0px; border-bottom:10px solid white; border-left:10px solid white; border-right:10px solid green; border-top:10px solid green; position:absolute; left:-20px; top:10px;}

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/591.html

最原始地址是:http://www.softwhy.com/

谷彼宠物网还为您提供以下相关内容希望对您有帮助:

CSS怎么给数字中间加一横线

2种方法:1、给这个数字添加css属性:text-decoration: line-through;2、给这个数字添加标签:del。如:<del>9999</del>。text-decoration详解:text-decoration : none || underline || blink || overline || line-thro...

...布局时需要知道的几个技巧_html/css_WEB-ITnose

以下是进行CSS设计时的几个小技巧 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错...

如何在html的表格中加入边框线

1、对应css代码 <style> .table-a table{border:1px solid #F00} /* css注释:只对table标签设置红色边框样式 */ </style> 2、对应html代码片段 <div class="table-a"> <table width="400" border="0" cellspac...

web前端开发技术DIV+CSS页面布局 5行5列怎么弄?

DIV+CSS页面布局是web标准中的一种新的布局方式。在这种布局中,div承载的是内容,而CSS承载的是样式。5行5列具体制作方法推荐通过千锋教育进行学习,千锋教育开发教学课程,满足工科建设人才培养计划,切合主流企业对IT互联网...

...实现各种几何图形形状效果_html/css_WEB-ITnose

一.实现正方形:蚂蚁部落.mytest{ width:100px; height:100px; background-color:green;} 二.实现矩形:蚂蚁部落.mytest{ width:150px; height:100px; background-color:green;} 三.实现圆形:IE8和IE8以下的浏览器...

用html+div+css制作田字格网页布局

html><html><head><meta charset="utf-8"><title></title><style>.divL{float: left;background-color: yellow;width: 120px;height: 120px;}.divLT{margin: 50px;}.divLB{margin: 0px 50px 50px;}.divR{...

HTML页面引入CSS的几种方式及区别_html/css_WEB-ITnose

2. 将样式代码写在标签中通常将style标签放到HTML文件标签里如: div { background: #fff; } 此种方式的优点:单个页面内的CSS代码具有统一性和规划性,便于维护。缺点:多个页面之间CSS复用仍然不够。 3. 使用标签,引...

...分割线,如何在html里实现?(DIV+CSS布局问题)

基本就是这么干的!你阔以参考一下!<!doctype html><html><head><meta charset="utf-8"><title>test</title><style type="text/css">ol,ul { list-style: none; }#main{margin:20px auto;width:800px;height...

html字体大小、颜色、粗体、下划线代码(局部)

方法和详细的操作步骤如下:1、第一步,如果要修改下划线的颜色,大小和其他样式,可以通过border属性设计,使用起来更灵活,见下图,转到下面的步骤。2、第二步, 执行完上面的操作之后, border-bottom属性用于设置底部边框...

Top