##常用效果css##

1 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
元素被设置成，absolute，原有的位置会被占用，设为 relative原位置保留，此时不设置 left，top还是statuc的效果。但可以对内部的绝对定位起到标准依据效果。 li width:100% 相对于 ul而言；

2 文本换行与不换行

一般都会使用word-break: keep-all;white-space:nowrap;使得强制不换行。
word-wrap:break-word;word-break:break-all;white-space:normal; 换行

3 table样式

<style>

.classical_table1 {

border-collapse: collapse;

border: none; /*这样设计1px的边框才能细*/

}

.classical_table1 td {

word-wrap: break-word;

word-break: break-all;

white-space: normal;

}

.classical_table1_top {

padding: 5px 10px;

font-size: 12px;

font-family: Verdana;

font-weight: bold;

color: #fff;

border-bottom-width: 0;

text-align: center;

border: 1px solid blue;

}

.classical_table1_top td:not(:first-child) {

border-left: 1px solid yellow;

}

/* cont style */

.classical_table1_middle td {

padding: 5px 10px;

font-size: 12px;

font-family: Verdana;

font-weight: bold;

color: #000;

border: 1px solid gray;

}

.classical_table1_bottom td {

background: #eee;

font-family: "Microsoft YaHei";

color: #7a7676;

line-height: 20px;

font-size: 12px;

line-height: 30px;

border: 1px solid gray;

}

</style>

4 带三角的div css3

忌讳在三角形的父级div使用overflow，如需在可在div里面嵌套div再里面的div使用overflow

/*放内容的div*/

.triangleDiv_cont_div

{

padding: 20px;

overflow: auto;

max-height: 300px;

word-wrap: break-word;

word-break: break-all;

white-space: normal;

}

/*上*/

/*整体div*/

.triangleDiv_UP

{

position: absolute;

border-radius: 4px;

border: 1px solid #545050;

box-shadow: 1px 1px 5px #d1d1d1;

-webkit-box-shadow: 1px 1px 5px gray;

}

.triangleDiv_UP em

{

position: absolute;

left: 10px;

margin-top: -11px;

width: 0;

height: 0;

border-right: 10px solid transparent;

border-left: 10px solid transparent;

border-bottom: 10px solid #1e242b;

z-index: 5;

}

.triangleDiv_UP i

{

position: absolute;

left: 10px;

margin-top: -10px;

width: 0;

height: 0;

border-right: 10px solid transparent;

border-left: 10px solid transparent;

border-bottom: 10px solid white;

z-index: 5;

}

/*下*/

/*整体div*/

.triangleDiv_DOWN

{

position: absolute;

border-radius: 4px;

border: 1px solid #545050;

box-shadow: 1px 1px 5px #d1d1d1;

-webkit-box-shadow: 1px 1px 5px gray;

}

.triangleDiv_DOWN em

{

position: absolute;

left: 10px;

bottom: 0px;

margin-bottom: -11px;

width: 0;

height: 0;

border-right: 10px solid transparent;

border-left: 10px solid transparent;

border-top: 10px solid #1e242b;

z-index: 5;

}

.triangleDiv_DOWN i

{

position: absolute;

left: 10px;

bottom: 0px;

margin-bottom: -10px;

width: 0;

height: 0;

border-right: 10px solid transparent;

border-left: 10px solid transparent;

border-top: 10px solid white;

z-index: 5;

}

/*左*/

/*整体div*/

.triangleDiv_LEFT

{

position: absolute;

border-radius: 4px;

border: 1px solid #545050;

box-shadow: 1px 1px 5px #d1d1d1;

-webkit-box-shadow: 1px 1px 5px gray;

}

.triangleDiv_LEFT em

{

position: absolute;

top: 10px;

margin-left: -11px;

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid #1e242b;

z-index: 5;

}

.triangleDiv_LEFT i

{

position: absolute;

top: 10px;

margin-left: -10px;

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid white;

z-index: 5;

}

/*左*/

/*整体div*/

.triangleDiv_RIGHT

{

position: absolute;

border-radius: 4px;

border: 1px solid #545050;

box-shadow: 1px 1px 5px #d1d1d1;

-webkit-box-shadow: 1px 1px 5px gray;

}

.triangleDiv_RIGHT em

