zoukankan      html  css  js  c++  java
  • 有用的HTML+CSS片段

    HTML5页面模板

    现在国外很多制作新网站直接使用了HTML5代码,当然我们也得跟上,下面是一个常用的HTML5默认模板,就像你用Dreamweaver新建一个HTML文件时的代码,只不过现在这个是HTML5的。这个代码为了兼容IE浏览器,所以加入Google托管的HTML5shiv文件。其次是我们经常用到的最新的jQuery 1.8.2库。

    <!doctype html>
    <html lang="en-US">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Default Page Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    
    <body>
    
    </body>
    </html>
    

    CSS RESET

    CSS Reset我想很多人都使用,他是CSS浏览器复位样式代码,下面这个已经是支持HTML5的Reset了,所以不要再使用旧的CSS RESET文件了哦。

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
       outline: none;
     }
     html { height: 101%; } /* always display scrollbars */
     body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
     
     article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
     ol, ul { list-style: none; }
     
     blockquote, q { quotes: none; }
     blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
     strong { font-weight: bold; } 
     
     input { outline: none; }
     
     table { border-collapse: collapse; border-spacing: 0; }
     img { border: 0; max- 100%; }
     
     a { text-decoration: none; }
     a:hover { text-decoration: underline; }
    

    Clearfix清除浮动

    清除浮动是前端人员必须知道的哦,延伸学习:http://www.qianduan.net/new-clearfix.html

    .clearfix:before, .container:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    
    /* IE 6/7 */
    .clearfix { zoom: 1; }
    

    CSS3 渐变(CSS3 Gradients)

    CSS3渐变真的很好用,但是它容易记住,下面是比较全面的浏览器兼容的CSS3渐变代码,下次使用直接Copy就可以了。

    background-color: #000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
    background-image: -webkit-linear-gradient(top, #bbb, #000);
    background-image: -moz-linear-gradient(top, #bbb, #000);
    background-image: -ms-linear-gradient(top, #bbb, #000);
    background-image: -o-linear-gradient(top, #bbb, #000);
    background-image: linear-gradient(top, #bbb, #000);
    

    CSS3渐变生成工具:CSS3 Gradient Generatorcolorzilla

    延伸学习教程:http://css-tricks.com/examples/CSS3Gradient/http://www.w3cplus.com/content/css3-gradient(中文)

    CSS3 Transforms

    这个CSS3 Transforms(转换变形)代码很少用到,因为浏览支持不多,但它出来的效果却很强大。

    -webkit-transform: perspective(250) rotateX(45deg);
    -moz-transform: perspective(250) rotateX(45deg);
    -ms-transform: perspective(250) rotateX(45deg);
    -o-transform: perspective(250) rotateX(45deg);
    transform: perspective(250) rotateX(45deg);
    

    CSS3 Transforms在线工具:http://westciv.com/tools/transforms/index.html

    延伸学习教程:http://sev7n.net/index.php/473.html(中文)

    @Font-Face

    这个主要是用于嵌入字体的模块,一般适用于嵌入文件较小的字体,中文字体很大,所以很少被嵌入。

    @font-face{ 
      font-family: 'MyFont';
      src: url('myfont.eot');
      src: url('myfont.eot?#iefix') format('embedded-opentype'),
        url('myfont.woff') format('woff'),
        url('myfont.ttf') format('truetype'),
        url('myfont.svg#webfont') format('svg');
    }
    
    h1 { font-family: 'MyFont', sans-serif; }
    

    延伸学习教程:http://www.w3cplus.com/content/css3-font-face(中文)

    HTML Meta标签(用于响应性布局)

    如果你已经制作了响应性布局,哪么加入下面代码到head部分,就可以在不同设备上浏览。

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    

    HTML5嵌入媒体 (HTML5 Embedded Media)

    新的<video>,<audio>标签给开发人员提供方便的嵌入媒体方式,这个日后必定很实用。

    <video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> 
    	<source src="media/video.mp4" type="video/mp4"></source> 
    	<source src="media/video.webm" type="video/webm"></source> 
    	<source src="media/video.ogg" type="video/ogg"></source>
    </video>
    
    <audio controls="controls" preload="none">
    	<source src="music.ogg" type="audio/ogg">
    	<source src="music.mp3" type="audio/mpeg">
    </audio>
    

     

  • 相关阅读:
    win10企业版激活密钥
    百科知识 手机QQ的视频如何保存
    华为荣耀7手机如何开启开发者模式,开启调试模式
    C#如何设置控件水平对齐,垂直对齐
    C#如何实现挂机锁
    JAVA_MyEclipse常见配置NETGEAR路由器如何设置
    JAVA_MyEclipse如何加载Tomcat
    VC++_错误 无法打开包括文件“glglut.h” No such file or directory 怎么办
    生活娱乐 达尔优的键盘鼠标如何打开和关闭呼吸灯
    新版的豌豆荚如何连接电脑
  • 原文地址:https://www.cnblogs.com/axl234/p/3878165.html
Copyright © 2011-2022 走看看