标签：splay nowrap 设计 位置 style 20px menu type dex
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 class="menu_righttype_ul">
<li><a href="javascript:void(0)">多级别</a>
<ul style="display: block;"><li><a href="javascript:void(0)">111111111111111</a></li>
<li><a>111111111111111 </a>
<ul style="display: block;"><li><a href="javascript:void(0)">522222222222</a></li>
<li><a href="javascript:void(0)">3333333333 </a></li>
</ul>
</li>
</ul>
</li>
</ul>
##常用效果css##
标签：splay nowrap 设计 位置 style 20px menu type dex
原文地址：http://www.cnblogs.com/artjs/p/6259263.html
