Make a Website: CSS Styling-Navigation 2/10
Navigation
Let's start by styling the navigation bar.
In index.html, the
<div class="nav">..</div>groups elements that are part of the navigation bar section of the web page. Inside<div class="nav">..</div> are the a elements we want to style.
Therefore, we can select all a elements inside
<div class="nav">..</div> in CSS like this:.nav a {
color: #5a5a5a;
font-size: 24px;
}
- The CSS selector
.nav aselects any aelement nested inside an HMTL element with a class named "nav." - The
colorproperty sets the color of aelement text to#5a5a5a. - The
font-sizeproperty changes the size of aelement text to24px.
Instructions
In main.css:
- Make a new CSS rule that selects all aelements nested inside
<div class="nav">..</div>. Check out the example above. - Set the
colorto#5a5a5a. [some nav text to call back - Remember what color does] - Set the
font-sizeto11px - Set the
font-weighttobold - Set the
padding-topto14px, and thepadding-bottomto14px - Set the
padding-leftto10px, and thepadding-rightto10px - Make the text uppercase using
text-transform: uppercase;
.nav a{
color:#5a5a5a;
font-size:11px;
font-weight:bold;/*厚度為bold*/
padding-top:14px;
padding-bottom:14px;
padding-left:10px;
padding-right:10px;
text-transform:uppercase;/*小寫展示*/
}<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Airbnb logo</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
</div>
<div class="learn-more">
<div>
<div>
<div>
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p><a href="#">See how to travel on Airbnb</a></p>
</div>
<div>
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p><a href="#">Learn more about hosting</a></p>
</div>
<div>
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p><a href="#">Learn about trust at Airbnb</a></p>
</div>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Airbnb logo</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
</div>
<div class="learn-more">
<div>
<div>
<div>
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p><a href="#">See how to travel on Airbnb</a></p>
</div>
<div>
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p><a href="#">Learn more about hosting</a></p>
</div>
<div>
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p><a href="#">Learn about trust at Airbnb</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment