2017年12月7日 星期四

在html使用類似background-size的效果

          沒有留言
http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

.box { width: 160px; height: 160px; margin: 10px 0 20px; background-color: #beceeb; overflow: hidden; resize: both; }
.box > img {width: 100%; height: 100%; background-color: #cd0000;}
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
Share:
Read More

2017年12月4日 星期一

梯形

          沒有留言
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="trapezoid">
  </div>
</body>
</html>


.trapezoid{
   background-image: url(../image/bg.jpg);
   color: white;
    width: 0;
    border-left: 1600px solid transparent;
    border-bottom: 50px solid white;
}


Share:
Read More

2017年12月3日 星期日

2017年10月18日 星期三

交叉排版

          沒有留言

 <div class="row">
                        <div class="col-md-6 col-md-push-6">
                            <img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder" class="img-responsive">
                        </div>
                        <div class="col-md-6 col-md-pull-6">
                            <div class="product_text right">
                                <p class="sub_title">雲端版</p>
                                <p class="text">風景新浪如果你一是搭配長大神話用品街道主角貸款空，有權針對旁邊一面請點擊到我，這場擁有質量組織有人。</p>
                            </div>
                        </div>
                    </div>
Share:
Read More

2017年9月24日 星期日

Copyright © 米煎的學習筆記 Mi-Jian's Note | Powered by Blogger
Design by ShapedTheme | Blogger Theme by NewBloggerThemes.com