`
zzx0421
  • 浏览: 98996 次
  • 性别: Icon_minigender_1
  • 来自: 株洲/深圳
社区版块
存档分类
最新评论

实用CSS样式定义集锦

CSSMicrosoftHTML 
阅读更多
将超出宽度的溢出文本显示省略号效果 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>
分享到：
| 自定义IE地址栏图标
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用CSS样式定义的圆角表格

    通过分析提供的文件信息，我们可以提炼出以下几个与CSS样式定义的圆角表格相关的知识点： ### CSS样式定义圆角表格的关键技术点 #### 1. **HTML结构** - 在本示例中，圆角表格主要是通过一个`&lt;div&gt;`元素来实现的...

    10款很棒的菜单CSS样式

    本文将深入探讨“10款很棒的菜单CSS样式”，这些样式不仅美观，而且实用，适用于各种类型的网站。 首先，我们要了解CSS（层叠样式表）在网页设计中的作用。CSS是一种样式语言，用于定义HTML或XML（包括如SVG、Math...

    经典的css样式

    "经典的css样式"指的是那些广泛应用于网页设计，经过时间检验，既实用又美观的CSS代码片段和技巧。这些样式能够帮助开发者快速构建出专业且吸引人的用户界面，提升用户体验。 【描述】：“经典的css样式，纯css编写...

    很实用的css样式代码案例。

    ### CSS样式代码案例详解 #### 一、概述 在网页设计与开发中，CSS（层叠样式表）扮演着至关重要的角色。它不仅能够美化页面布局，还能够提高页面加载速度，实现更好的用户体验。本文将从给定的CSS代码片段出发，...

    实用CSS特效精华集锦

    本资源“实用CSS特效精华集锦”正是为提升网页设计美感而准备的一系列精选CSS技巧。 1. **CSS选择器**：CSS的选择器是用于定位HTML或XML文档中特定元素的关键工具。基础选择器如标签选择器（例如`&lt;p&gt;`）、类选择器...

    css样式模板_css_

    压缩包中的“css样式模板.doc”很可能包含了预定义的类选择器和ID选择器，这些可以直接应用到HTML元素上，为网页快速赋予统一的视觉风格。模板可能涵盖了上述提到的一些常见样式，也可能包含了一些特定的设计模式，...

    CSS样式论坛实例

    1. **论坛主题模板**：创建一个模拟论坛主题列表的HTML页面，使用CSS样式定义每个主题的外观，包括标题、作者、日期等元素。 2. **回复样式**：设计一个回复框，包括输入框、提交按钮和预览区域，利用CSS实现输入框...

    总结的超级有用的基础CSS样式类

    "总结的超级有用的基础CSS样式类"是一份宝贵的资源，涵盖了CSS中最常用和实用的样式类。这些样式类可以帮助开发者快速、有效地美化和布局页面，提高开发效率。下面，我们将深入探讨其中的关键知识点。 1. **选择器*...

    DreamWeaver中应用CSS样式表

    在随后的"CSS 样式定义"对话框中，在 Type 类的 decoration（装饰）中，勾选 none，然后点 OK，再点 Done。这样，链接的下划线就消失了。 实现鼠标悬停变色 ---------------- 在 DreamWeaver 中，实现鼠标悬停变色...

    css样式背景下载提取器

    总的来说，"CSS样式背景下载提取器"是一个实用的辅助工具，它简化了从CSS中提取背景图片的过程，对于网站开发、设计和研究工作具有较高的价值。结合整站下载工具，可以实现更全面的资源获取，为各种Web相关任务提供...

    div css教程TOP排行榜或新闻列表最标准div css样式表代码写法

    - **CSS重用**：避免重复的样式定义，创建可复用的类，提高代码效率和维护性。 - **代码压缩**：使用工具自动压缩CSS，减少文件大小，提高页面加载速度。 通过以上步骤，我们可以创建出一个既美观又实用的“TOP...

    经典的CSS样式

    "经典的CSS样式"通常指的是那些被广泛接受、广泛应用并且具有美学价值的样式规则和实践。 描述中的“页面非常美观，一目了然”意味着这些CSS样式设计得既清晰又吸引人，能够有效地引导用户浏览和理解网页内容。以下...

    好看的css样式

    标题提到的“好看的css样式”是指一些精心设计和实用的CSS代码片段或者预设样式，这些样式可以被开发者用来快速美化他们的网站。 在描述中，提到了“很好的css样式列表”和“自己经常使用的”，这暗示了这个压缩包...

    DIV+CSS漂亮的样式

    本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例，特别是3D按钮和层模拟窗口移动的效果，这些都是现代网页设计中非常流行和实用的元素。 首先，3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...

    CSS 样式 CSS 样式

    现在，让我们深入探讨CSS样式的各个方面。 首先，CSS样式主要通过三种方式应用到HTML元素上：内联样式、内部样式表和外部样式表。内联样式是通过在HTML元素的`style`属性中直接编写CSS代码，适用于单个元素的特殊...

    css样式美化菜单 css

    在网页设计中，CSS（Cascading Style Sheets）是...通过精心设计和调整CSS样式，可以创建出既美观又实用的网页菜单，提升用户体验。在实际项目中，还可以运用响应式设计，确保菜单在不同设备和屏幕尺寸上都能正常显示。

    EasyUI很全的CSS样式文件与图标

    这个压缩包包含的正是EasyUI的CSS样式文件和图标，对于开发人员来说是非常实用的工具。 首先，我们要了解EasyUI的核心组件。EasyUI提供了如对话框（Dialog）、表格（Grid）、菜单（Menu）、按钮（Button）、表单...

    淘宝导航栏css样式

    淘宝导航栏CSS样式的解析与应用 在网页设计与开发领域，CSS（层叠样式表）扮演着至关重要的角色，它负责控制网页的布局、颜色、字体等视觉表现，为用户呈现美观且功能性的界面。淘宝作为中国最大的电商平台之一，其...

    好看的button样式CSS

    在网页设计中，按钮（Button）的样式是一个重要的组成...总的来说，好看的button样式CSS是一个涉及多种CSS技巧和策略的综合应用，通过灵活运用这些知识，设计师可以创造出既美观又实用的网页按钮，提升网站的整体品质。

    CSS样式图片下载助手，css背景图片下载

    综上所述，“CSS样式图片下载助手”是一个针对网页设计师和前端开发者的实用工具，它解决了从CSS文件中提取和下载背景图片的难题，简化了工作流程，提高了效率。了解其工作原理和使用方法，有助于更好地利用这一工具...

Magicbox
Global site tag (gtag.js) - Google Analytics