2018年7月9日 星期一

【網頁切版】表單的類型 input.email+tel+number


input的類型

  • 主要在手機版比較好輸入
 <input type="email" > <input type="tel" >
<input type="number">
​
於 沒有留言:
標籤：

【RWD】Pure框架


Pure

  • 輕量級的框架
  • 原檔案：包含reset+樣式
  • core檔案：通常是一些對瀏覽器的Reset，沒有樣式
  • min檔案：原檔案的壓縮低配版

原則

  • 不要改別人的framework，而是另外建立class，寫自己的CSS覆蓋
.myform .pure-form-stacked .pure-form-margin {   

//自己的class，前面的也寫，是為了之後看得懂這個CSS在哪裡
    margin: 1em 0;
}
​

於 沒有留言:
標籤：

2018年7月2日 星期一

【RWD】議題(2)：表格太長怎麼辦


方法1：把不重要的資訊弄掉

<tr>
                <td  class="m-none">2000001</td>
                <td>2018/02/05</td>
                <td>王小名</td>
                <td>冰箱</td>
                <td>20000</td>
                <td  class="m-none">  //增加class
                    <input type="button" value="修改">  
                    <input type="button" value="刪除">
                </td>
 </tr>

@media(max-width: 560px){
    .m-none{
        display: none
    }
}
//讓他在特定的大小以下，就消失

方法2：使用overflow-x:auto

*用一個div.container把table包起來，然後設定overflow-x:auto
  • table本身設定一個不錯的寬度
<div class="container">
        <table class="order">
           //省略
        </table>
 </div>

@media(max-width: 560px) {
    .container {
        overflow-x: auto;
    }
    .order {
        width: 1000px;
    }
}
​
於 沒有留言:
標籤： ,

【RWD】起手式：斷點、container、Viewport、max-width、%數


標準原則

  • 不可以出現X軸
  • 觸控高度一定要44px
  • 不要太寬，不要太擠

熱門斷點

  • PC:1280px / 960px
  • ipad:768px
  • iphone:375px

重點

外圍：width 100%
中間：container固定為max-wisth: 960px or 1280px（然後margin auto）

高度問題

區塊高度不ㄧ樣
解法：height寫死，然後等到變成單欄在height:auto
PC版header的高度height可以寫死
（header本來就不會莫名其妙多出內容）
但等到mobile變成單欄要改成height:auto

Viewport

強制讓螢幕解析度等於載具寬度
<meta name="viewport" content="width=device-width, initial-scale=1.0">

media

@media (max-width:375px) {
    #title {
        color: black;
    }
}

width→max-width（超好用）

.wrap {
    max-width: 900px;
    margin: 0 auto;
}

%數（會根據父元素計算）

三欄式寫法
.news li {
    width: 31.3333%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1em;
    float: left;
}

@media(max-width:780px) {
    .news li {
        width: 48%;
    }
}

@media(max-width:375px) {
    .news li {
        width: 99%;
    }
}
​

於 沒有留言:
標籤： ,

【JavaScript DOM編程藝術】Ch4:childNodes+nodeType+nodeValue+firstChild+lastChild 圖片加載範例


getAttribute、setAttribute

getAttribute：可以「得到」節點特定屬性的值
setAttribute：可以「改變」節點特定屬性的值

childNodes

可以獲得「子節點們的數組」，然後會發現子節點比想像的多
那是因為幾乎頁面中所有東西（包括換行、空白符號）都會變成節點
node有三種
1.元素節點
2.屬性節點
3.文本節點
 window.onload = getchild
        function getchild() {
            var childrennode = document.querySelector("body").childNodes
            console.log(childrennode)
        }

nodeType

nodeType：可以得到節點的類型
1代表「元素節點」
2代表「屬性節點」
3代表「文本節點」

nodeValue

nodeValue可以用來得到「節點的值」
<p id=“chos”>選擇圖片</p>

<script>
 var chos = document.querySelector("#chosepic")
 console.log(chos.nodeValue)  //不會得到東西，因為chos是P標籤，而P標籤沒有屬性
 console.log(chos.childNodes[0].nodeValue)  //我們想要的是Ｐ標籤的子節點（文本節點）的屬性
</script>

圖片加載

