HTML
//
</head>
<body>
<header class="fluid header"></header>
<aside class="fluid content_1">這是版面 Aside 標籤「content_1」的內容</aside>
<article class="fluid content_2">this is article</article>
</body>
</html>//
css
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
}
.test {
}
.content_1 {
}
.header {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: 100% auto;
width:100%;
height:200px;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
nav {
display: block;
float: left;
width: 100%;
margin-bottom: 30px;
}
.nav ul{
margin: 0;
padding: 0;
}
.nav li{
position: relative;
float: left;
color: #FFF;
list-style: none;
background: #E77C40;
}
.nav li a {
display: block;
padding: 15px 30px;
color: #FFF;
text-decoration: none;
}
.nav li:hover {
background: #E9905E;
}
.nav li ul {
background-color: rgba(231, 124, 64, 1);
display: none;
position: absolute;
top: 100%;
}
.nav li:hover ul {
display: block;
right: 0;
left: 0;
top: 100%;
}
.toggle {
display: none;
}
.arrow-bottom {
position: absolute;
top: 25px;
right: 13px;
margin-left: 5px;
border-top: 4px solid #FFF;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
width: 1px;
height: 1px;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.header{}
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
}
.test {
}
.content_1 {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.test {
}
.content_1 {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
.header{}
}
