Download to read offline
Lec-4-CSS-AdvancedAdvanced.Advanced.Advanced..pptx
- 1. Web Development Level 2-Bio Dr./Zainab Hassan Ali Hassan- Lecturer at the Department of Embedded Networks and Technology- Faculty of Artificial Intelligence, Kafrelsheikh University
- 2. 2 In This Chapter Opacity Vertical Navigation Bar Horizontal Navigation Bar Dropdown Image Website Layout
- 3.
- 4. 4 Opacity The opacity propertyspecifies the opacity/transparency of an element.
- 5. 5 Example 1: <html> <head> <style> img{margin-top: 20%; margin-left: 20%;} img { opacity: 0.5; } img:hover { opacity: 1.0; } </style> </head> <body> <img src="1.jpg" alt="imag1" width="200" height="120"> <img src="2.jpg" alt="imag2" width="200" height="120"> </body> </html>
- 6. 6 <html> <head> <style> divp {color:#209111ea;} div{background-color: rgb(212, 159, 79); /** color degree**/ opacity: 0.6; /**Border style**/ border-style: dotted dashed solid double; border-bottom-left-radius: 10px; border-top-right-radius: 10px; margin-top: 20%; /** The padding for each side of an element: **/ padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;} </style> </head> <body> <div><p>Amazon S3 provides a simple web service interface that you can use to store and retrieve any amount of data, at any time, <p></div> </body> </html> Example 2:
- 7. 7 Vertical Navigation Bar: Let’shave a look in bio4.html
- 8. 8 Horizontal Navigation Bar: Let’shave a look in bio5.html
- 9. 9 Dropdown Image Let’s havea look in bio 6.html
- 10. 10 Website Layout Let’s havea look in “Frame folder”
- 11.
- 12.