<dd id="u8qkb"><center id="u8qkb"><video id="u8qkb"></video></center></dd>

        <optgroup id="u8qkb"></optgroup>

        <tbody id="u8qkb"><pre id="u8qkb"></pre></tbody>
        <dd id="u8qkb"><pre id="u8qkb"></pre></dd>
        <dd id="u8qkb"></dd>

        <li id="u8qkb"></li>
      1. 
        

        <button id="u8qkb"><object id="u8qkb"></object></button>
        <rp id="u8qkb"></rp>
        <dd id="u8qkb"></dd>
        <button id="u8qkb"><acronym id="u8qkb"><u id="u8qkb"></u></acronym></button>
        <th id="u8qkb"></th>
          忠于品牌,精于技术

          十堰H5网站开发的18个技术总结

          发布时间:2016-11-04 作者:十堰网站建设 浏览:

                 华想科技十堰HTML5网站制作给大家分享一篇HTML5开发后,自己做的一些知识总结。

           

          640.webp.jpg

           

          1
          字体推荐写法

           

           

          由于每个人的审美不一样,钟爱的字体也会有所有不同,这里给出我个人的常用写法:

           font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
          小米写法

          *{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
          图片放大效果

           

           

          .entertainment span img {

                transition: all 0.3s ease 0s;

          }               

          .entertainment span:hover img {

                transform: scale(1.3, 1.3);

          }


           

          3
          媒体查询法做响应式

           

           

          @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
          判断不同浏览器滚轮事上下的不同

           

           

          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;//是否允许浏览器在单词内进行断句

          }

             ?如何使文本溢出边界不换行强制在一行内显示 

            #test {

                width: 150px;

                white-space: nowrap;//规定段落中的文本不进行换行

            }

             ?如何使文本溢出边界显示为省略号 

          #test {

              width: 150px;

              white-space: nowrap;

              overflow: hidden;

              text-overflow: ellipsis;// 属性规定当文本溢出包含元素时为省略号

          }


           

          8
          如何清除图片下方出现几像素的空白间隙

           

           

          方法1

          img {

              display: block;

          }

          方法2

          img {

              vertical-align: top;

          }

          方法3

          // #test为img的父元素

          #test {

              font-size: 0;

              line-height: 0;

          }


           

          9
          段落首字下沉first-letter

           

           

          // 你可以创建一个下沉效果,如在报纸或杂志的使用

           p::first-letter {

              margin: 5px 0 0 5px;

              float: left;

              color: #FF3366;

              font-size: 3.0em;

          }                                         


           

          10
           如何在文本框中禁用中文输入法

           

           

          input, textarea {

              ime-mode: disabled;

          }


           

          11
          CSS中的简单运算

           

           

            // 通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的。

             #test {

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

            }

                calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% - 2px)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

                 calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,但在移动端

          -moz-calc(expression);

          -webkit-calc(expression);

           

           

          12
          h1标签

           

           

          web标准中,同一页面中只能有一个h1标签.很多人知道这个概念,但做到的却很少;

           

          13
          禁止右键点击

           

           

          禁止右键点击

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


           

          14
           使用 max width 和 height 来调整 image 比例

           

           

          我们看到这张图本来的比例大小为宽 228 高 320,但是经过下面 CSS 语法

          1. img {   

          2.     width: 228px;   

          3.     height: 228px;   

          4. }  

           

          图片就变了,但是如果我们把 CSS 改成底下呢:

          Css代码

          1. img {   

          2.     max-width: 228px;   

          3.     max-height: 228px;   

          4. }  


           

          15
          百度分享

           

           

          http://share.baidu.com/code

           <div><a href="#" data-cmd="more"></a><a href="#" data-cmd="qzone" title="分享到Q空间"></a><a href="#" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" data-cmd="tq" title="分享到腾讯微博"></a><a href="#" data-cmd="renren" title="分享到人人网"></a><a href="#" data-cmd="weixin" title="分享到微信"></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":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

          </script>


           

          16
          图片放大效果

           

           

          span img {

                 transition: all 0.3s ease 0s;

          }           

          span:hover img {

                  transform: scale(1.3, 1.3);

          }


           

          17
          使用负的 nth-child 选择项目

           

           

          在CSS中使用负的 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
          垂直居中

           

           

          /*第一种方法*/
          .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;

          }

          水平垂直全部居中利用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开发的知识总结。华想科技专注十堰高端网站建设,十堰h5网站建设,十堰建网站,十堰微信营销,十堰微商城,十堰软件开发,十堰响应式网站。

          特级欧美午夜aa片_女人与公拘交200部_美女趴着被狂作爱动态图av_女人张开腿让男桶爽免费