[Lab] Codecademy CSS 教學筆記 6

3月 24, 2014

--- Build a Resume ---

1 / 8
What you'll be building

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name">Your Name Here</p>
<a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a>
</div>
<div class="left"></div>
<div class="right">
<h4>Objective</h4>
<p>To take a position as a software engineer.</p>
<h4>Experience</h4>
<p>Junior Developer, Software Company (2010 - Present)</p>
<ul>
<li>Designed and implemented end-user features for Flagship Product</li>
<li>Wrote third-party JavaScript and Ruby libraries</li>
</ul>
<h4>Skills</h4>
<p>Languages: C#, JavaScript, Python, Ruby</p>
<p>Frameworks: .NET, Node.js, Django, Ruby on Rails</p>
<h4>Education</h4>
<p>BS, Economics, My University</p>
<ul>
<li>Award for best senior thesis</li>
<li>GPA: 3.8</li>
</ul>
</div>
<div id="footer">
<p>123 Your Street, Anytown, State 12345-6789 | Tel: (555) 555-5555</p>
</div>
</body>
</html>

==============CSS===============
div {
border-radius: 5px;
}

#header {
z-index: 1;
position: fixed;
width: 97.5%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}

#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}

#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}

h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
}