課程工具
Brackets + Emmet
ICON
http://www.iconarchive.com/show/android-lollipop-apps-icons-by-tinylab.html
CSS3配色參考
http://www.colorzilla.com/gradient-editor
圓角
http://border-radius.com/
超連結CSS
a:link{ }
a:hover{ }
a:visited{ }
用在段落的編排上
text-indent: 2em; CSS語言，首行縮排，em表示字元，此例為首行退縮2個字元（英文字母為0.5字元），負號表示為首行凸排。
margin-left: 2em; CSS語言，左邊界，此例為段落的所有行皆退縮2個字元。
margin-top: 12px; CSS語言，上邊界，此例為段落的上邊界下移12px（負值為上移）。
#shadow{
height: 200px;
width: 200px;
background-color: black;
background-image: -webkit-linear-gradient(top,rgb(162, 239, 195),#2a9b93); //漸層
box-shadow: 2px 5px 20px #000; //陰影
//圓角
-webkit-border-radius: 100px;
-webkit-border-top-right-radius: 200px;
-webkit-border-bottom-left-radius: 200px;
-moz-border-radius: 100px;
-moz-border-radius-topright: 200px;
-moz-border-radius-bottomleft: 200px;
border-radius: 100px;
border-top-right-radius: 200px;
border-bottom-left-radius: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5+CSS學習</title>
<link rel="stylesheet" href="css/layout00.css">
</head>
<body>
<div id="wrapper">
<header id="page-header">
<div id="logo"><a href="#">Company Name</a></div>
<nav id="page-nav">
<ul>
<li><a href="index.html">官方首頁</a></li>
<li><a href="about.html">關於我們</a></li>
<li><a href="product.html">營業項目</a></li>
<li><a href="map.html">分店據點</a></li>
<li><a href="contact.html">聯絡客服</a></li>
</ul>
</nav>
</header>
<article id="home_content">
<section>
<hgroup>
<h1>學習HTML5+CSS3</h1>
<h2> ＨＴＭＬ５基本架構</h2>
</hgroup>
<p> 新的標籤如
<pre>
<!Doctype html>,<article>,<header>,<nav>...等
</pre>
<h2> 第二副標題</h2>
<ul>
<li> 分類項目1</li>
<li> 分類項目2</li>
<li> 分類項目3</li>
<li> 分類項目4</li>
<li> 分類項目5</li>
</ul>
</section>
<aside>
<h3> 第三副標<p></p></h3>
<p> 虛擬化主機：一種經由軟體所建構的電腦主機系統，各獨立的系統資源如CPU、記憶體、儲存裝置、網路介面等，擁有快速佈建及整合之優點。一般所稱的虛擬化主機運行的作業系統環境稱為GUEST OS，而原生硬體之作業系統稱之為HOST OS。</p>
</aside>
</article>
<footer>波波資訊股份有限公司 版權所有 ©2015 by BOBO</footer>
</div>
</body>
</html>
body {
background-color: azure;
margin: 0px;
padding: 0px;
}
*{
padding:0px;
margin:0px;
}
aside p {
font-size: 1px;
text-indent: 2em;
}
article h3{
background-image: url(../images/title_left.jpg);
background-repeat: no-repeat;
color:aliceblue;
height:35px;
width:auto;
}
section ul {
margin: 30px;
}
section ul li{
margin: 5px;
}
article h1,h2,h3 {
padding: 10px;
}
article p{
padding: 15px;
}
#wrapper {
width: 960px;
margin: 20px auto;
padding: 20px;
overflow: hidden;
}
#page-nav {
border-bottom: 5px solid #666;
margin: 20px 0px;
}
#page-nav ul {
width: 100%;
list-style: none;
overflow: hidden;
margin:
}
#page-nav li {
text-align:center;
float: left;
width:20%;
}
#page-nav li a {
background: #999;
margin: 0 5px 0 0;
padding: 5px 30px;
display: block;
color: #fff;
text-decoration: none;
}
#page-nav li a:hover{
background-color: #777;
}
#logo {
height: 165px;
background-image: url(../images/header.jpg)
}
#logo a{
color: #FFF;
font-size: 30px;
text-decoration: none;
display: block;
height: 40px;
width: 200px;
padding-top: 100px;
padding-left: 200px;
text-shadow: 1px 1px 5px #000;
}
article {
width: 100%;
background: -webkit-linear-gradient(top, rgba(173,217,228,1) 0%,rgba(217,237,242,1) 60%,rgba(247,251,252,1) 100%);
overflow: hidden;
}
article {
width: 100%;
padding-top: 10px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#ffffff));
overflow: hidden;
}
section {
float: left;
width: 550px;
margin-left: 10px;
background-color: rgba(216, 237, 255, 0.57);
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,0.75);
box-shadow: 0 1px 5p10x rgba(0,0,0,0.75);
margin-bottom: 30px;
margin-bottom: 20px;
}
aside {
float: right;
width: 360px;
background-color: #ffffff;
margin-right: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
hgroup {
background-color: #fff;
}
footer {
width: 100%;
text-align: center;
padding: 10px;
}
沒有留言:
張貼留言