十堰H5網站開(kāi)發的18個技術總結

       華想科技十堰HTML5網站制作給大(dà)家分(fēn)享一(yī)篇HTML5開(kāi)發後，自己做的一(yī)些知(zhī)識總結。

 

 

1

字體(tǐ)推薦寫法

 

 

由于每個人的審美不一(yī)樣，鍾愛的字體(tǐ)也會有所有不同，這裏給出我(wǒ)個人的常用寫法：

 font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
小(xiǎo)米寫法

*{font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

}

Html{

overflow-x:hidden

}

 

2

圖片放(fàng)大(dà)效果

 

 

.entertainment span img {

      transition: all 0.3s ease 0s;

}               

.entertainment span:hover img {

      transform: scale(1.3, 1.3);

}

 

3

媒體(tǐ)查詢法做響應式

 

 

@media (min-width:800px) and (max-width:1200px) { ... }

 

 

4

随機數

 

 

function getRand (max,min) {

      var num=parseInt(Math.random()*(max-min))+min;

      return num;

}

直接調用getRand(a,b),即可得到随機數

 

5

判斷浏覽器類型

 

 

if(navigator.userAgent.indexOf('Firefox') >= 0) {

      this.pic.addEventListener("DOMMouseScroll", scroll,false)

}

if(navigator.userAgent.indexOf('Firefox') <0){

      this.pic.onmousewheel = function(event) {

          scroll(event);

      }

}

 

6

判斷不同浏覽器滾輪事上下(xià)的不同

 

 

function scroll (event) {

if (event.detail>0||event.wheelDelta<0) {

           i++;

           if (i>3) {

                 i=0;

           }

           _this.img.src="img/"+_this.imgArr[i];

           }

      if (event.detail<0||event.wheelDelta>0) {

           i--;

           if (i<0) {

           i=3;

           }

      _this.img.src="img/"+_this.imgArr[i];

      }

      event.preventDefault();

      }

 

7

文字換行問題

 

 

   ❶如何使連續的長字符串自動換行

#test {

    width: 150px;

    word-wrap: break-word;//是否允許浏覽器在單詞内進行斷句

}

   ❷如何使文本溢出邊界不換行強制在一(yī)行内顯示 

  #test {

      width: 150px;

      white-space: nowrap;//規定段落中(zhōng)的文本不進行換行

  }

   ❸如何使文本溢出邊界顯示爲省略号 

#test {

    width: 150px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;// 屬性規定當文本溢出包含元素時爲省略号

}

 

8

如何清除圖片下(xià)方出現幾像素的空白(bái)間隙

 

 

方法1

img {

    display: block;

}

方法2

img {

    vertical-align: top;

}

方法3

// #test爲img的父元素

#test {

    font-size: 0;

    line-height: 0;

}

 

9

段落首字下(xià)沉first-letter

 

 

// 你可以創建一(yī)個下(xià)沉效果，如在報紙(zhǐ)或雜(zá)志(zhì)的使用

 p::first-letter {

    margin: 5px 0 0 5px;

    float: left;

    color: #FF3366;

    font-size: 3.0em;

}                                         

 

10

 如何在文本框中(zhōng)禁用中(zhōng)文輸入法

 

 

input, textarea {

    ime-mode: disabled;

}

 

11

CSS中(zhōng)的簡單運算

 

 

  // 通過CSS中(zhōng)的calc方法可以進行一(yī)些簡單的運算，從而達到動态指定元素樣式的目的。

   #test {

      background-position: calc(100% - 50px)  calc(100% - 20px);

  }

      calc()能讓你給元素的做計算，你可以給一(yī)個div元素，使用百分(fēn)比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% - 2px)”，這樣一(yī)來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由浏覽器去(qù)計算。

       calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，但在移動端

-moz-calc(expression);

-webkit-calc(expression);

 

 

12

h1标簽

 

 

web标準中(zhōng),同一(yī)頁面中(zhōng)隻能有一(yī)個h1标簽.很多人知(zhī)道這個概念,但做到的卻很少;

 

13

禁止右鍵點擊

 

 

禁止右鍵點擊

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

 

14

 使用 max width 和 height 來調整 image 比例

 

 

我(wǒ)們看到這張圖本來的比例大(dà)小(xiǎo)爲寬 228 高 320，但是經過下(xià)面 CSS 語法

1. img {   

2.     width: 228px;   

3.     height: 228px;   

4. }  

 

圖片就變了，但是如果我(wǒ)們把 CSS 改成底下(xià)呢：

Css代碼

1. img {   

2.     max-width: 228px;   

3.     max-height: 228px;   

4. }  

 

15

百度分(fēn)享

 

 

http://share.baidu.com/code

 <div><a href="#" data-cmd="more"></a><a href="#" data-cmd="qzone" title="分(fēn)享到Q空間"></a><a href="#" data-cmd="tsina" title="分(fēn)享到新浪微博"></a><a href="#" data-cmd="tq" title="分(fēn)享到騰訊微博"></a><a href="#" data-cmd="renren" title="分(fēn)享到人人網"></a><a href="#" data-cmd="weixin" title="分(fēn)享到微信"></a></div>

<script>

window.bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tq","renren","weixin"],"viewText":"分(fēn)享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='static/js/share.js'+~(-new Date()/36e5)];

</script>

 

16

圖片放(fàng)大(dà)效果

 

 

span img {

       transition: all 0.3s ease 0s;

}           

span:hover img {

        transform: scale(1.3, 1.3);

}

 

17

使用負的 nth-child 選擇項目

 

 

在CSS中(zhōng)使用負的 nth-child 選擇項目1到項目n。

li { display: none;

} /* select items 1 through 3 and display them

li:nth-child(-n+3) {

 display: block;

 }

就是這麽容易。

p:nth-child(odd) {//奇數項

 background:#ff0000;

}

 p:nth-child(even) { //偶數項

background:#0000ff;

}

p:nth-child(3n+0) {  //3的倍數項

 background:#ff0000;

}

 

18

垂直居中(zhōng)

 

 

/*第一(yī)種方法*/
.parent{display:

table-cell;

vertical-align:middle;

height:20px;

}
/*第二種方法*/
.parent{

display:inline-block;

vertical-align:middle;

line-height:20px;

}

實用絕對定位

.parent{

position:relative;

}
.child{

positon:absolute;

top:50%;transform:

translate(0,-50%);

}

實用flex實現

.parent{

display:flex;

align-items:center;

}

水平垂直全部居中(zhōng)利用vertical-align,text-align,inline-block實現

.parent{

display:table-cell;

vertical-align:middle;

text-align:center;}
.child{

display:inline-block;

}

利用絕對定位實現

.parent{

position:relative;

}
.child{

position:absolute;

top:50%;left:50%;

transform:translate(-50%,-50%);

}

利用flex實現

.parent{

display:flex;

justify-content:center;

align-items:center;

}

以上就是華想科技關于HTML5開(kāi)發的知(zhī)識總結。華想科技專注十堰高端網站建設,十堰h5網站建設,十堰建網站,十堰微信營銷,十堰微商(shāng)城,十堰軟件開(kāi)發,十堰響應式網站。