幾段實用的的HTML+CSS

第一篇前端文章向大家分享有關前端的一些小知識,包括HTML和CSS的技術,比如CSS3的漸變(Gradients)、@font-face的使用以及圓角陰影等等,對於初學者們還是有必要學習的。如果你已是高手也可以看看且希望你能給我們一些建議。

HTML5頁面模板

現在國外很多製作新網站直接使用了HTML5代碼,當然我們也得跟上,下面是一個常用的HTML5默認模板。

<!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應該很多人都有使用,下面這個已經是支持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-width: 100%; }

 a { text-decoration: none; }
 a:hover { text-decoration: underline; }

 

Clearfix清除浮動

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

 

CSS3 漸變(CSS3 Gradients)

CSS3漸變真的很好用,但是它容易記住,下面是比較全面的瀏覽器兼容的CSS3漸變代碼,下次使用直接複製就可以了。

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

@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; }

 

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>
----------------------------------------------------------------------------------------------------------------

結論

這篇文章介紹的都是基本入門的程式,在你建構HTML5/CSS3網站時通常都會用到它們,所以建議你收藏這些代碼,也希望你能分享給更多人。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s