over 2 years ago

00:01:50

接續Day 4

.button.button2{ background-position: -130px 0;}
.button.button3{ background-position: -260px 0;}
.button.button4{ background-position: 0 -130px;}
.button.button5{ background-position: -130px -130px;}
.button.button6{ background-position: -260px -130px;}

滑鼠變化

.button.button2:hover{ background-position: -260px 0;}

vertical align

<div class ='head'>
    <span>img</span> im_title
</div>
.head{
    line-height: 60px;
    vertical-align: middle;
}

span{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
}

00:02:20

float/clean/.clearfix(:after)

float:left
文繞圖,文比圖多
圖先找到位置,文再跑去旁邊
會有一個問題(不知道怎麼打)
但是可以用clearfix:after解決
參考:.clearfix:after

.clearfix:after{
    visibility: hidden; //我會佔位置,但是隱藏掉
    display: block; //block是區塊,會從頭延伸到尾,
    font-size: 0px;
    content: ''; //用空格來代替
    clear: both;
    height: 0px;
}

<ul class='clearfix'>就可以解決這一個問題

:after是額外定義的

00:12:00

:before都用在font awesome了

00:14:00

<i class='fa fa-download fa-lg'>
::before
</i>

點::before會看到

.fa-download::before{
    cotent:'\f019';
}

字碼是f019,可以隨便改

00:21:00

開始講position
absolute 會往上去找relatvie,最上一層就是整個body
relative

position: absolute;
之後,會多出來top跟left這兩個屬性。

div{
    padding: 10px;
    margin: 10px;
}

div#layout{
    position: relative; //預設都是static
    width: 300px;
    
    //做會移動的banner時,把凸出去的藏起來
    overflow: hidden;
    //
    z-index: 999; // 數字越大越上面,不過還是沒辦法突破relative那層
}

div#content{
    postition: absolute; //如果.layout沒有設relative,那會繼續往上一層找有relative的,最後就會找到body去。
    top: 100px; //absoulte會多上下左右位置可以寫
    left: 10px;
  
  //會移動的banner,可以這樣設
  width: 100px;
  top: 10px;
  bottom: 10px;
  left: -1200px; //改變這個數字來移動圖檔,要用javascript來拖拉
  //不能用margin-left
  
}
<div id='layout'>
    <div id='content'>
    </div>
</div>

00:33:40

fix

<span class='cart'>buy me</span>
.cart{
    position: fixed;
    right: 10px;
    top: 10px;
}

00:35:40

做一個全螢幕不會跑掉的東西 - Popup Window (iQuery UI Dialog)

<div class= 'layer'></div>
.layer {
    position:fixed;
    top:0px;
  right:0px;
  bottom:0px;
  left:0px;
    background: rgba(0,0,0,0.4);
  z-index:99;
}

00:39:00

CSS打牌規則

inline > id > class > tag

鬼牌!important

ps. div.content可以贏過.content
ps. 寫在後面的.content可以蓋掉寫在前面的.content

.content {
    color:white;
}

.content {
    color:black;
}
//會出現黑色,不過如果變成color:white !important;,就會變成白色

00:48:00

RWD實作

<head>
    <meta name="viewport" content='width=device-width, initial-scale=1'/> 
  //要加這一行,不然手機裡面看到的還是電腦裡面的寬度
<style>
//先把整個架構做好,再去做細節
div, ul, li{
    background:rgba(0,0,255,0.3);
    list-style:none;
    padding:10px;
    margin:10px;
    border-radius:10px;
}
.wapper{
    width:1024px;
    margin: 0 autoo;
    position:relative;
}

.head{
    height:100px;
}

.menu{
    position:absolute; /固定在左邊
    top:140px;
    left:10px;
    width:100px;
    height:300px;
}

.content{
    margin-left:140px;
}

li{
    width:120px;
    height:120px;
    float:left;
}

//把他加在ul<ul class='clearfix'>,這樣才會撐開,不然ul li會怪怪的
.clearfix:after{
    visibility:hidden; //我會佔位置,但是隱藏掉
    display:block; //block是區塊,會從頭延伸到尾,
    font-size:0;
    content:' '; //用空格來代替
    clear:both;
    height:0;
}

RWD的code建議放在原生的code()的最下面

@media all and (min-width: N px) and (max-width: M px) {...}
通常都用max寬。
(A) max-width: 1024 px

@media all and (max-width: 1024 px){
    .wapper{
        width:auto; //因為wapper本來是定寬,改成auto之後,裡面包的東西就會跟著移動
    }
} 

(B) max-width: 768 px

@media all and (max-width: 768 px){
    .menu{ //會由直變橫
        position:static; //就不會往下移
        width:auto;
        height:auto;
    }
    .content{
        margin: 10px;
    }
} 

(C) max-width: 480 px

@media all and (max-width: 480 px){
    .li{
        
        width:100%; //還要再調整
        
    }
    
} 
</style>
</head>
<body>
    <div class='wapper'>
        <div class ='head'>
        </div>
        <div class='menu'></div>
        <div class='content'>
            <ul class='clearfix'>
                <li></li><li></li><li></li><li></li>
            </ul>
        </div>
    </div>
</body>

00:58:00

加上
1.<meta name="viewport" content='width=device-width, initial-scale=1'/>
viewport的寬度是devise的寬,要貼到head裡面

  1. @media all and (min-width: N px) and (max-width: M px){...} 要放在的最下面,先調最大尺寸(A),然侯往小尺寸一路往下設(B),然後用刪去法刪掉不要的

01:04:00

跨瀏覽器策略

01:08:00

bootstrap
Grid system

每個row裡面都分12等份

01:13:45

screen / print的分別

01:15:00

javasript
應該寫在body的最下面

01:19:00

console.log('')

01:21:00

區域變數 var temptemp = '123'
全域變數 temptemp='123'

執行一定要加括號

function hello(){
    var temp1 = 123;
    temp2 = 234
}

所有地方都可以執行temp2,因為他是全域變數,這樣不安全
只有在function hello裡面才可以執行temp1,在這裡面誕生,在這裡面執行完,這樣比較安全

不要隨便設全域變數
可以這樣設:

var temp2;
function hello(){
    var temp1 = 123;
    temp2 = 234;
}
hello();

先在外面把temp2設好,
之後在hello裡面給值去執行

1:25:00

javascript基本型別

ruby : 只有 nil , false為非
Javascript : 0 ,null, undefined , NaN 為非

console.log( 0|| null || undefined || NaN || 1);

只有跑出來1,表示前面的幾個都是非

javascript要寫三個等於 ===

1:32:00

迴圈的使用 for in
javascipt 的array

var temp = [1,3,5,2,9]
far(var i= 0 ; i < temp.length ; i++){
    console.log(temp[i]);
}

會print 出來 1,3,5,2,9

1:33:00

{}在javascipt是object

var temp = {wer : 123, sdf : "hello" , vcx : "kitty"}

for (var key in temp){
    console.log(key , temp[key]);
}

1:38:00

function的建立與使用

RUBY

def temp &block
    block.call(123)
end

temp do |i|
    puts i
end

會跑出來123

結果會跟javascript跑出來的答案一樣

function temp(func){func(123);}
temp(function(1){console.log(i)});也會跑出來123

1:51:00

區域變數的過水

console.log(temp.wer, tem.sdf , temp.vcx)

← RailsFun tw 新手教學 day6 HD RailsFun tw 新手教學 day6 HD →