<body>
    <h1>練習</h1>
    <ul>

        <li>
            <a title="nissen" onclick="change(this);return false;" href="./img/01.jpg">照片一</a>
        </li> //return false可以阻止事件發生，this可以把自己當參數傳回去function
        <li>
            <a title="light" onclick="change(this);return false;" href="./img/02.jpg">照片二</a>
        </li>
        <li>
            <a title="dark" onclick="change(this);return false;" href="./img/03.jpg">照片三</a>
        </li>
    </ul>
    <img id="placeholder" src="./img/02.jpg" alt="">
    <p id="chosepic">選擇圖片</p>
    <script>
        function change(picsrc) {
            var source = picsrc.getAttribute("href") /
            var placeholder = document.querySelector("#placeholder")
            var text = picsrc.getAttribute("title")
            var chosepic = document.querySelector("#chosepic")
            placeholder.setAttribute("src", source)
            chosepic.firstChild.nodeValue = text
        }
    </script>
</body>
​
於 沒有留言:
標籤： ,

【JavaScript DOM編程藝術】Ch2：JavaScript語法




．最好引入script的標籤是放到<BODY>的標籤尾端(而不是head裡面)，這樣可以更快加載網頁

．程式語言分為「解釋型」、「編譯型」兩大類，Java/C++等語言需要一個編譯器，編譯器是一種程序，能夠把高級語言編寫出來的代碼直接在電腦上執行(因此寫的時候如果有錯，可以馬上被發現) ex:英文是一種解釋型語言
．「解釋型」的語言不需要編譯器，他只需要解釋器(必須等到執行時，才能發現是否有錯誤)
．「編譯型」語言往往速度更快，可移植行更好

．一般命名常用格式是「底線」Person_tall
．函式名、方法名、對象屬性常用的命名格式是「駝峰」 OnClick

．反斜線並不是字串的一部分 「\」，他是一種跳脫字元

．數組的聲明

(1)Var battles = Array(4)  可以先聲明數組的長度，然後再填入東西
battles[0]=1
battles[1]=2
battles[2]=3
battles[3]=4

(2)Var battles = Array("1"."2","3","4")

(3)Var battle= [1,2,3,4]  可一一次弄進去

．關連數組，可以用字串代替數字，但是這不是一種好習慣，不如使用物件就好

Var battles = new Array()
battles["name"]="Jonny"
battles["age"]=18
battles["living"]=false

．物件宣告

(1)Var battles = new Object()
battles.name="Jonny"
battles.age=18
battles.living=false

(2) battles={
battles.name="Jonny",
battles.age=18,
battles.living=false
}

．+= 一次完成加法和賦值

．函數不僅可以接受數值，還可以返回數值，並當成變數來使用(藉由return)

．作用域(Scope):如果使用var，那個變量就會根據上下文變成區域變數(一個缺乏var的變數會是全局變數)

．

【內建對象】:JS當中有許多內建對象Object，像是數列Array其實就是

var battles= new Array()
其實就是增加了一個Array的物件
因此battles.length可以查詢長度(因為length是這個物件的一個屬性)

var current_date= new Date()
也是增加了一個Date的物件
因此可以使用Date.getDay()各種方法(因為getDay()是物件的一個方法)

【宿主對象】

上述都是JS預定好的對象，但瀏覽器本身其實也會提供一些對象，這些稱為宿主對象。例如document對象
 

於 沒有留言:
標籤：

2018年7月1日 星期日

【RWD】議題(1)選單要怎麼做啊？左固定，右自適應


左固定，右自適應

  • wrap用max-width
  • 左邊的menu用Float
  • 右邊的內容就用margin-left推
 <div class="wrap">

        <div class="menu">
            <ul>
                <li>電腦</li>
                <li>書本</li>
                <li>食物</li>
            </ul>
        </div>
        <div class="content">....一堆內容</div>
    </div>


.wrap {
    max-width: 980px;
    margin: 0 auto;
}

.menu {
    width: 200px;  //可以寫死
    float: left;    //浮動
    border: 1px solid #000;
}

.content {
    padding: 10px;
    margin-left: 200px;  //往右推200px，然後寬度隨父元素自適應
    background-color: orange;
}
​



選單至上

@media(max-width:780px) {
    .menu {
        float: none;    //清除浮動
        width: 100%;   //讓選單變成100%
    }
}

@media(max-width:780px) {
    .content {
        margin-left: 0px;  //清除右推
    }
}
​




於 沒有留言:
標籤：
訂閱： 文章 (Atom)

【JavaScript】用物件Mapping的方法

If的寫法 我們希望當變數是a時就回傳1，變數是b就回傳2，變數是c就會回傳3，一般寫法就是用if，但是這樣會很冗 ​ // IF style var word if(word == 'a'){ word = 1 } else if...