From a002ec4026c9efab9e22705b216002a8c08f4b09 Mon Sep 17 00:00:00 2001 From: Denis Monnerat Date: Tue, 10 Dec 2024 12:50:01 +0100 Subject: [PATCH] ajout correction tp3 --- R1.02/tp/tp3/correction/css/style1.css | 21 +++++++++ R1.02/tp/tp3/correction/css/style2.css | 45 ++++++++++++++++++++ R1.02/tp/tp3/correction/css/style3.css | 33 ++++++++++++++ R1.02/tp/tp3/correction/css/style5.css | 40 +++++++++++++++++ R1.02/tp/tp3/correction/css/style6.css | 43 +++++++++++++++++++ R1.02/tp/tp3/correction/ex1.html | 25 +++++++++++ R1.02/tp/tp3/correction/ex2.html | 19 +++++++++ R1.02/tp/tp3/correction/ex3.html | 17 ++++++++ R1.02/tp/tp3/correction/ex5_flex.html | 59 ++++++++++++++++++++++++++ R1.02/tp/tp3/correction/ex6_grid.html | 58 +++++++++++++++++++++++++ 10 files changed, 360 insertions(+) create mode 100644 R1.02/tp/tp3/correction/css/style1.css create mode 100644 R1.02/tp/tp3/correction/css/style2.css create mode 100644 R1.02/tp/tp3/correction/css/style3.css create mode 100644 R1.02/tp/tp3/correction/css/style5.css create mode 100644 R1.02/tp/tp3/correction/css/style6.css create mode 100644 R1.02/tp/tp3/correction/ex1.html create mode 100644 R1.02/tp/tp3/correction/ex2.html create mode 100644 R1.02/tp/tp3/correction/ex3.html create mode 100644 R1.02/tp/tp3/correction/ex5_flex.html create mode 100644 R1.02/tp/tp3/correction/ex6_grid.html diff --git a/R1.02/tp/tp3/correction/css/style1.css b/R1.02/tp/tp3/correction/css/style1.css new file mode 100644 index 0000000..5c090b7 --- /dev/null +++ b/R1.02/tp/tp3/correction/css/style1.css @@ -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; +} diff --git a/R1.02/tp/tp3/correction/css/style2.css b/R1.02/tp/tp3/correction/css/style2.css new file mode 100644 index 0000000..be2a36c --- /dev/null +++ b/R1.02/tp/tp3/correction/css/style2.css @@ -0,0 +1,45 @@ +main { + --main-height : 800px; + --main-width : 800px; + 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; + +} + +aside { + 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; +} + diff --git a/R1.02/tp/tp3/correction/css/style3.css b/R1.02/tp/tp3/correction/css/style3.css new file mode 100644 index 0000000..b9d6850 --- /dev/null +++ b/R1.02/tp/tp3/correction/css/style3.css @@ -0,0 +1,33 @@ +ul { + padding : 0.5em; + text-align:center; + border : 1px solid grey; +} +li { + list-style-type : none; + display : inline; + margin:0px 1em 0px 1em; + /* vertical-align:middle;*/ + +} +li:last-child{ + margin-right:0px; +} + +li > a { + display:inline-block; + height:50px; + width:50px; + vertical-align:middle; + 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); +} diff --git a/R1.02/tp/tp3/correction/css/style5.css b/R1.02/tp/tp3/correction/css/style5.css new file mode 100644 index 0000000..4f63a5a --- /dev/null +++ b/R1.02/tp/tp3/correction/css/style5.css @@ -0,0 +1,40 @@ +/* media query pour le menu */ +@media screen and (max-width: 640px){ +nav { + display : none; +} + +} +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%; +} diff --git a/R1.02/tp/tp3/correction/css/style6.css b/R1.02/tp/tp3/correction/css/style6.css new file mode 100644 index 0000000..7bec361 --- /dev/null +++ b/R1.02/tp/tp3/correction/css/style6.css @@ -0,0 +1,43 @@ +/* media query pour le menu */ +@media screen and (max-width: 640px){ + nav { + display : none; + } +} + +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 : 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%; +} diff --git a/R1.02/tp/tp3/correction/ex1.html b/R1.02/tp/tp3/correction/ex1.html new file mode 100644 index 0000000..bc4b07b --- /dev/null +++ b/R1.02/tp/tp3/correction/ex1.html @@ -0,0 +1,25 @@ + + + + + + + CEastwood + + + + +

Mes films préférés de Clint Eastwood

+ + + + diff --git a/R1.02/tp/tp3/correction/ex2.html b/R1.02/tp/tp3/correction/ex2.html new file mode 100644 index 0000000..3c80252 --- /dev/null +++ b/R1.02/tp/tp3/correction/ex2.html @@ -0,0 +1,19 @@ + + + + + Smiley + + + + + + +
+
+
+ +
+
+ + diff --git a/R1.02/tp/tp3/correction/ex3.html b/R1.02/tp/tp3/correction/ex3.html new file mode 100644 index 0000000..80e7ad2 --- /dev/null +++ b/R1.02/tp/tp3/correction/ex3.html @@ -0,0 +1,17 @@ + + + + + + + + Liste + + + + + diff --git a/R1.02/tp/tp3/correction/ex5_flex.html b/R1.02/tp/tp3/correction/ex5_flex.html new file mode 100644 index 0000000..51ad9d8 --- /dev/null +++ b/R1.02/tp/tp3/correction/ex5_flex.html @@ -0,0 +1,59 @@ + + + + + + + Document + + + +
+ +
+
+
+
+

Article title 1

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 2

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 3

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 3

+
+
+ +

lorem ipsum

+
+
+
+ + diff --git a/R1.02/tp/tp3/correction/ex6_grid.html b/R1.02/tp/tp3/correction/ex6_grid.html new file mode 100644 index 0000000..bface9f --- /dev/null +++ b/R1.02/tp/tp3/correction/ex6_grid.html @@ -0,0 +1,58 @@ + + + + + + + Document + + + +
+ + +
+
+
+
+

Article title 1

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 2

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 3

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 3

+
+
+ +

lorem ipsum

+
+
+
+ +