CSS3

CSS3教學

CSS3

1. 超過行數顯示…

CSS3寫法

1
2
3
4
5
6
7
8
9
10
overflow: hidden
text-overflow: ellipsis
display: -webkit-box

//超過2行顯示...
-webkit-line-clamp: 2

-webkit-box-orient: vertical
word-break: break-all
-webkit-box-orient: vertical

jQuery寫法

1
2
3
4
5
6
7
8
9
function wordlatest(len, target) {

    $(target).each(function() {
        if ($(this).text().length > len) {
            var text = $(this).text().substring(0, len - 1) + "...";
            $(this).text(text);
        }
    });
}

2. px轉換成rem語法(SASS)

CSS3寫法

1
2
3
4
5
6
7
8
$browser-default-font-size: 16px !default

html
    font-size: $browser-default-font-size


@function rem($px)  //rem可以改成你想使用的名稱
    @return $px / $browser-default-font-size * 1rem

使用方法

1
font-size: rem(24px)

3. Ajax呼叫

1
2
<div class="test" data-show="forgetPw.html">test</div>
<div class="showContent"></div>

呼叫data-show

1
2
3
4
5
6
7
$('.test').click(function() {
        var path = $(this).data('show')
        $.ajax({
            url: path,
        }).done(function(data) {
            $('.showContent').append(data);
            });

4. after後 繼承父元素顏色

說明

5. 錨點

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var ItemsAction = function(item, action) {
        $(window).scroll(function() {
            var scrollPos = $(window).scrollTop();
            var windowHeight = $(window).height();
            $(item).each(function() {
                var thisPos = $(this).offset().top;
                if ((windowHeight + scrollPos) >= thisPos + 200) {
                    $(this).addClass(action);
                }
            });
        });
    }


    function scroll_down(){
        var frame = $('.for_scroll'),
            frame_banner = $('.for_scroll').find('.lbox_banner');    
        if ( $('.for_scroll .scroll_down').length > 0 ) {    
            $('.for_scroll .scroll_down span').on('click',function(event){    
                event.preventDefault();    
                var a = frame_banner.outerHeight();    
                frame.animate({ scrollTop: a }, 700);        
            });            
        }    
    }
    $("a[href*=#]:not([href=#])").click(function() {
        var target = $($(this).attr('href')).offset().top;

        $('html, body').animate({ scrollTop: target }, 500)
        return false;
    });

6. safari 卷軸不順暢問題

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
添加CSS

1
-webkit-overflow-scrolling: touch

7. 更改input placeholder顏色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* 背景透明 */
background-color: transparent

/* placeholder color */

/* chrome */
input::-webkit-input-placeholder 
/* firefox 18- */
input:-moz-placeholder  
/* firefox 19+ */
input::-moz-placeholder  
/* IE */
input:-ms-input-placeholder

/* focus color */

/* chrome */
input:focus::-webkit-input-placeholder
/* firefox 18- */
input:focus:-moz-placeholder  
/* firefox 19+ */
input:focus::-moz-placeholder   
/* IE */
input:focus:-ms-input-placeholder

8. 只有IE才會吃的css

參考 https://ithelp.ithome.com.tw/articles/10196809

1
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

9. 選擇空元素

第2行的p段落沒填寫資料，所以會被隱藏

1
2
3
<p>123</p>
<p></p>
<p> </p>
1
2
3
p:empty{
display: none;
}
分享到