css常用技巧1
css绘制三角形
<style>
.triangle-box{
margin: 50px auto;
height: 300px;
width: 500px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
position: relative;
}
.triangle{
position: absolute;
top: 10px;
left: 20px;
border-width: 30px;
border-color: #c2c2c2 transparent transparent transparent;
border-style: solid;
transition: all 0.5s;
-webkit-transition: all 0.2s;
/*设置旋转重心*/
transform-origin: 30px 15px;
}
.triangle:hover{
transform: rotateZ(180deg);
}
</style>
<div class="triangle-box">
<span class="triangle"></span>
</div>
知识点
border
- border-color: #c2c2c2 transparent transparent transparent;
transparent：透明
transition:all 0.2s
动画效果，all指的是所有属性，如width、transform等
transform-origin: 30px 15px;
修改坐标原点位置
transform:rotateZ(180deg);
沿着Z轴旋转180°
css制作下拉菜单
<style>
*{
padding: 0; margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: white;
}
.nav-box{
height: 50px;
}
/*一级导航*/
ul.nav{
display: flex;
height: 100%;
}
ul.nav>li{
background-color: #ccc;
box-sizing: border-box;
width: 150px;
height: 100%;
line-height: 50px;
text-align: center;
position: relative;
}
.nav>li:hover{
background-color: #c3c3c3;
cursor: pointer;
font-weight: bold;
}
ul.nav>li>a{
display: block;
height: 100%;
width: 100%;
z-index: 10;
}
/*二级导航*/
ul.sub-nav{
position: absolute;
width: 100%;
display: none;
z-index: 100;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
transition: all 2s;
}
ul.sub-nav>li{
background-color: #c1c1c1;
box-sizing: border-box;
border-top: 1px solid white;
}
@keyframes moveUp {
from{
top: 55px;
opacity: 0;
}
to{
top: 50px;
opacity: 1;
}
}
/*显示二级导航，关键的地方*/
ul.nav>li>a:hover+ul,ul.sub-nav:hover{
display: block;
animation: moveUp .3s ease;
}
</style>
<div class="nav-box">
<ul class="nav">
<li>index</li>
<li>
<a href="javascript:void(0);">contact</a>
<ul class="sub-nav">
<li>111</li>
<li>222</li>
</ul>
</li>
<li>about</li>
</ul>
</div>
知识点
父相子绝，子元素附属于父级元素
li.item{position: relative;}
li.item>ul{position:absolute;}
关键点
当鼠标移动到contact时，触发a的hover事件，显示二级菜单；
当鼠标移动到二级菜单时，触发二级菜单【ul】的hover事件，显示自身；注意这里有个临界值，父级容器和子集必须有重叠的地方，可以在子元素中使用padding-top来填充，来实现表面上分离的效果。
动画
二级菜单从隐藏【display:none】到显示，需要一个动画。
注意：对于display：none的元素不能使用transition动画，否则无效果，必须使用animation属性来定义
左侧导航栏
<style>
*{
padding: 0; margin: 0;
list-style: none; text-decoration: none;
}
body,html{
height: 100%;
}
body{
display: flex; flex-direction: column;
}
.header{
display: flex; justify-content: center; align-items: center;
height: 80px;
background-color: #d1d1d1;
}
.main{
display: flex;
height: 100%;
}
/*左侧导航栏, 外侧隐藏溢出，固定宽度*/
.side{
width: 200px;
height: 100%;
background-color: #20222A;
overflow: hidden;
position: relative;
}
/*中间，使用绝对定位，不指定宽度*/
.side-scroll{
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
}
/*.side-scroll::-webkit-scrollbar{*/
/* display:none;*/
/*}*/
/*内容指定宽度*/
ul.side-nav{
width: 200px;
}
/*a*/
.side-nav a{
color: white; display: flex;
height: 56px;width: 100%;
justify-content: left; align-items: center;
box-sizing: content-box;
padding-left: 30px;
}
/*一级li*/
ul.side-nav>li{
/*height: 56px;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
/*右侧内容*/
.content-box{
height: 100%; flex: 1;
}
</style>
<div class="header">
header
</div>
<div class="main">
<div class="side">
<div class="side-scroll">
<ul class="side-nav">
<li>
<a href="javascript:void(0);">主页</a>
</li>
<li>
<a href="javascript:void(0);">组件</a>
<ul class="nav-child">
<li><a href="javascript:void(0);">控制台</a></li>
<li><a href="javascript:void(0);">主页一</a></li>
<li><a href="javascript:void(0);">主页二</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">组件</a>
<ul class="nav-child">
<li><a href="javascript:void(0);">控制台</a></li>
<li><a href="javascript:void(0);">主页一</a></li>
<li><a href="javascript:void(0);">主页二</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">组件</a>
<ul class="nav-child">
<li><a href="javascript:void(0);">控制台</a></li>
<li><a href="javascript:void(0);">主页一</a></li>
<li><a href="javascript:void(0);">主页二</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content-box">
content
</div>
</div>
文本溢出
显示省略号
<style>
*{
font-size: 18px;
}
div{
margin: 90px; width: 300px; height: 5em; border: 1px solid #ccc;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
</style>
<div>
用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属用来限制在一个块元素显示的文本的行数。
为了实现该效果，它需要组合其他的WebKit属性。常见结合属
</div>
- 只能单行显示
- 多行显示，使用定位，伪元素，兼容除ie6-7
<style>
*{
font-size: 18px;
}
div{
margin: 90px; width: 300px; height: 5em; line-height: 1; position: relative;
border: 1px solid #ccc;
overflow: hidden; text-overflow: ellipsis;
}
div:after{
content: '...';
position: absolute; right: 0; bottom: 0; padding-left: 3em;
font-weight: bold;
background: -webkit-linear-gradient(left, transparent, #fff 62%);
background: -o-linear-gradient(right, transparent, #fff 62%);
background: -moz-linear-gradient(right, transparent, #fff 62%);
background: linear-gradient(to right, transparent, #fff 62%);
}
</style>
<div>
用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属用来限制在一个块元素显示的文本的行数。
为了实现该效果，它需要组合其他的WebKit属性。常见结合属
</div>
