Difference between revisions of "Cedrick"
| Line 20: | Line 20: | ||
<p>This image is resized using the 'width' and 'height' attributes of the 'img' tag.</p> | <p>This image is resized using the 'width' and 'height' attributes of the 'img' tag.</p> | ||
} | } | ||
| + | <!DOCTYPE html> | ||
| + | <html> | ||
| + | <head> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| + | <style> | ||
| + | body {margin: 0;} | ||
| + | |||
| + | ul.topnav { | ||
| + | list-style-type: none; | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | overflow: hidden; | ||
| + | background-color: #333; | ||
| + | } | ||
| + | |||
| + | ul.topnav li {float: left;} | ||
| + | |||
| + | ul.topnav li a { | ||
| + | display: block; | ||
| + | color: white; | ||
| + | text-align: center; | ||
| + | padding: 14px 16px; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | ul.topnav li a:hover:not(.active) {background-color: #111;} | ||
| + | |||
| + | ul.topnav li a.active {background-color: #4CAF50;} | ||
| + | |||
| + | ul.topnav li.right {float: right;} | ||
| + | |||
| + | @media screen and (max-width: 600px) { | ||
| + | ul.topnav li.right, | ||
| + | ul.topnav li {float: none;} | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | <ul class="topnav"> | ||
| + | <li><a class="active" href="#home">Home</a></li> | ||
| + | <li><a href="#news">News</a></li> | ||
| + | <li><a href="#contact">Contact</a></li> | ||
| + | <li class="right"><a href="#about">About</a></li> | ||
| + | </ul> | ||
| + | |||
| + | <div style="padding:0 16px;"> | ||
| + | <h2>Responsive Topnav Example</h2> | ||
| + | <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p> | ||
| + | <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> | ||
| + | <h4>Resize the browser window to see the effect.</h4> | ||
| + | </div> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
Revision as of 11:56, 30 October 2019
#sidebar{
float : right;
width: 30%;
background - color: #333;
color:#fff;
paddling: 15px;
box-sitting: border-box;
<img src="/pix/samples/18m.jpg" width="100" height="121" alt="Photo of 3 cats">
This image is resized using the 'width' and 'height' attributes of the 'img' tag.
} <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body {margin: 0;}
ul.topnav {
list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
} </style> </head> <body>
- <a class="active" href="#home">Home</a>
- <a href="#news">News</a>
- <a href="#contact">Contact</a>
- <a href="#about">About</a>
This example use media queries to stack the topnav vertically when the screen size is 600px or less.
You will learn more about media queries and responsive web design later in our CSS Tutorial.
Resize the browser window to see the effect.
</body> </html>
