Module11: Creating A External Style Sheet and Creating A Gallery
•
1 recomendación•652 vistas
Recomendados
Más contenido relacionado
Destacado
Destacado (16)
Similar a Module11: Creating A External Style Sheet and Creating A Gallery
Similar a Module11: Creating A External Style Sheet and Creating A Gallery (20)
Más de Daniel Downs
Más de Daniel Downs (20)
Último
Último (20)
Module11: Creating A External Style Sheet and Creating A Gallery
- 1. Module 11:Setting Up An External Style Sheet With A Gallery Step 1:Using Google Images select 5 pictures which are the same size preferably less than 400pixels on either side. Step 2:Place these Images in a folder. 3.Start a new web page that includes the following code and include it in the folder. Save it as a HTML file named practice.html. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta httpequiv="ContentType" content="text/html; charset=utf8" /> <title>Practice</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p>Test Font</p> <hr> <div id="redbox"> </div> </body> </html> 4.Using a notepad enter the following code. Save this page as mystyle.txt in the same folder. body{width:1000px; height:900px; background-color:#efefef;} p {font-family: georgia, serif; font-size:24px;} hr {color: #000000; height: 20px } #redbox{ width:300px;
- 2. height:300px; background-color:green; } Step 5: Size your divs and page to accept the sizes of the images in your gallery. Make space for a galllery in terms of width and height. Step 6 :Add the following HTML code to the div you want the photo ton show.Repeat the red text for each photo. Make sure your names are correct and the image is saved in your web folder. HTML : <ul class="hoverbox"> <li> <a href="1.jpg"><img src="1.jpg" alt="text" /> <img src="1.jpg" alt="text" class="preview" /></a> </li> Step 7: Add the following CSS to your external style sheet. You only need to add it once. CSS : .hoverbox { cursor: default;
- 3. list-style: none; } .hoverbox a { cursor: default; } .hoverbox a .preview { display: none; } .hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -45px; z-index: 1; } .hoverbox img
- 4. { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 175px; } .hoverbox li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative;
- 5. } .hoverbox .preview { border-color: #000; width: 300px; } .hoverbox a { position: relative; } .hoverbox a:hover { display: block; font-size: 100%; z-index: 1; } .hoverbox a:hover .preview {
- 6. top: -38px; left: -50px; } .hoverbox li { position: static; }