Télechargement des fichiers css :
.
Les fichiers css sont disponibles pour faisant Ctrl c
pour les copier
Puis il faut les coller sur notepad++ en faisant Ctrl v
Table des matières
style.css:menu1.css
style.css
style.css et menu1.css
style .css | menu1 .css: |
---|---|
body { font-family: verdana; background-color:#F8E0E6; width:auto; } #top{ height: 100px; background: no-repeat top center ; font-size:32px; color:#046380; margin: 50px 0 40px 0; text-align:center; line-height:80px; } #top .petit{ font-size:12px; } #menu{ background-color:#FFFFFF; height:110px; width:auto; } #container{ width:auto; height: 105px; margin:0 auto;
} #menu ul li{ list-style:none; float:left; padding:0; width:24%; } #menu ul li a{ height:100px; width:auto; font-size:35px; text-decoration:none; text-align:center; display:block; background-color:#FFFFFF; background-size: 100% 200%; line-height:100px; color:#046380; }
#menu ul li a.accueil{ background-color:#B40404; } #menu ul li:hover a.accueil{ height:100px; background-color:#FE2E2E; } #menu ul li a.bleu{ background-color:#2E9AFE; } #menu ul li:hover a.bleu{ height:100px; background-color:#A9D0F5; } #menu ul li a.jaune{ background-color:#D7DF01; } #menu ul li:hover a.jaune{ height:100px; background-color:#F4FA58; } #menu ul li a.vert{ background-color:#31B404; } #menu ul li:hover a.vert{ height:100px; background-color:#BCF5A9; } #menu ul li a.rose{ background-color:#FE2EF7; } #menu ul li:hover a.rose{ height:100px; background-color:#F5A9F2; } #move0{ background-color:#8181F7; } #move1{ background-color:#F3F781; } #move2{ background-color:#9FF781; } #move3{ background-color:#F5A9F2; } #move4{
background-color:#58FAF4 } #move5{ background-color:#FA5858; } #gg{ background-color:#F5D0A9; } #hh{ background-color:#E2A9F3; } > |
#menu1{ background: no-repeat bottom center; height:100px; width:auto; } #menu1 ul li{ list-style:none; float:left; padding:0; width:25%; } #menu1 ul li a.btn3 { width:auto; text-decoration: none; padding: 10px; font-family: tahoma; font-size: 1.3em; color: #000000; background-color: #dbe5f1; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; border: 6px solid #0070c0; box-shadow: 5px 5px 14px #b7dde8; -webkit-box-shadow: 5px 5px 14px #b7dde8; -moz-box-shadow: 5px 5px 14px #b7dde8; }
#menu1 ul li a.btn3:hover { padding: 10px; font-family: arial; font-size: 1.3em; color: #4f81bd; background-color: #99ff66; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; border: 7px solid #000000; box-shadow: 7px 9px 4px #fbd5b5; -webkit-box-shadow: 7px 9px 4px #fbd5b5; -moz-box-shadow: 7px 9px 4px #fbd5b5; }
#menu1 ul li a.btna { width:auto; text-decoration: none; padding: 10px; font-family: tahoma; font-size: 1.3em; color: #ff0000; background-color:#66ff99; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; border: 6px solid #0070c0; box-shadow: 5px 5px 14px#ff0000; -webkit-box-shadow: 5px 5px 14px #b7dde8; -moz-box-shadow: 5px 5px 14px #b7dde8; }
#menu1 ul li a.btna:hover { padding: 10px; font-family: arial; font-size: 1.3em; color: #4f81bd; background-color: #ffc000; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; border: 7px solid #ff0000; box-shadow: 7px 9px 4px #fbd5b5; -webkit-box-shadow: 7px 9px 4px #fbd5b5; -moz-box-shadow: 7px 9px 4px #fbd5b5; }
#menu1 ul li a.btn1:hover { padding: 12px; font-size: 0.9em; color: #4f81bd; background-color: #ffc000; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; border: 4px solid #000000; box-shadow: 1px 1px 4px #fbd5b5; -webkit-box-shadow: 1px 1px 4px #fbd5b5; -moz-box-shadow: 1px 1px 4px #fbd5b5; }
|
style1.css et style2.css
style1.css
style2.css
style1.css | style2.css: |
---|---|
.echelle{ transform: scale(1.0); background-size: contain; } .bordered { border: solid #FFFFFF 3px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius: 20px; -webkit-box-shadow:0 10px 0 #ccc; -moz-box-shadow: 0 10px 0 #ccc; box-shadow: 0 10px 0 #ccc; } .bordered td, .bordered th { border-left: 1px solid #4000FF; border-top: 1px solid #4000FF; border-bottom: 1px solid #4000FF; padding: 10px; text-align: left; vertical-align:center; } .bordered th { background-color:#FFFFFF; background-image:linear-gradient(top, #FFFFFF #FFFFFF); box-shadow: 0 1px 0 rgba(255,255,2555,.8) inset; border-top:none; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .bordered .head { background-color:#7FF15D; text-align: center; } .bordered .head th { background-color:#7FF15D; border-radius: 20px 0 0 0; text-align: center; } .bordered .coul { background-color:#B0C6EE ; text-align: center; } .bordered .coul th { background-color:#B0C6EE ; border-radius: 20px 0 0 0; text-align: center; } .bordered .headbord { background-color:#7FF15D; font-style:bold; text-align: center; } .bordered .bord { background-color:#FFFFFF; font-style:bold; text-align: center; } .bordered .droid { background-color:#FFFFFF; font-style:bold; } .bordered th:first-child{ border-radius: 20px 0 0 0; } .bordered th:last-child { border-radius:0 20px 0 0; } .bordered tr :last-child td:first-child { border-radius:0 0 0 20px; } .bordered tr:hover { background: #fbfbe9; } .bordered tr :last-child td:last-child { border-radius:0 0 20px 20px; } .table head td {vertical-align:center;} code{padding:2px 4px;color:#d14;background-color:#f7f7f9; font-size:16px;border:1px solid #e1e1e8;white-space:nowrap;} pre{display:block;padding:9.5px;margin:0 0 10px;font-size:16px; line-height:16px;word-break:break-all;word-wrap:break-word; white-space:pre;white-space:pre-wrap;background-color:transparent; color:#4000FF; border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; }pre.prettyprint{margin-bottom:20px;}
|
style2.cssbody { font-family: verdana; background-image:url("images/fond.png"); background-size:100% 100%; width:auto; } #boite{ float:center; width:auto; border: 2px solid #333; padding: 1px; background-size: contain; } #maboite body { float:center; width:auto; border: 2px solid #333; padding: 1px; background:url("images/fond.png") no-repeat;
} #boite img{ width:auto; background-size: contain; } #boite20 img{ float:center; width:20%; padding: 1px; background-size: contain; } #boite50 img { float:center; width:50%; padding: 1px; background-size: contain; }
|