en:web_development:lists:menus
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
en:web_development:lists:menus [2021/12/02 14:04] mag [Links] |
en:web_development:lists:menus [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Web Development Lesson | + | ====== Web Development Lesson |
| ===== Menus ===== | ===== Menus ===== | ||
| + | ==== Objectives ==== | ||
| + | In this exercise you will display lists as menus, create links to other pages and learn some basic layout properties. | ||
| ==== Setup ==== | ==== Setup ==== | ||
| * In this activity, we're going to start building a web site. | * In this activity, we're going to start building a web site. | ||
| Line 12: | Line 14: | ||
| ==== Sidebar ==== | ==== Sidebar ==== | ||
| * Many web sites use a sidebar for navigation or links. It's essentially a list of links, so a list structure is most effective. | * Many web sites use a sidebar for navigation or links. It's essentially a list of links, so a list structure is most effective. | ||
| - | * Let's create a list of the activities we've done so far. Add this code inside the < | + | * Let's create a list of the activities we've done so far. Add this code to ' |
| < | < | ||
| < | < | ||
| Line 52: | Line 54: | ||
| * Inline elements sit side by side horizontally. Examples include < | * Inline elements sit side by side horizontally. Examples include < | ||
| * These can be controlled, though, so you can make list items sit side by side. | * These can be controlled, though, so you can make list items sit side by side. | ||
| - | * | + | * Add the following code to your ' |
| + | < | ||
| + | display: inline; | ||
| + | }</ | ||
| + | * < | ||
| + | * Open your ' | ||
| + | * If you're still seeing the bullets in your menu, it doesn' | ||
| + | < | ||
| + | list-style-type: | ||
| + | }</ | ||
| + | * Just for fun, let's make it look a little prettier. | ||
| + | < | ||
| + | list-style-type: | ||
| + | background-color: | ||
| + | padding-top: | ||
| + | padding-bottom: | ||
| + | } | ||
| + | |||
| + | li { | ||
| + | display: inline; | ||
| + | border-right: | ||
| + | } | ||
| + | |||
| + | a { | ||
| + | text-decoration: | ||
| + | color: #ccc; | ||
| + | padding: 10px; | ||
| + | font-weight: | ||
| + | font-family: | ||
| + | }</ | ||
| + | * You might not understand all these styles. We'll look at padding and borders in the next lesson on tables. Similarly, we'll look at different ways of specifying colours later in the course. | ||
| + | * Feel free to adjust some of these values to see what they do. | ||
| + | |||
| + | ==== Final Code ==== | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| - | [[en: | + | [[en: |
en/web_development/lists/menus.1638482694.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
