百度前端技术学院-基础-day7.8

任务：参考如下设计稿实现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 }

 

posted @ 2020-09-23 17:28  Olebaba  阅读(135)  评论(0)    收藏  举报