{

position: absolute;

top: 10px;

right: 0px;

margin-right: -11px;

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-left: 10px solid #1e242b;

z-index: 5;

}

.triangleDiv_RIGHT i

{

position: absolute;

top: 10px;

right: 0px;

margin-right: -10px;

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-left: 10px solid white;

z-index: 5;

}

5、向右拉伸的 ul样式

.menu_righttype_ul ul {

top: 0;

left: 100%;

}

.menu_righttype_ul {

width: 200px;

margin: 0;

padding: 0;

font-family: Segoe UI, Arial;

position: relative;

list-style: none;

box-shadow: 0 1px 2px rgba(0,0,0,0.5);

}

.menu_righttype_ul li {

display: block;

width: 100%;

padding: 0;

font-size: 14px;

position: relative;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

.menu_righttype_ul li:hover {

}

.menu_righttype_ul li a {

width: 100%;

display: block;

padding: 15px 20px 15px 19px;

color: #fff6f6;

text-decoration: none;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-transition: all .3s ease-in-out;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}

.menu_righttype_ul ul li ul {

top: 1px;

}

.menu_righttype_ul ul, .menu_righttype_ul ul li ul {

list-style: none;

margin: 0;

padding: 0;

/* display: none;*/

position: absolute;

z-index: 999;

width: 100%;

background: #171515;

box-shadow: 0 1px 3px rgba(0,0,0,0.3);

}

//使用

</ul>

</li>

</ul>

</li>

</ul>

##常用效果css##的更多相关文章

常用的CSS Hack
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
jS事件之网站常用效果汇总
下拉菜单  <!DOCTYPE html> <html> < ...
常用的CSS Hack技术集锦
来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...
整理 W3CSchool 常用的CSS属性列表
近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版 ...
常用的CSS框架
常用的CSS框架之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了. 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3scho ...
常用的CSS属性列表汇总
常用的CSS属性列表汇总近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...
前端常用得CSS代码分享
前端常用得CSS代码分享本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...
常用的css命名规则：
关于团队合作的css命名规范常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...
android shape的使用详解以及常用效果（渐变色、分割线、边框、半透明阴影效果等）
shape使用.渐变色.分割线.边框.半透明.半透明阴影效果. 首先简单了解一下shape中常见的属性.(详细介绍参看 api文档 ) 转载请注明:Rflyee_大飞: http://blog.cs ...

随机推荐

dubbo使用遇到的问题
转自:http://blog.csdn.net/liwf_/article/details/40297121?utm_source=tuicool&utm_medium=referral 把一 ...
java的WebService实践（cxf）
Java发布WebService,结合Spring,通过cxf的方式难点:1.引用什么jar包: 1.创建接口源码如下: package com.nankang; import javax.jws ...
php通过正则从字符串中获取所有图片url地址
/** * 提取字符串中图片url地址 * @param type $str * @return type */ function getimgs($str) { $reg = '/((http|ht ...
c++强制类型转换(static_cast,const_cast,dynamic_cast,reinterpret_cast)
static_cast <typeid>(exdlvssion) static_cast 很像 C 语言中的旧式类型转换.它能进行基础类型之间的转换,也能将带有可被单参调用的构造函数或用户 ...
css下拉菜单效果
<style> *{padding: 0; margin: 0;} .menu {} li { list-style-type: none; } .menu li {float: left ...
Linux rabbitmq的安装和安装amqp的php插件
RabbitMQ是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件投递到你的收件人处.在这个比喻中,RabbitMQ是一个邮箱.邮局.邮 ...
jquery中each()函数
今天在使用each函数时,发现写的js代码明明木有问题,为什么点击没有执行呢.js始终处于入门阶段,只好瞎鼓捣. 弄了半天,总算可以了.代码如下: <script type="text ...
seeting菜单界面形成--优化
本文是上一篇文章的优化版: 上文链接地址:http://www.cnblogs.com/zzw1994/p/5016864.html 上文中有很多方法都是过时,并且效率不是很高,主要对JAVA代码进行 ...
python 序列化之JSON和pickle详解
JSON模块 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...
与谷歌测试工程师的对话 - from Google Testing Blog
Conversation with a Test Engineer by Alan Faulner Alan Faulner谷歌的一名测试工程师,他工作在DoubleClick Bid Manager ...

##常用效果css##

##常用效果css##的更多相关文章

随机推荐

热门专题