monnerat/web_2025
1
2
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correctin tp3

Browse Source
This commit is contained in:
Denis Monnerat
2025-12-03 14:04:41 +01:00
parent f468b0b2e0
commit 148696e062
12 changed files with 424 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
R1.02/tp/tp3/correction/css/style1.css Normal file
View File

@@ -0,0 +1,21 @@
ul {
width : 50%;
max-width : 700px;
margin:auto;
border : 1px solid black;
padding : 0;
}
li {
list-style-type: none;
padding : 0.25rem;
margin : 0.25rem;
}
li:nth-child(2n){
background-color : #888888;
color : rgb(255,255,255);
}
li:nth-child(2n+1){
background-color : #dddddd;
font-style:italic;
}

46
R1.02/tp/tp3/correction/css/style2.css Normal file
View File

@@ -0,0 +1,46 @@
main {
--main-height : 400px;
--main-width : 400px;
position : relative;
width : var(--main-width);
height : var(--main-height);;
background-color : yellow;
border-radius : 10px;
border: 4px solid red;
margin:auto;
}
section {
position : absolute ;
top : calc(var(--main-height) / 4 );
right:calc(var(--main-width) / 5);
width : calc(var(--main-height) / 4);
height : calc(var(--main-height) / 4);
height : calc(var(--main-height) / 4);
border-radius : calc(var(--main-height) / 4);
background-color : red;
}
header {
position : absolute ;
top : calc(var(--main-height) / 4 );
left:calc(var(--main-width) / 5);
width : calc(var(--main-height) / 4);
height : calc(var(--main-height) / 4);
height : calc(var(--main-height) / 4);
border-radius : calc(var(--main-height) / 4);
background-color : red;
}
footer {
position : absolute;
bottom : calc(var(--main-height) / 8 );
--tmp-left : calc(var(--main-width) / 5);
left : var(--tmp-left);
height : calc(var(--main-height) / 6);
width : calc(var(--tmp-left) * 3 );
background-color : red;
border-radius : calc(var(--main-height) / 6) calc(var(--main-height) / 6) 0px 0px;
}

20
R1.02/tp/tp3/correction/css/style3.css Normal file
View File

@@ -0,0 +1,20 @@
body {
font-family: serif;
}
h1 + p {
font-variant: small-caps;
}
article p {
font-style: italic;
}
article > p {
text-decoration: underline;
}
article ~ p {
font-family: sans-serif;
}

28
R1.02/tp/tp3/correction/css/style4.css Normal file
View File

@@ -0,0 +1,28 @@
ul {
padding : 1em;
text-align:center;
border : 1px solid grey;
display : flex;
justify-content:space-around;
}
li {
list-style-type : none;
display : flex;
}
li > a {
height:10rem;
width:10rem;
font-size : 0px;
}
li > a[href*="HTML"] {
background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg);
}
li > a[href*="CSS"] {
background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg);
}
li > a[href*="Javascript"] {
background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg);
}

51
R1.02/tp/tp3/correction/css/style5.css Normal file
View File

@@ -0,0 +1,51 @@
/* media query pour le menu */
@media screen and (max-width: 640px){
nav {
display : none;
}
}
ul {
padding:0;
display:flex;
list-style-type: none;
justify-content:center;
}
li {
margin-right: 2em;
font-size : 2em;
}
/*
ul {
text-align: center;
padding:0;
}
li {
list-style-type: none;
list-style-position: inside;
display: inline-block;
margin-right: 2em;
font-size : 2em;
}
li:last-child{
margin-right:0;
}*/
main{
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : center;
}
article {
box-sizing : border-box;
margin: 2em;
flex-basis : 40%;
min-width:300px;
text-align: justify;
border : 1px solid grey;
padding : 1em;
}
img {
width : 90%;
}

40
R1.02/tp/tp3/correction/css/style6.css Normal file
View File

@@ -0,0 +1,40 @@
/* media query pour le menu */
@media screen and (max-width: 640px){
nav {
display : none;
}
}
ul {
padding:0;
display:flex;
list-style-type: none;
justify-content:center;
}
li {
margin-right: 2em;
font-size : 2em;
}
main{
display : grid;
grid-template-columns: 1fr 1fr;
grid-gap : 1rem;
}
article:first-child{
grid-column : 1 / span 2;
}
article {
box-sizing : border-box;
margin: 2em;
min-width:300px;
text-align: justify;
border : 1px solid grey;
padding : 1em;
}
img {
width : 90%;
}