任务：参考如下设计稿实现HTML页面及CSS样式
代码
点击预览
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>设计稿1</title>
7 <link rel="stylesheet" href="./design.css">
8 </head>
9 <body>
10 <header>
11 <div class="head">
12 <div class="logo">Logo</div>
13 <div class="link3">
14 <div><a href="#">Github</a></div>
15 <div><a href="#">Regisiter</a></div>
16 <div><a href="#">Login</a></div>
17 </div>
18 </div>
19 </header>
20
21 <div class="banner">
22 <div>
23 <span>1</span>
24 <span>2</span>
25 <span>3</span>
26 <span>4</span>
27 </div>
28 </div>
29
30 <nav>
31 <div class="nav1">
32 <span>HOME</span>
33 <span>PROFILE</span>
34 <span>ABOUT</span>
35 </div>
36 </nav>
37
38 <main>
39 <div class="content-row">
40 <div class="content">
41 <p>This is Content 1</p>
42 </div>
43 <div class="content">
44 <p>content 2</p>
45 </div>
46 <div class="content">
47 <p>content 3</p>
48 </div>
49 </div>
50
51 <div class="content-row">
52 <div class="content">
53 <p>content 4</p>
54 </div>
55 <div class="content">
56 <p>5</p>
57 </div>
58 <div class="content">
59 <p>6</p>
60 </div>
61 <div class="content">
62 <p>7</p>
63 </div>
64 </div>
65
66 <div class="content-row">
67 <div class="content">
68 <p>8</p>
69 </div>
70 <div class="content">
71 <p>9</p>
72 </div>
73 <div class="content">
74 <p>10</p>
75 </div>
76 </div>
77
78 </main>
79
80 <footer>
81 <div>
82 <p>2018 ife.baudu.com</p>
83 </div>
84 </footer>
85 </body>
86 </html>
CSS
1 html, body {
2 margin: 0;
3 width: 100%;
4 height: 100%;
5 font-size: 10px;
6 }
7 header{
8 background-color: rgb(73, 72, 72);
9 color: white;
10 }
11 footer{
12 background-color: rgb(88, 88, 88);
13 height: 70px;
14 text-align: center;
15 color: white;
16 padding-top: 10px;
17 }
18 .head{
19 width: 960px;
20 margin: 0 auto;
21 display: flex;
22 height: 50px;
23 }
24 .head .logo{
25 font-size: 2em;
26 flex: 1;
27 display: flex;
28 align-items: center;
29 }
30 .head .link3{
31 display: flex;
32 font-size: 1em;
33 flex: 1;
34 justify-content: flex-end;
35 margin-top: 5px;
36 }
37 .head a{
38 color: white;
39 margin-right: 10px;
40 display: flex;
41 }
42
43 .banner{
45 background-color: #66BB33;
46 display: flex;
47 padding-top: 300px;
48 padding-left: 70%;
49 padding-bottom: 10px;
50 }
51
52 .banner span{
53 display: inline-block;
54 border: 1px white solid;
55 height: 25px;
56 width: 15px;
57 text-align: center;
58 line-height: 25px;
59 margin-right: 3px;
60 background-color: rgb(255, 255,255);
61 opacity: 0.7;
62 }
63
64 .banner span:nth-of-type(2){
65 padding-top: 6px;
66 opacity: 0.9;
67 }
68
69 nav{
70 border-bottom: #d3d3d3 1px solid;
71 }
72
73 nav .nav1{
74 width: 960px;
75 margin: 0 auto;
76 display: flex;
77
78 }
79
80 nav span{
81 border: 1px lightgray solid;
82 margin-top: 10px;
83 padding: 10px 20px;
84 border-top-left-radius: 16px;
85 border-top-right-radius: 16px;
86
87 }
88
89 nav span:nth-of-type(1){
90 border-left: 1px lightgray solid;
91 border-bottom: white 1px solid;
92 z-index: 999;
93 position: relative;
94 top:1px ;
95
96 }
97 nav span:nth-of-type(2), nav span:nth-of-type(3){
98 background-color: rgb(236, 236, 236);
99 position: relative;
100
101 top:1px ;
102 }
103
104 main{
105 display: flex;
106 width: 960px;
107 margin: 10px 0px 20px 0px;
108 flex-flow: column nowrap;
109 margin: 5px auto 10px;
110 }
111
112 .content-row{
113 display: flex;
114
115 }
116
117 .content-row .content{
118 border: 1px lightgray solid;
119 flex: 1;
120 margin: 3px;
121 min-height: 120px;
122 display: flex;
123 justify-content: center;
124 align-items: center;
125 }