#91 Lo último en Diseño Web (Ojo gafas!!!)

atzu — Mon, 07 Apr 2008 17:12:28 +0000

Esto es lo que se llama usar bien el CSS, con clases, módulos, reutilización de contenidos...
<!–
.Estilo6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
color: #FFFF00;
}
#Layer2 {
position:absolute;
left:551px;
top:28px;
width:223px;
height:36px;
z-index:2;
}
#Layer3 {
position:absolute;
left:719px;
top:66px;
width:0px;
height:23px;
z-index:2;
}
#Layer4 {
position:absolute;
left:633px;
top:28px;
width:312px;
height:206px;
z-index:3;
}
#Layer5 {
position:absolute;
left:859px;
top:6px;
width:102px;
height:93px;
z-index:3;
}
#Layer1 {
position:absolute;
left:216px;
top:155px;
width:571px;
height:42px;
z-index:4;
}
#Layer6 {
position:absolute;
left:318px;
top:127px;
width:331px;
height:69px;
z-index:5;
}
#Layer7 {
position:absolute;
left:14px;
top:194px;
width:150px;
height:31px;
z-index:6;
}
#Layer8 {
position:absolute;
left:398px;
top:267px;
width:182px;
height:56px;
z-index:7;
}
#Layer9 {
position:absolute;
left:693px;
top:12px;
width:288px;
height:41px;
z-index:8;
}
.Estilo7 {color: #FFFF00}
body {
background-color: #000000;
}
#Layer10 {
position:absolute;
left:20px;
top:19px;
width:202px;
height:202px;
z-index:9;
}
#Layer11 {
position:absolute;
left:25px;
top:62px;
width:194px;
height:196px;
z-index:9;
}
#Layer12 {
position:absolute;
left:681px;
top:237px;
width:285px;
height:86px;
z-index:9;
}
#Layer13 {
position:absolute;
left:210px;
top:333px;
width:377px;
height:34px;
z-index:9;
}
#Layer14 {
position:absolute;
left:33px;
top:32px;
width:191px;
height:169px;
z-index:10;
}
#Layer15 {
position:absolute;
left:38px;
top:42px;
width:189px;
height:178px;
z-index:10;
}
.Estilo12 {color: #00FF00; }
#Layer16 {
position:absolute;
left:15px;
top:56px;
width:120px;
height:122px;
z-index:10;
}
#Layer17 {
position:absolute;
left:349px;
top:96px;
width:254px;
height:184px;
z-index:11;
}
#Layer18 {
position:absolute;
left:375px;
top:104px;
width:242px;
height:172px;
z-index:11;
}
#Layer19 {
position:absolute;
left:166px;
top:650px;
width:107px;
height:98px;
z-index:11;
}
.Estilo15 {font-weight: bold; font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFF00; }
#Layer20 {
position:absolute;
left:126px;
top:203px;
width:170px;
height:137px;
z-index:12;
}
#Layer21 {
position:absolute;
left:327px;
top:66px;
width:190px;
height:28px;
z-index:12;
}
#Layer22 {
position:absolute;
left:495px;
top:14px;
width:102px;
height:125px;
z-index:13;
}
#Layer23 {
position:absolute;
left:77px;
top:187px;
width:141px;
height:28px;
z-index:14;
}
#Layer24 {
position:absolute;
left:186px;
top:813px;
width:53px;
height:50px;
z-index:15;
}
#Layer25 {
position:absolute;
left:33px;
top:136px;
width:65px;
height:94px;
z-index:16;
}
#Layer26 {
position:absolute;
left:273px;
top:665px;
width:74px;
height:89px;
z-index:17;
}
#Layer27 {
position:absolute;
left:282px;
top:123px;
width:87px;
height:84px;
z-index:18;
}
#Layer28 {
position:absolute;
left:947px;
top:381px;
width:49px;
height:48px;
z-index:19;
}
#Layer29 {
position:absolute;
left:722px;
top:586px;
width:49px;
height:54px;
z-index:20;
}
#Layer30 {
position:absolute;
left:271px;
top:216px;
width:105px;
height:104px;
z-index:21;
}
#Layer31 {
position:absolute;
left:616px;
top:63px;
width:46px;
height:52px;
z-index:22;
}
#Layer32 {
position:absolute;
left:234px;
top:1117px;
width:618px;
height:58px;
z-index:23;
}
#Layer33 {
position:absolute;
left:359px;
top:521px;
width:562px;
height:38px;
z-index:24;
}
#Layer34 {
position:absolute;
left:374px;
top:437px;
width:42px;
height:55px;
z-index:25;
}
#Layer35 {
position:absolute;
left:903px;
top:664px;
width:37px;
height:478px;
z-index:26;
}
#Layer36 {
position:absolute;
left:314px;
top:940px;
width:126px;
height:149px;
z-index:26;
}
#Layer37 {
position:absolute;
left:799px;
top:772px;
width:97px;
height:102px;
z-index:26;
}
#Layer38 {
position:absolute;
left:327px;
top:944px;
width:149px;
height:131px;
z-index:27;
}
#Layer39 {
position:absolute;
left:601px;
top:583px;
width:295px;
height:26px;
z-index:28;
}
.Estilo19 {
color: #00FFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
#Layer40 {
position:absolute;
left:901px;
top:533px;
width:72px;
height:115px;
z-index:29;
}
.Estilo21 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 18px; color: #FFFF00; }
#Layer41 {
position:absolute;
left:830px;
top:899px;
width:188px;
height:91px;
z-index:30;
}
#Layer42 {
position:absolute;
left:644px;
top:967px;
width:127px;
height:32px;
z-index:31;
}
#Layer43 {
position:absolute;
left:16px;
top:236px;
width:123px;
height:44px;
z-index:32;
}
#Layer44 {
position:absolute;
left:38px;
top:1px;
width:136px;
height:156px;
z-index:33;
}
#Layer45 {
position:absolute;
left:587px;
top:382px;
width:333px;
height:23px;
z-index:34;
}
#Layer46 {
position:absolute;
left:690px;
top:59px;
width:191px;
height:32px;
z-index:35;
}
.Estilo39 {
font-size: 24px;
font-weight: bold;
color: #00FFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#Layer47 {
position:absolute;
left:46px;
top:9px;
width:173px;
height:48px;
z-index:36;
}
#Layer48 {
position:absolute;
left:222px;
top:8px;
width:266px;
height:91px;
z-index:37;
}
#Layer49 {
position:absolute;
left:70px;
top:93px;
width:262px;
height:198px;
z-index:38;
}
#Layer50 {
position:absolute;
left:27px;
top:73px;
width:145px;
height:68px;
z-index:38;
}
#Layer51 {
position:absolute;
left:44px;
top:82px;
width:158px;
height:91px;
z-index:39;
}
#Layer52 {
position:absolute;
left:166px;
top:142px;
width:145px;
height:199px;
z-index:40;
}
#Layer53 {
position:absolute;
left:27px;
top:14px;
width:160px;
height:40px;
z-index:41;
}
#Layer54 {
position:absolute;
left:338px;
top:398px;
width:152px;
height:60px;
z-index:42;
}
#Layer55 {
position:absolute;
left:450px;
top:215px;
width:89px;
height:62px;
z-index:43;
}
#Layer56 {
position:absolute;
left:715px;
top:659px;
width:225px;
height:34px;
z-index:43;
}
#Layer57 {
position:absolute;
left:225px;
top:85px;
width:302px;
height:23px;
z-index:44;
}
#Layer58 {
position:absolute;
left:632px;
top:8px;
width:54px;
height:54px;
z-index:45;
}
#Layer59 {
position:absolute;
left:272px;
top:978px;
width:160px;
height:237px;
z-index:46;
}
#Layer60 {
position:absolute;
left:604px;
top:305px;
width:83px;
height:77px;
z-index:47;
}
#Layer61 {
position:absolute;
left:290px;
top:338px;
width:106px;
height:146px;
z-index:48;
}
#Layer62 {
position:absolute;
left:705px;
top:16px;
width:65px;
height:57px;
z-index:49;
}
#Layer63 {
position:absolute;
left:781px;
top:15px;
width:66px;
height:59px;
z-index:50;
}
#Layer64 {
position:absolute;
left:25px;
top:62px;
width:180px;
height:172px;
z-index:51;
}
#Layer65 {
position:absolute;
left:364px;
top:932px;
width:203px;
height:183px;
z-index:51;
}
#Layer66 {
position:absolute;
left:635px;
top:1379px;
width:95px;
height:105px;
z-index:51;
}
#Layer67 {
position:absolute;
left:577px;
top:1272px;
width:215px;
height:148px;
z-index:52;
}
#Layer68 {
position:absolute;
left:590px;
top:1280px;
width:80px;
height:25px;
z-index:53;
}
#Layer69 {
position:absolute;
left:549px;
top:1104px;
width:164px;
height:25px;
z-index:54;
}
.Estilo41 {
font-size: 16px;
font-weight: bold;
}
#Layer70 {
position:absolute;
left:436px;
top:1386px;
width:135px;
height:23px;
z-index:54;
}
#Layer71 {
position:absolute;
left:857px;
top:1412px;
width:75px;
height:53px;
z-index:55;
}
#Layer72 {
position:absolute;
left:555px;
top:390px;
width:422px;
height:32px;
z-index:56;
}
#Layer73 {
position:absolute;
left:888px;
top:395px;
width:86px;
height:54px;
z-index:57;
}
#Layer74 {
position:absolute;
left:307px;
top:349px;
width:124px;
height:123px;
z-index:58;
}
#Layer75 {
position:absolute;
left:342px;
top:875px;
width:192px;
height:194px;
z-index:59;
}
#Layer76 {
position:absolute;
left:425px;
top:193px;
width:75px;
height:71px;
z-index:60;
}
#Layer77 {
position:absolute;
left:335px;
top:508px;
width:50px;
height:59px;
z-index:61;
}
#Layer78 {
position:absolute;
left:378px;
top:207px;
width:118px;
height:76px;
z-index:62;
}
#Layer79 {
position:absolute;
left:6px;
top:288px;
width:178px;
height:84px;
z-index:63;
}
#Layer80 {
position:absolute;
left:221px;
top:419px;
width:0px;
height:4px;
z-index:64;
}
#Layer81 {
position:absolute;
left:165px;
top:355px;
width:54px;
height:49px;
z-index:65;
}
#Layer82 {
position:absolute;
left:217px;
top:11px;
width:434px;
height:91px;
z-index:66;
}
#Layer83 {
position:absolute;
left:217px;
top:204px;
width:465px;
height:29px;
z-index:66;
}
#Layer84 {
position:absolute;
left:216px;
top:238px;
width:439px;
height:26px;
z-index:67;
}
#Layer85 {
position:absolute;
left:216px;
top:74px;
width:456px;
height:31px;
z-index:68;
}
#Layer86 {
position:absolute;
left:214px;
top:76px;
width:449px;
height:39px;
z-index:69;

» autor: atzu

escepticismo: búsqueda en comentarios: #Layer5

#91 Lo último en Diseño Web (Ojo gafas!!!)