css常見效果

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; /* 向左漂移，將豎排變?yōu)闄M排 */
}
/* 所有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; /* 對于文本內的空白處，不會換行，文本會在在同一行上繼續(xù)，直到遇到 <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>

w3c上的例子

<html>
<head>
<style type="text/css">
ul
{float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;}
a{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
在上面的例子中，我們把 ul 元素和 a 元素浮向左浮動。li 元素顯示為行內元素（元素前后沒有換行）。這樣就可以使列表排列成一行。ul 元素的寬度是 100%，列表中的每個超鏈接的寬度是 7em（當前字體尺寸的 7 倍）。我們添加了顏色和邊框，以使其更漂亮。
</p>

</body>
</html>

2.選擇第一個子元素

有時候我們需要用CSS選擇非第一個子元素，例如下面這樣的HTML，希望讓兩個span之間間隔一定的距離，但又不希望簡單的給每個span設置margin-right（會導致最后一個span也有margin-right，可能影響之后元素的排版）。

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

這時如果能排除第一個元素，并給其他元素設置margin-left屬性，就能實現比較好的效果了。可以利用not和first-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;
}

3.帶放大鏡的搜索文本框

效果如上圖，就是在搜索框中加上一個小的放大鏡圖標

<div class="header">
                <span id="hide-pop" class="headleft" style="width:15%"><span class="back"><b class="icon-back"></b></span></span>
                <span class="tbbiaoti" style="width:65%;overflow: hidden;">
                    <div class="search" id="searchdiv">
                        <!--placeholder="搜索您喜歡的店鋪/商品"-->
                        <p><input id="searchinput" type="text" class="sskuang"></p>
                    </div>    
                </span>
                <span id="search_button" class="headright" style="width:20%">
                    <span class="quxiao qxzd">搜索</span>
                </span>
</div>

.sskuang {
    width: 100%;
    display: block;
    border: none;
    height: 30px;
    border-radius: 2px;
    background: url(../images/ssan.png) 10px no-repeat;
    -webkit-background-size: 16px 18px;
    font-size: 0.7em;
    color: #5E5E5E;
    padding-left: 35px;
}

小圖標如下：

4.一組輸入框的樣式

/**************所有下拉框的樣式 沒有寬度 高度****************/
input, select, button, textarea {-webkit-appearance: none;}

select {
    text-align:center;
    border:none; 
    border-bottom: 1px solid #e5e5e5;
    -webkit-box-sizing:border-box;
    box-sizing:border-box; 
    background-color:#FFFFFF;
    color:#333;
    border-radius:0px;
    height: 2.5em;
    font-size:1.8em;
    margin:0;
    margin-top:-5px;
    padding:0;
}

input[type=checkbox] {
    -webkit-appearance:checkbox;
    -webkit-transform: scale(1.5,1.5);
    display:inline-block; 
    font-size:1em; 
    width:1.0em; 
    height:1.0em; 
    line-height:1.0em; 
    padding:0; 
    margin:0.5em; 
}
input[type=radio] {
    -webkit-appearance:radio;
    -webkit-transform: scale(1.5,1.5);
    display:inline-block; 
    font-size:1em; 
    width:1.0em; 
    height:1.0em; 
    line-height:1.0em; 
    padding:0; 
    margin:0.5em; 
}

5.虛線效果如下

代碼如下：

            <div class="recommend contact_right" style="margin-left: 260px;">
                <h2 class="recommend_tit yin_font1"> {{trans('base.Rrecommend')}}</h2>
                <ul>
                    @foreach($recommends as $recommend)
                        <li>
                            <a href="{{url('/product/detail/'.$recommend->id)}}">
                                <?php $pic = explode(',', $recommend->pic)[0] ?>
                                <img src="{{asset('img/type-'.$pic.'/180-180"')}}"/>
                                <p>{{"zh_cn" == $lang ? $recommend->name_cn : $recommend->name}}</p>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

.recommend_tit:after{ border-top:5px dashed #ff6e30; content: " "; width: 730px; height: 3px; display: inline-block; margin-left: 2px;}

posted @ 2015-10-15 11:53 nd 閱讀(907) 評論(1) 收藏舉報

刷新頁面返回頂部

css常見效果

公告