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

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

 

 

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网站建设,十堰建网站,十堰微信营销,十堰微商城,十堰软件开发,十堰响应式网站。