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. 1

menu1.css. 2

style1.css. 4

style2.css. 5

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.css

body {

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;

}