Laboratorio CSS
12
Ejemplos a Diseñar: <style> body { background-image: url("fondo.gif"); }</style> <style> img { float: right; margin: 0 0 10px 10px; } </style> CASO Se requiere que Ud., Diseñe los siguientes Menus (Codigos abajo) y que coloque estos en una determinada web. Problema 1: Ejecutar y Diseñar ul#minitabs { list-style: none; margin: 0; padding: 7px 0; border-bottom: 1px solid #CCC; font-weight: bold; text-align: center; white-space: nowrap } ul#minitabs li { display: inline; margin: 0 3px; }
-
Upload
ingeniero-delphi -
Category
Documents
-
view
213 -
download
0
description
CSS
Transcript of Laboratorio CSS
Ejemplos a Diseñar:
<style>
body {
background-image: url("fondo.gif");
}</style>
<style>
img {
float: right;
margin: 0 0 10px 10px;
}
</style>
CASO
Se requiere que Ud., Diseñe los siguientes Menus (Codigos abajo) y que
coloque estos en una determinada web.
Problema 1: Ejecutar y Diseñar
ul#minitabs {
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap
}
ul#minitabs li {
display: inline;
margin: 0 3px;
}
ul#minitabs a {
text-decoration: none;
padding: 0 0 3px;
border-bottom: 4px solid #FFF;
color: #999
}
ul#minitabs a#current {
border-color: #F60;
color:#06F }
ul#minitabs a:hover {
border-color: #F60;
color: #666
}
Problema 2: Ejecutar y Diseñar
#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
Ubicar GIF, en:
tabrightI.gif
tableftI.gif
Problema 3: Ejecutar y Diseñar
Descargar GIF: http://www.cssportal.com/horizontal-menus/images/nav_bg.jpg
#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
float:left;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
Problema 3:
ul#navigation {
list-style-type: none;
padding: 0;
margin: 0;
border: 0;
top: 0px;
left: 0px;
width: 750px;
height: 25px;
background: #566171 url(navigation_over.gif) no-repeat;
}
a, a:link, a:visited {
text-decoration: none;
}
p, p a {
color: #9dbdce;
font: 12px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
}
/*group=level 1*/
ul#navigation li {
padding: 0;
margin: 0;
display: block;
float: left;
text-indent: -9999px;
}
ul#navigation li a {
border: 0;
display: block;
height: 25px;
background: url(navigation.gif) no-repeat;
}
ul#navigation li a:hover {
border: 0;
display: block;
background-image: url(navigation_over.gif);
}
/*/group*/
/*group=level 1 ids*/
li#home a {
width: 52px;
}
li#products a {
width: 72px;
}
li#products a:link,
li#products a:visited,
li#products a:hover {
background-position: -52px 0px;
}
li#shop a {
width: 83px;
}
li#shop a:link,
li#shop a:visited,
li#shop a:hover {
background-position: -124px 0px;
}
li#extra a {
width: 57px;
}
li#extra a:link,
li#extra a:visited,
li#extra a:hover {
background-position: -207px 0px;
}
li#support a {
width: 67px;
}
li#support a:link,
li#support a:visited,
li#support a:hover {
background-position: -264px 0px;
}
li#register a {
width: 69px;
}
li#register a:link,
li#register a:visited,
li#register a:hover {
background-position: -331px 0px;
}
li#company a {
width: 90px;
}
li#company a:link,
li#company a:visited,
li#company a:hover {
background-position: -400px 0px;
}
li#contact a {
width: 83px;
}
li#contact a:link,
li#contact a:visited,
li#contact a:hover {
background-position: -490px 0px;
}
/*/group*/
/*group=level 2*/
#navigation li ul {
display: block;
visibility: hidden;
position: absolute;
left: 0px;
width: 300px;
margin: 0;
}
#navigation li:hover ul {
visibility: visible;
z-index: 100;
}
#navigation li#extra ul {
background: none;
height: 21px;
margin-left: 191px;
}
#navigation li#products ul {
background: none;
height: 21px;
margin-left: 37px;
}
* html #navigation li#extra ul {
margin-left: 233px;
}
* html #navigation li#products ul {
margin-left: 79px;
}
/*/group*/
/*group=level 2 ids*/
ul#navigation li#extra ul li#icons a:link,
ul#navigation li#extra ul li#icons a:visited {
width: 36px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat 0px 0px;
}
ul#navigation li#extra ul li#icons a:hover {
width: 36px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat 0px -21px;
}
ul#navigation li#extra ul li#desktops a:link,
ul#navigation li#extra ul li#desktops a:visited {
width: 54px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat -36px 0px;
}
ul#navigation li#extra ul li#desktops a:hover {
width: 54px;
height: 21px;
background: url(subnavigation_extra.gif) no-repeat -36px -21px;
}
ul#navigation li#products ul li#softw a:link,
ul#navigation li#products ul li#softw a:visited {
width: 56px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat 0px 0px;
}
ul#navigation li#products ul li#softw a:hover {
width: 56px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat 0px -21px;
}
ul#navigation li#products ul li#hardw a:link,
ul#navigation li#products ul li#hardw a:visited {
width: 61px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat -56px 0px;
}
ul#navigation li#products ul li#hardw a:hover {
width: 61px;
height: 21px;
background: url(subnavigation_products.gif) no-repeat -56px -21px;
}
/*/group*/
Descargar GIF:
- navigation_over.gif
- images/navigation.gif
- images/subnavigation_extra.gif
- images/subnavigation_products.gif
1. Código en HTML
2. <div id="tabsI">
3. <ul>
4. <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
5. <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
6. <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
7. <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
8. <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
9. <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
10. <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
11. </ul>
12. </div>
2. Código en HTML
1. <ul id="nav">
2. <li id="nav-home"><a href="#">Home</a></li>
3. <li id="nav-about"><a href="#">About</a></li>
4. <li id="nav-archive"><a href="#">Archive</a></li>
5. <li id="nav-lab"><a href="#">Lab</a></li>
6. <li id="nav-reviews"><a href="#">Reviews</a></li>
7. <li id="nav-contact"><a href="#">Contact</a></li>
8. </ul>
3. Código en HTML
4. <ul id="navigation">
5. <li id="home" title="link to homepage"><a href="#">Home</a></li>
6. <li id="products" title="link to products"><a href="#">Products</a>
7. <ul>
8. <li id="softw" title="link to software"><a href="#">Software</a></li>
9. <li id="hardw" title="link to hardware"><a href="#">Hardware</a></li>
10. </ul>
11. </li>
12. <li id="shop" title="link to online shop"><a href="#">Online shop</a></li>
13. <li id="extra" title="link to extra"><a href="#">Extra</a>
14. <ul class="selected" >
15. <li id="icons" title="link to icons"><a href="#">Icons</a></li>
16. <li id="desktops" title="link to desktops"><a href="#">Desktops</a></li>
17. </ul>
18. </li>
19. <li id="support" title="link to support page"><a href="#">Support</a></li>
20. <li id="register" title="link to register page"><a href="#">Register</a></li>
21. <li id="company" title="link to company info"><a href="#">Company Info</a></li>
22. <li id="contact" title="link to contact info"><a href="#">Contact Info</a></li>
23. </ul>
4. código en html
<ul id="minitabs">
<li><a href="#">home</a></li>
<li><a id="current" href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
