- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>Earth News</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="CSS/EarthNews.css"/>
- </head>
- <body>
- <div class="warp">
- <header>
- <a href="#">
- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154571/Official.png" alt="Earth News">
- </a>
- </header>
- <nav>
- <a href="#" aria-current="page">Home</a>
- <a href="#">Podcast</a>
- <a href="#">Contact</a>
- </nav>
- <main>
- <h1><span>H<sub>2</sub>O</span> Fresh Air,<br>Bright Future</h1>
- <p>
- What a wonderful joy it is to see,
- the beauty of nature and its majesty.
- Everything blends, entwines and embraces,
- Spaced precisely in their designated places.
- What a marvel to see, I wish I were a bee,
- flying free, smelling life's roses, no particular place to be.
- </p>
- <a href="#">Read full article</a>
- </main>
- </div>
- </body>
- </html>
scss 代码
- // 设计图片来源: https://dribbble.com/shots/3863348-Product-web-Design
- //CSS3:root 选择器匹配文档根元素, 在 HTML 中, 根元素始终是 html 元素
- :root{
- //CSS 变量 var()
- --var-padding: 1em;
- }
- $-var-padding:1em;
- $-hightlight:hsl(230,38%,46%);
- $-hightlight-dark:hsl(230,38%,36%);
- $-logo-offset: 1em;
- $-logo-width: 6em;
- $-main-column-width:25em;
- *{
- box-sizing:border-box;
- &::before,&::after{
- box-sizing:inherit;
- }
- }
- html{
- min-height:100vh;
- font-family:sans-serif;
- line-height:1.5;
- background:linear-gradient(45deg,hsl(30,6%,94%),hsl(20,9%,84%));//HSL 是代表色调, 饱和度, 亮度三个通道的颜色
- background-repeat:no-repeat;
- background-size:cover;
- }
- body {
- margin:0;
- }
- .warp{
- position:relative;
- padding-left:.5em;
- max-width:60em;
- background:hsl(220,35%,76%) 100% linear-gradient(hsl(252,2%,42%) 0%,hsl(0,5%,30%) 50%,hsl(220,35%,76%) 50%,hsl(220,35%,76%) 100%);
- background-size:auto 10em;
- background-repeat:repeat-x;
- background-position:center top;
- }
- header{
- position:relative;
- height:8em;
- grid-row:1/3;
- grid-column:2;
- background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/154571/bla.jpg");
- background-size:cover;
- background-position:right center;
- a{
- position:absolute;
- top:$-logo-offset;
- left:$-logo-offset;
- display:block;
- width:$-logo-width;
- }
- img{
- display:block;
- width:100%;
- }
- }
- nav{
- display:flex;
- padding: 1.5em var(--var-padding);
- grid-row:1;
- grid-column:1;
- background:#fff;
- a{
- display:block;
- color:#333;
- text-decoration:none;
- border-bottom:1px solid #333;
- }
- a + a {//css3:element+element 选择器用于选取第一个指定的元素之后 (不是内部) 紧跟的元素.
- margin-left: 2em;
- }
- a:hover,a:focus{
- border-color:$-hightlight;
- border-width:2px;
- }
- a[aria-current] {// 含有自定义属性 aria-current 的 A 标签的样式
- border-bottom: 2px solid $-hightlight;
- }
- }
- main{
- padding:var(--var-padding);
- grid-row:2;
- grid-column:1;
- background:#fff;
- h1{
- margin-top:0;
- font-weight:normal;
- span{
- display:block;
- color:$-hightlight;
- font-weight:bolder;
- }
- sub{
- font-size:.5em;
- }
- }
- a{
- color:$-hightlight;
- text-decoration:none;
- &::after{
- margin-left:1.5em;
- content:"";
- vertical-align:baseline;//baseline 默认. 元素放置在父元素的基线上.
- }
- &:hover,&:focus{
- color:$-hightlight-dark;
- }
- &:hover::after,&:focus::after{
- margin-left:2em;
- }
- }
- }
- @media (min-width:37.5em){
- :root{
- --var-padding:3em;
- }
- body{
- margin:1em;
- }
- .warp{
- display:grid;
- margin:3em auto;
- grid-template-rows:5em auto;
- grid-template-columns:1.4fr 1fr;
- padding-left:2em;
- background-size:auto;
- &::after{
- position:absolute;
- right:1em;
- left:1em;
- bottom:0;
- z-index:-1;
- width:95%;
- height:200px;
- content:"";
- box-shadow:0 0 5em hsl(22,23%,40%);
- }
- }
- header{
- height:auto;
- a{
- right:$-logo-offset;
- left:auto;
- }
- }
- nav{
- //justify-content 用于设置或检索弹性盒子元素在主轴 (横轴) 方向上的对齐方式, space-between 项目位于各行之间留有空白的容器内
- justify-content:space-between;
- }
- main{
- min-width:$-main-column-width;
- }
- }
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>Earth News</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- @charset "UTF-8";
- :root { --var-padding: 1em; }
- * { box-sizing: border-box; }
- *::before, *::after { box-sizing: inherit; }
- html { min-height: 100vh; font-family: sans-serif; line-height: 1.5; background: linear-gradient(45deg, #f1f0ef, #dad5d3); background-repeat: no-repeat; background-size: cover; }
- body { margin: 0; }
- .warp { position: relative; padding-left: .5em; max-width: 60em; background: #acbbd7 100% linear-gradient(#6a696d 0%, #504949 50%, #acbbd7 50%, #acbbd7 100%); background-size: auto 10em; background-repeat: repeat-x; background-position: center top; }
- header { position: relative; height: 8em; grid-row: 1/3; grid-column: 2; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/154571/bla.jpg"); background-size: cover; background-position: right center; }
- header a { position: absolute; top: 1em; left: 1em; display: block; width: 6em; }
- header img { display: block; width: 100%; }
- nav { display: flex; padding: 1.5em var(--var-padding); grid-row: 1; grid-column: 1; background: #fff; }
- nav a { display: block; color: #333; text-decoration: none; border-bottom: 1px solid #333; }
- nav a + a { margin-left: 2em; }
- nav a:hover, nav a:focus { border-color: #4958a2; border-width: 2px; }
- nav a[aria-current] { border-bottom: 2px solid #4958a2; }
- main { padding: var(--var-padding); grid-row: 2; grid-column: 1; background: #fff; }
- main h1 { margin-top: 0; font-weight: normal; }
- main h1 span { display: block; color: #4958a2; font-weight: bolder; }
- main h1 sub { font-size: .5em; }
- main a { color: #4958a2; text-decoration: none; }
- main a::after { margin-left: 1.5em; content: ""; vertical-align: baseline; }
- main a:hover, main a:focus { color: #39457f; }
- main a:hover::after, main a:focus::after { margin-left: 2em; }
- @media (min-width: 37.5em) { :root { --var-padding: 3em; }
- body { margin: 1em; }
- .warp { display: grid; margin: 3em auto; grid-template-rows: 5em auto; grid-template-columns: 1.4fr 1fr; padding-left: 2em; background-size: auto; }
- .warp::after { position: absolute; right: 1em; left: 1em; bottom: 0; z-index: -1; width: 95%; height: 200px; content: ""; box-shadow: 0 0 5em #7d604f; }
- header { height: auto; }
- header a { right: 1em; left: auto; }
- nav { justify-content: space-between; }
- main { min-width: 25em; } }
- </style>
- </head>
- <body>
- <div class="warp">
- <header>
- <a href="#">
- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154571/Official.png" alt="Earth News">
- </a>
- </header>
- <nav>
- <a href="#" aria-current="page">Home</a>
- <a href="#">Podcast</a>
- <a href="#">Contact</a>
- </nav>
- <main>
- <h1><span>H<sub>2</sub>O</span> Fresh Air,<br>Bright Future</h1>
- <p>
- What a wonderful joy it is to see,
- the beauty of nature and its majesty.
- Everything blends, entwines and embraces,
- Spaced precisely in their designated places.
- What a marvel to see, I wish I were a bee,
- flying free, smelling life's roses, no particular place to be.
- </p>
- <a href="#">Read full article</a>
- </main>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/18617/2c5e4ba8255684717600baebdb318169.html