<div class="wrap" style="min-width: 600px; width: 80%; margin: auto; background: green; overflow: hidden;">
<h1>My Second Website</h1>
<div class="content" style="height: 600px; background: red; float: left; width: 80%;">
<h2>Main Content Heading</h2>
<p>This is my blog.</p>
</div>
<aside style="height: 600px; background: brown; float: left; width: 20%;">
<h2> Sidebar </h2>
<ul style="list-style: none; padding-left: 0;">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</aside>
</div>
css:
.wrap {
min-width: 600px;
width: 80%;
margin: auto;
background: green;
overflow: hidden;
}
.content, aside {
height: 600px;
}
.content {
background: red;
float: left;
width: 80%;
}
aside {
background: brown;
float: left;
width: 20%;
}
aside ul {
list-style: none;
padding-left: 0;
}
- 空白目錄
- Day-1-Your-First-Webpage
- day1example
- 視頻總結
- Day-2-Getting-a-Proper-Code-Editor-and-Formatting
- day2example
- Day-3-Lists
- day3example
- Day-4-Parent-Child-Relationships
- day4example
- Day-5-Headings
- day5example
- Day-6-Blockquotes
- day6example
- Day-7-Anchors
- day7example
- Day-8-Your-First-Stylesheet
- day8example
- Day-9-Clean-Project-Structures
- day9example
- Day-10-Images
- day10example
- Day-11-The-Necessity-of-Divs
- day11example
- Day-12-Ids-and-Classes
- day12example
- Day-13-Assignment
- day13example
- Day-14-Assignment-Solution
- Day-15-Floats-and-a-Simple-Layout
- day15example
- Day-16-NavigationLists
- day16example
- Day-17-Introduction-to-Forms
- day17example
- Day-18-Image-Replacement
- day18example
- Day-19-Typography-Basics
- day19example
- Day-20-The-Difference-Between-Relative-and-Absolute-Positioning
- day20example
- Day-21-Creating-a-Website-Fragment
- day21example
- Day-22-The-Importance-of-Validation
- day22example
- Day-23-Zen-Coding
- day23example
- Day-24-Resets-and-Normalizing
- day24example
- Day-25-CSS-Frameworks
- day25example
- Day-26-Final-Project-Markup
- day26example
- Day-27-Slicing-a-PSD
- day27example
- Day-28-How-to-Create-Snippets
- day28example
- Day-29-Website-CSS
- day29example
- Day-30-Finishing-Up-the-Website
- day30example