From e9b0668e544ec91fe2b25e785c29207af69ec4ce Mon Sep 17 00:00:00 2001 From: Mercury-x <1612395322@qq.com> Date: Tue, 7 Jun 2022 18:17:45 +0800 Subject: [PATCH 1/5] css layout(flex) & tutorial --- code-challenge/03/index.html | 59 ++++++ code-challenge/03/style.css | 150 +++++++++++++++ code-challenge/04/index.html | 65 +++++++ code-challenge/04/style.css | 212 +++++++++++++++++++++ starter/03-CSS-Fundamentals/index.html | 249 +++++++++++++------------ starter/03-CSS-Fundamentals/style.css | 212 +++++++++++++++++++++ starter/04-CSS-Layouts/flexbox.html | 2 + starter/04-CSS-Layouts/index.html | 235 +++++++++++------------ starter/04-CSS-Layouts/style.css | 110 ++++++++++- 9 files changed, 1040 insertions(+), 254 deletions(-) create mode 100644 code-challenge/03/index.html create mode 100644 code-challenge/03/style.css create mode 100644 code-challenge/04/index.html create mode 100644 code-challenge/04/style.css create mode 100644 starter/03-CSS-Fundamentals/style.css diff --git a/code-challenge/03/index.html b/code-challenge/03/index.html new file mode 100644 index 000000000..aef3188f1 --- /dev/null +++ b/code-challenge/03/index.html @@ -0,0 +1,59 @@ + + + + + + + challenge 2 + + + +

Converse Chuck Taylor All Star Low Top

+ $65.00 +

+ Free shipping +

+ Ready to dress up or down,these classic canvas Chucks are an everydat wardrobe staple. +

+ + More Information → + +

+ +

Product details

+ +

+ Lightweight,durable canvas sneaker +
+ Lightly padded footbed for added comfort +
+ Iconic Chuck Taylor ankle patch. +

+ + + +

