Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question
100%

@charset "UTF-8";
html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}

body {
  font-family: Georgia, serif;
  font-size: 100%;
  background-color: white;
  margin: 0;
}

/* link styles */
a:link, a:visited { color: #DC6903; }
a:focus, a:hover, a:active { color: #F9AB33; }

a {
  text-decoration: none;
  border-bottom: 1px dotted;
  padding-bottom: .2em;
}

 

/* header styles */
header {
  color: white;
  background:  url(images/croissants_banner.jpg) no-repeat center center;
  background-size: cover; 
  text-align: center;
  height: 15em;
}
header p {
  font-style: italic;
  font-size: 1.2em;
  margin-top: -12px;
}
header h1 {
  margin-top: 1.5em;
}


/* nav styles */
nav, footer {
  font-family: verdana, sans-serif;
  background-color: #783F27;
}
nav ul li a:link, nav ul li a:visited {
  color: #F9AB33;
}
nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
  color: #fff;
}
nav ul {
  margin: 0;
}
nav ul li {
   font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .2em;
}

/* main "products" styles */
main {
  font-family: 'Stint Ultra Expanded', Georgia, serif;
  background-color: white;
  line-height: 1.8em;
  color: #555;
  padding: 1em;
  border: double 4px #EADDC4;
  border-radius: 25px;
  margin: 2.5%;
}
h3 {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #7A0002;
  border-top: 1px solid;
  border-left: 3px solid;
  padding-left: 1em;
  margin-top: 2.5em;
}
p.more {
  font-family: verdana, sans-serif;
  text-transform: uppercase; 
  font-size: .8em;
  clear: left;
}
main img {
  float: left;
  margin: 0 1em 1em 0;
}

img[src*="bread"] {
  -webkit-shape-outside: ellipse(130px 95px at 50% 50%);
  shape-outside: ellipse(130px 95px at 50% 50%);
}

img[src*="muffin"] {
  margin-left: 50px;
  -webkit-shape-outside: circle(125px);  
  shape-outside: circle(125px);
  -webkit-shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);
  shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);  
}

/* aside "hours" styles */
aside {
  background: url(images/scallop.png) repeat-y left top;
  background-color: #F6F3ED;
  padding: 1em;
  padding-left: 45px;
  border-top-right-radius: 25px;
  margin: 1em 2.5% 0 10%;
}
/* misc styles */
footer {
  color: #EADDC4;
  text-align: center;
  font-size: .8em;
  padding: 1em;
}
#award {     
  position: fixed;     
  top: 30px;     
  left: 50px;
}
h2 {
  font-family: 'Stint Ultra Expanded', Georgia, serif;
}
.day {
  color: #783F27;
  font-family: verdana, sans-serif;
  font-size: .8em;
  text-transform: uppercase;
}
/* CSS Document */

 

EXERCISE 16-1. Making a navigation bar with Flexbox
Open the most recent version of the style sheet for the bakery home page in a
text editor. If you need a fresh start, you will find an updated copy of bakery-
styles.css in the materials for Chapter 16.
Note: Be sure to use one of the Flexbox-supporting browsers listed at the end
of this section.
1. Open bakery-styles.css in a text editor and start by making the ul ele-
ment in the nav element as neutral as possible:
nav ul { margin: e; padding: e; list-style-type: none;}
Turn that ul element into a flexbox by setting its display to flex. As a
result, all of the li elements become flex items. Because we want rows
and no wrapping, the default values for flex-direction and flex-wrap
are fine, so the properties can be omitted:
nav ul { - display: flex;}
Save the document and look at it in a browser. You should see that the
links are lined up tightly in a row, which is an improvement, but we
have more work to do.
2. Now we can work on the appearance of the links. Start by making the a
elements in the nav list items display as block elements instead of inline.
Give them 1px rounded borders, padding within the borders (.5em top
and bottom, lem left and right), and .5em margins to give them space
and to open up the brown navigation bar.
nav ul li a { display: block; border: 1px solid; border-r
3. We want the navigation menu to be centered in the width of the nav sec-
tion. I'm getting a little ahead here because we haven't seen alignment
properties yet, but this one is fairly intuitive. Consider it a preview of
what's coming up in the next section. Add the following declaration for
the nav ul element:
nav ul {
display: flex; justify-content: center;}
Transcribed Image Text:EXERCISE 16-1. Making a navigation bar with Flexbox Open the most recent version of the style sheet for the bakery home page in a text editor. If you need a fresh start, you will find an updated copy of bakery- styles.css in the materials for Chapter 16. Note: Be sure to use one of the Flexbox-supporting browsers listed at the end of this section. 1. Open bakery-styles.css in a text editor and start by making the ul ele- ment in the nav element as neutral as possible: nav ul { margin: e; padding: e; list-style-type: none;} Turn that ul element into a flexbox by setting its display to flex. As a result, all of the li elements become flex items. Because we want rows and no wrapping, the default values for flex-direction and flex-wrap are fine, so the properties can be omitted: nav ul { - display: flex;} Save the document and look at it in a browser. You should see that the links are lined up tightly in a row, which is an improvement, but we have more work to do. 2. Now we can work on the appearance of the links. Start by making the a elements in the nav list items display as block elements instead of inline. Give them 1px rounded borders, padding within the borders (.5em top and bottom, lem left and right), and .5em margins to give them space and to open up the brown navigation bar. nav ul li a { display: block; border: 1px solid; border-r 3. We want the navigation menu to be centered in the width of the nav sec- tion. I'm getting a little ahead here because we haven't seen alignment properties yet, but this one is fairly intuitive. Consider it a preview of what's coming up in the next section. Add the following declaration for the nav ul element: nav ul { display: flex; justify-content: center;}
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

Blurred answer
Similar questions
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY