标签：flex day7.8 前端 top 1px 10px margin display 百度
任务：参考如下设计稿实现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 }
标签：flex,day7.8,前端,top,1px,10px,margin,display,百度 来源： https://www.cnblogs.com/Olebaba/p/13719779.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。