码迷,mamicode.com
首页 > Web开发 > 详细

css常见效果

时间:2015-10-15 12:33:27      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

1.ul li居中

/* ul li以横排显示 */

/* 所有class为menu的div中的ul样式 */
div.menu ul
{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
    float:left; /* 向左漂移,将竖排变为横排 */
}
/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71; /* 背景色 */
    border: 1px #4e667d solid; /* 边框 */
    color: #dde4ec; /* 文字颜色 */
    display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
    line-height: 1.35em; /* 行高 */
    padding: 4px 20px; /* 内部填充的距离 */
    text-decoration: none; /* 不显示超链接下划线 */
    white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
div.menu ul li a:hover
{
    background-color: #bfcbd6; /* 背景色 */
    color: #465c71; /* 文字颜色 */
    text-decoration: none; /* 不显示超链接下划线 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
div.menu ul li a:active
{
    background-color: #465c71; /* 背景色 */
    color: #cfdbe6; /* 文字颜色 */
    text-decoration: none; /* 不显示超链接下划线 */
}

前台html

<div class="menu">
        <ul>
            <li><a href="javascript:void(0);">主页</a></li>
            <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>
    </div>

 

2.选择第一个子元素

有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。

    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

这时如果能排除第一个元素,并给其他元素设置margin-left属性,就能实现比较好的效果了。可以利用notfirst-child,通过下面的CSS实现。

    div > span :not(:first-child) {
        margin-left:10px
    }

还可以利用兄弟元素选择器+,像这样:

    div > span + span {
        margin-left:10px
    }

如果HTML是这样的,应该怎么做呢?

    <div>
        <span></span>
        <p></p>
        <span></span>
        <span></span>
    </div>

其实也很简单,用通配符就可以了:

    div > * :not(:first-child) {
        margin-left:10px
    }

 

3.子元素在父元素中上下居中

.denglu-chenggong {
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    padding: 30px 0px;
    border-radius: 5px;
    background: #FFFFFF;
}
.denglu-bg {
    text-align: center;
    height: 100%;
}
.denglu-bg:before {
    content: ‘‘;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.denglu-cgtu {
    width: 50px;
    margin: 10px auto;
}
.denglu-cgtu img {
    width: 50px;
}

 

css常见效果

标签:

原文地址:http://www.cnblogs.com/tylerdonet/p/4881971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!