将超出宽度的溢出文本显示省略号效果 t
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
用CSS实现Table单元格数据自动换行或不换行的实现方法:
word-break: break-all;/*强制换行*/ word-break: keep-all; /*强制不换行*/
DIV不换行的实现:
一，单个DIV：white-space:nowrap
1.用nobr元素
<html>
<head>
</head>
<body>
<div><nobr>不换行不换行<nobr></div>
</body>
</html>
2.用nowrap元素
<html>
<head>
</head>
<body>
<div nowrap>div不换行div不换行div不换行</div>
</body>
</html>
二，两个DIV
1. 用CSS里的float属性
<html>
<head>
<style type="text/css">
div#row1 { float: left; color: blue; }
div#row2 { color: red }
</style>
</head>
<body>
<div id="row1">第一个div</div>
<div id="row2">第二个div不换行</div>
</body>
</html>
2. 用CSS里的diplay属性
<html>
<head>
<title>CSS中的不换行</title>
<style type="text/css">
div#row1 { color: blue;display: inline }
div#row2 { color: red;display: inline }
</style>
</head>
<body>
<div id="row1">第一个div</div>
<div id="row2">第二个div不要换行</div>
</body>
</html>
按钮样式:
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=red); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
横向菜单:
<style>
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
</style>
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
分享到：
相关推荐
jQuery css弹性伸缩Tabs选项卡代码是一款根据容器的大小弹性伸缩，选项卡的样式可以实用CSS来自定义，选项卡带平滑拉伸动画效果。
jQuery是一个非常不错的JavaScript脚本库，之前我们也分享...而且，这款jQuery分页插件提供了多种样式风格，你也可以自己利用CSS来定义不同的分页样式。 在线演示 源码下载 3、纯CSS3实现自定义T[......] 阅读全文>>
7) 规范化CSS样式文件。将CSS文件划分为CSS文件和子模块CSS文件。核心CSS中定义系统核心样式和公共样式。子模块CSS在核心CSS的基础上进行扩展，可以调整样式风格，并定义本模块特有的CSS。 采用W3C标准规范Html,css...
3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta ...
面向移动设备的小型CSS样式表。 用法 1-下载文件css-toolset.min.css ，克隆存储库或直接链接： <link rel="stylesheet" href="https://galiprandi.github.io/css-toolset.css/css-toolset.min.css"> 2-在...
榆木CSS尾风 生成Tailwind实用程序的elm-css版本。 是一种实用的惊人方法，可在预定义的颜色，间距，断点... 将所有内容定义为elm-css样式，您将无法编写不存在的Tailwind实用程序！ 清除CSS而不清除PurgeCSS 默认情
jQuery+css弹性伸缩Tabs选项卡代码是一款根据容器的大小弹性伸缩，选项卡的样式可以实用CSS来自定义，选项卡带平滑拉伸动画效果。
下面列出了一些可以帮助你改善CSS样式表的简单实用的方法，如果你刚刚开始使用CSS，这篇日志可以帮助你更好的理解CSS。 #1. 结构 保持CSS结构清晰，不仅有助于保持CSS文件的简单，也利于日后的检查、更改。 #2. ...
6.2.3 定义CSS样式规则 116 6.2.4 应用CSS样式规则 121 6.3 编辑CSS样式 123 6.3.1 修改CSS样式 123 6.3.2 移动CSS样式 124 6.3.3 链接与导入CSS样式 126 6.4 上机练习 127 6.4.1 新建CSS样式表 127 6.4.2 链接外部...
这是一款简单的Bootstrap4按钮样式扩展库。该Bootstrap4按钮样式扩展库通过定义CSS，来为bootstrap 4原生按钮添加3D按钮，带图标的按钮，圆角按钮，以及为按钮添加更多的可用颜色，非常实用。
CSSAPI CSSAPI为使用CSS-in-JS的网站和应用程序提供了一种简单的机制，用于定义，管理和访问在样式，跨断点中使用的值，从而提高了一致性和灵活性。 在最近几年中，通过在样式的声明和样式的呈现之间添加一个层，...
本篇总结了一些css常用技巧，为网站重构打下基础，但愿您能学到一点有用的东西。 一.使用css缩写 使用缩写可以帮助减少你CSS文件的...当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，
《XML实用大全》WORD文档，... 12.6 在CSS样式单中添加注释 12.7 CSS中的单位 12.8 块、内联或列表项元素 12.9 字体属性 12.10 颜色属性 12.11 背景属性 12.12 文本属性 12.13 框属性 12.14 本章小结
项目技术栈包含：定义HTML页面结构、CSS样式的属性定义，Less中混合器的创建和使用规则、嵌套语法、父级引用等，以及JavaScript中的循环、分支、函数、DOM、BOM、数组、对象等。 视频大小：1.3G
动画师 Animator是一个ES6动画实用程序库，它使创建和序列化CSS过渡和关键帧...CSS样式类创建者 前缀处理 暂停/播放顺序 易于上课/样式操作 Animator可用于浏览器中的各种动画要求。 每天都需要动画横幅，UI交互，直
CSS样式指南探索CSS技术和最佳做法，以期着眼于样式指南。启示该样式指南的灵感来自以下方面： 未来我想探索由js驱动的css的领域，尤其是 ，其中css最终是模块化且可组合的！ 以下规则很可能会演变，因为它将成为...
这是一款简单实用的响应式jQuery Tabs选项卡插件。该选项卡插件会根据容器的大小弹性伸缩，它实用简单，选项卡的样式可以实用CSS来自定义。
这是一款简单实用的响应式jQuery Tabs选项卡插件。该选项卡插件会根据容器的大小弹性伸缩，它实用简单，选项卡的样式可以实用CSS来自定义。