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 Hack
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- jS事件之网站常用效果汇总
下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!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 ...
随机推荐
- std::cout彩色输出
Mac OS效果 Windows 效果 想写这个东西其实是因为最近要写个命令行的工具,但是有个问题是什么呢?就是传统的那个黑漆漆的窗口看起来很蛋疼.并且完全看不到重点,于是就想起 来这么一个东西.相对 ...
- Git 从服务器取得最新代码覆盖本地
第一种方法 git fetch --all git reset --hard origin/master git fetch下载远程最新的, 然后,git reset master分支重置 第二种方法 ...
- 让chrome打开手机网页
在chrome快捷方式上点右键: "C:\Program Files\Google\Chrome\Application\chrome.exe" -user-agent=" ...
- DirectDraw打造极速图形引擎(Alpha混合)
显然DirectDraw是Windows下写2D图形程序的最好选择,虽然Direct3D也可以写,但是没DirectDraw简单方便,特别对于初学者,一来就接触那么多函数和参数总不是件愉快的事,所以我 ...
- 远程DLL注入
界面如下: 关键部分代码如下: void CInjectDllDlg::OnBnClickedButtonInject() { // TODO: 在此添加控件通知处理程序代码 UpdateData(T ...
- C++ STL 简单记录
1,STL提供三种类型的组件:容器.迭代器.算法. 容器: 顺序容器(vector.list.deque.string等)是一系列元素的有序集合: 关联容器(set.multiset.map.mult ...
- s3c6410_uart初始化及读写
参考: 1)<USER'S MANUAL-S3C6410X>第31章 UART 2)u-boot uart初始化及读写:u-boot-x.x.x/board/samsumg/smdk641 ...
- Sqlserver2005附加数据库为只读的解决方法
在sqlserver2005中附加数据库时,附加的数据库会变成只读的,只能进行查询操作. 解决方法 1 打开SqlServer Configuration Manager 开始->Micro ...
- C#代码利用MongoDB中Group聚合函数查询
例子: public static void getUserRFM(DateTime beginTime, DateTime endTime) { MongoDat ...
- 使用mitmf 来绕过HSTS站点抓取登陆明文
使用mitmf 来绕过HSTS站点抓取登陆明文 HSTS简介 HSTS是HTTP Strict Transport Security的缩写,即:"HTTP严格安全传输".当浏览器第 ...