+ + \ No newline at end of file diff --git a/code-challenge/03/style.css b/code-challenge/03/style.css new file mode 100644 index 000000000..ff39f6a81 --- /dev/null +++ b/code-challenge/03/style.css @@ -0,0 +1,150 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: sans-serif; + font-size: 16px; + line-height: 1.4; +} + +/* PRODUCT */ + +.product { + width: 825px; + margin: 50px auto; + border: 4px solid black; +} + +.product-img { + /* margin-top: 0; */ +} + +.product-title { + font-size: 22px; + background-color: #f7f7f7; + text-align: center; + text-transform: uppercase; + padding: 15px; + position: relative; +} + +.product-title::before { + content: 'SALE'; + color: #f7f7f7; + font-size: 12px; + font-family: sans-serif; + letter-spacing: 0.2em; + + display: inline-block; + background-color: orangered; + border: 1px solid black; + padding: 5px 10px; + position: absolute; + top: -15px; + left: -30px; +} + +/* PRODUCT INFORRMATION */ + +.price { + font-size: 24px; + font-weight: bolder; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info { + display: inline-block; + margin-top: 10px; +} + +.more-info:link, .more-info:visited { + color: black; +} + +.more-info:hover, .more-info:active { + text-decoration: none; +} + +.color-picker { + margin-top: 30px; +} + +.color-picker div { + width: 22px; + height: 22px; + display: inline-block; + background-color: red; + margin-right: 10px; +} + +.color-picker div:nth-child(1) { + background-color: black; +} + +.color-picker div:nth-child(2) { + background-color: blue; +} + +.color-picker div:nth-child(3) { + background-color: red; +} + +.color-picker div:nth-child(4) { + background-color: yellow; +} + +.color-picker div:nth-child(5) { + background-color: green; +} + +.color-picker div:nth-child(6) { + background-color: brown; +} + +/* PRODUCT　DETAILS */ + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; + margin-top: 30px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + padding-bottom: 10px; +} + +/* BUTTON */ + +.add-cart { + width: 100%; + padding: 15px; + + font-size: 20px; + color: #fff; + text-transform: uppercase; + + background-color: #000; + border-top: 4px solid #000; +} + +.add-cart:hover { + background-color: #fff; + color: #000; + + cursor: pointer; +} \ No newline at end of file diff --git a/code-challenge/04/index.html b/code-challenge/04/index.html new file mode 100644 index 000000000..f3ee9fc08 --- /dev/null +++ b/code-challenge/04/index.html @@ -0,0 +1,65 @@ + + + + + + + challenge 2 + + + +

Converse Chuck Taylor All Star Low Top

+ +

+ $65.00 +

+ Free shipping +

+ Ready to dress up or down,these classic canvas Chucks are an everydat wardrobe staple. +

+ + More Information → + +

+ +

Product details

+ +

+ Lightweight,durable canvas sneaker +
+ Lightly padded footbed for added comfort +
+ Iconic Chuck Taylor ankle patch. +

+ +

+ + + +

+ + \ No newline at end of file diff --git a/code-challenge/04/style.css b/code-challenge/04/style.css new file mode 100644 index 000000000..d4686843e --- /dev/null +++ b/code-challenge/04/style.css @@ -0,0 +1,212 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + font-size: 16px; + line-height: 1.4; +} + +/* PRODUCT */ + +.product { + width: 825px; + margin: 50px auto; + border: 4px solid black; +} + +.product-img { + /* margin-top: 0; */ + display: block; +} + +.product-title { + font-size: 22px; + background-color: #f7f7f7; + text-align: center; + text-transform: uppercase; + padding: 15px; + position: relative; +} + +.product-title::before { + content: 'SALE'; + color: #f7f7f7; + font-size: 12px; + font-family: sans-serif; + letter-spacing: 0.2em; + + display: inline-block; + background-color: orangered; + border: 1px solid black; + padding: 5px 10px; + position: absolute; + top: -15px; + left: -30px; +} + +/* PRODUCT INFORRMATION */ + +.price { + font-size: 24px; + font-weight: bolder; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info { + display: inline-block; + margin-top: 10px; +} + +.more-info:link, .more-info:visited { + color: black; +} + +.more-info:hover, .more-info:active { + text-decoration: none; +} + +.color-picker { + margin-top: 30px; +} + +.color-picker div { + width: 22px; + height: 22px; + /* display: inline-block; */ + background-color: red; + margin-right: 10px; +} + +.color-picker div:nth-child(1) { + background-color: black; +} + +.color-picker div:nth-child(2) { + background-color: blue; +} + +.color-picker div:nth-child(3) { + background-color: red; +} + +.color-picker div:nth-child(4) { + background-color: yellow; +} + +.color-picker div:nth-child(5) { + background-color: green; +} + +.color-picker div:nth-child(6) { + background-color: brown; +} + +/* PRODUCT　DETAILS */ + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; + margin-top: 20px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + padding-bottom: 10px; +} + +/* BUTTON */ + +.add-cart { + width: 100%; + padding: 15px; + + font-size: 20px; + color: #fff; + text-transform: uppercase; + + background-color: #000; + border-top: 4px solid #000; +} + +.add-cart:hover { + background-color: #fff; + color: #000; + + cursor: pointer; +} + +/* FLOATS */ +/* .container-img { + float: left; +} + +.container-info { + float: left; + width: 243px; + margin: 0 40px; + padding-top: 20px; +} + +.price { + float: left; +} + +.shipping { + float: right; + margin-top: 8px; +} + +.clear { + clear: both; +} + +.container-details { + float: left; + width: 243px; +} */ + +.container { + display: flex; + justify-content: space-between; + gap: 40px; +} + +.container-info { + margin-top: 15px; + flex: 1; +} + +.row { + display: flex; + align-items: center; + justify-content: space-between; +} + +.shipping { + margin-bottom: 0; +} + +.container-details { + flex: 1; +} + +.color-picker { + display: flex; + gap: 10px; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..1f98e5e6f 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,6 +3,7 @@ The Basic Language of the Web: HTML + @@ -15,132 +16,140 @@

The Basic Language of the Web: HTML

--> -

📘 The Code Magazine

- - -

- -

The Basic Language of the Web: HTML

- -

Posted by Laura Jones on Monday, June 21st 2027

- -

📘 The Code Magazine

+ +

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all about, - and why you too should learn it. -

- -

What is HTML?

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers understand - HTML and render HTML code as websites. -

In HTML, each element is made up of 3 parts:

- -

The opening tag
The closing tag
The actual element

- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of the - web. Here are 5 of them: -

- -

To be able to use the fundamental web dev language
- To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
To build web applications
To impress friends
To have fun 😃

- -

Hopefully you learned something new here. See you next time!

- - - + + + +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all about, + and why you too should learn it. +

+ +

What is HTML?

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers understand + HTML and render HTML code as websites. +

In HTML, each element is made up of 3 parts:

+ +

The opening tag
The closing tag
The actual element

+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of the + web. Here are 5 of them: +

+ +

To be able to use the fundamental web dev language
+ To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
To build web applications
To impress friends
To have fun 😃

+ +

Hopefully you learned something new here. See you next time!

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..b69f1ae04 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,212 @@ +* { + margin: 0; + padding: 0; +} + +/* 使用body设置需要继承的样式 */ +/* 如果一个样式related to text, 那么它将会继承 */ +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 700px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +.post-img { + width: 100%; + height: auto; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1089ad; + border-bottom: 5px solid #1089ad; + padding: 50px 0; +} + + +h1, h2, h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + font-style: italic; +} + +/* become a 'h1' is not because its size, it's sementics */ +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +#copyright { + font-size: 16px; +} + +#author { + font-style: italic; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; +} + +/* if r & g & b have the same value, its actually is white to black */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; + margin-bottom: 0; +} + +li:nth-child(odd) { + /* color: red; */ +} + +/* article p:last-child { + color: red; +} */ + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* LVHA */ + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +nav { + font-size: 16px; +} + +.button-like { + font-size: 24px; + + position: absolute; + right: 10px; + bottom: 10px; + padding: 15px; + + cursor: pointer; +} + +/* 伪元素 */ +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2::first-letter { + font-size: 80px; +} + +/* 与h3相邻的p标签的第一行 */ +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::after { + content: 'TOP'; + font-size: 16px; + background-color: #ffe70e; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} +/* 不要写过长的css选择器 */ \ No newline at end of file diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..aab6e9fb9 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -40,6 +40,8 @@ margin: 40px; /* FLEXBOX */ + display: flex; + align-items: flex-start; } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..73482083b 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,143 +18,122 @@

The Basic Language of the Web: HTML

-->

📘 The Code Magazine

- -

The Basic Language of the Web: HTML

- -

- Posted by Laura Jones on Monday, June 21st 2027 +

The Basic Language of the Web: HTML

+ +

+ Posted by Laura Jones on Monday, June 21st 2027 +

+ + HTML code on a screen

+ +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web.

- -

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all - about, and why you too should learn it. -

- -

What is HTML?

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers - understand HTML and render HTML code as websites. -

In HTML, each element is made up of 3 parts:

- -

The opening tag
The closing tag
The actual element

- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of - the web. Here are 5 of them: -

- -

- To be able to use the fundamental web dev language -
- To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
To build web applications
To impress friends
To have fun 😃

- -

Hopefully you learned something new here. See you next time!

- - + +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

In HTML, each element is made up of 3 parts:

+ +

The opening tag
The closing tag
The actual element

+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ +

+ To be able to use the fundamental web dev language +
+ To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
To build web applications
To impress friends
To have fun 😃

+ +

Hopefully you learned something new here. See you next time!

+ + + +