杂七杂八

杂七杂八

px | em | rem

px:像素,绝对长度单位;相对于显示屏幕分辨率而言

em:相对长度单位;相对于父级元素文本的字体尺寸

rem:相对长度单位;相对于HTML根元素

为了简化换算,可用的办法举例:

 html { font-size:62.5%; /*10÷16=62.5%*/}
 body { font-size:12px; font-size:1.2rem; /*12÷10=1.2*/ }
 p { font-size:14px; font-size:1.4rem; /*14÷10=1.4*/ }

父级对象高度

当一个div有三个子元素且左右两个都浮动时,怎样让其高度取决于三个子元素中最高的高度?

  1. 设置父对象中 min-height: 值px;
  2. 设置overflow:auto;(个人觉得不太好)

border-radius属性

border-radius: 1-4 length|% / 1-4 length|%; (缩写格式)

如果”/”前后值都设置,那么”/”前面的值设置其水平半径,”/”后面的值设置其垂直半径;
若没有”/”,则水平半径值等于垂直半径值。其值按照top-left、top-right、bottom-right、bottom-left的顺序。

border-radius : 25px;/*四个值相等均为25px*/
border-radius : 25px 30px;/*top-left=bottom-right=25px;top-right=bottom-left=30px*/
border-radius : 25px 30px 35px;/*top-left=25px;top-right=bottom-left=30px;bottom-right=35px;*/
border-radius : 25px 30px 35px 40px;/*top-left=25px;top-right=30px;bottom-left=35px;bottom-right=40px;*/


border-top-left-radius:          //左上角
border-top-right-radius:         //右上角
border-bottom-right-radius:      //右下角
border-bottom-left-radius:       //左下角
/*拆分式中第一个值是圆角水平半径,第二个值是圆角垂直半径,若第二个值省略,这时角就是一个四分之一的圆角*/

css画三角形

一般在布局的时候会有小三角形引的二级导航框会用到

html代码

<div id="re"></div>

样式

#re {
    width: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid yellow;
}

导航菜单旋转效果

就是熟悉了一下transform属性吧可以说,效果好像也不是很好看:p

html代码

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
</ul>

样式

ul {
    display: block;
    background-color: red;
}
ul li {
    display: inline-block;
    list-style-type: none;
    transform-style: preserve-3d;
    perspective: 800px;
}
ul li a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 24px;
    line-height: 20px;
    padding: 15px 10px;
}
ul li a:hover{
    -ms-transform:rotateX(360deg);     /* IE 9 */
    -moz-transform:rotateX(360deg);    /* Firefox */
    -webkit-transform:rotateX(360deg); /* Safari 和 Chrome */
    -o-transform:rotateX(360deg);  /* Opera */
    transition: 5s;
    background-color: yellow;
}
and and and 我真的不知道写博客到底要写啥(……….略略略)
阅读更多
个人分类: css
想对作者说点什么? 我来说一句

自己学习用的代码,很乱的东西

2010年06月28日 15.96MB 下载

java杂七杂八 java杂七杂八

2011年07月01日 4.21MB 下载

linux 杂七杂八的资料

2010年06月11日 65KB 下载

Jersey框架搭建Rest服务

2011年06月30日 2.83MB 下载

杂七杂八的测试资料

2011年12月13日 47.03MB 下载

java面试汇总集合第一弹

2009年06月17日 1.07MB 下载

java面试题

2015年12月24日 186KB 下载

没有更多推荐了,返回首页

不良信息举报

杂七杂八

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