前端笔记-1

前端写法，记录敲前端的写法：

大部分的功能都可以在W3C HowTo找到答案，本来想多打几遍，不过时间不允许，想到最好的方法就是拿来用，就直接在里面找自己想要实现的功能吧。

页面元素的position

css position

边框无色写法

border-color:transparent;

图片相关

responsive web design

给图片加个class:img-responsive 实现随页面变动的样式

z-index是什么？

元素的层叠

这个有什么用呢？如果有元素是position:fixed，就有用了，因为它是页面固定的

li前面小圆点的删除

      
      
       
       li{
      
      
      
        
       
       list-style:none;
      
      
      
      
       
       }

可以消除小圆点

dropdown 的内置padding是左右20px

所以它的width至少要150px，否则会出现乱位置。

google material icon

在applicaiton.html.erb的head里面加入

1 2	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel= "stylesheet">

实现google icon的使用

material icon size

      
       
      
      
      
      
       
       .material-icons
       
       .md-18 { 
       
       font-size: 
       
       18px; }
      
      
      
      
       
       .material-icons
       
       .md-24 { 
       
       font-size: 
       
       24px; }
      
      
      
      
       
       .material-icons
       
       .md-36 { 
       
       font-size: 
       
       大专栏  前端笔记-1umber">36px; }
      
      
      
      
       
       .material-icons
       
       .md-48 { 
       
       font-size: 
       
       48px; }
      
      
      
      
      
      
       
       /* Rules for using icons as black on a light background. */
      
      
      
      
       
       .material-icons
       
       .md-dark { 
       
       color: 
       
       rgba(0, 0, 0, 0.54); }
      
      
      
      
       
       .material-icons
       
       .md-dark
       
       .md-inactive { 
       
       color: 
       
       rgba(0, 0, 0, 0.26); }
      
      
      
      
      
      
       
       /* Rules for using icons as white on a dark background. */
      
      
      
      
       
       .material-icons
       
       .md-light { 
       
       color: 
       
       rgba(255, 255, 255, 1); }
      
      
      
      
       
       .material-icons
       
       .md-light
       
       .md-inactive { 
       
       color: 
       
       rgba(255, 255, 255, 0.3); }

<i class="material-icons md-18">face</i>

不过这个太小了，这么写明细变大了

      
      
       
       .material-icons{
      
      
      
        
       
       font-size: 
       
       58px;
      
      
      
      
       
       }

或者这样写

<i class="fa fa-cloud" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i>