html5_04_html5+css布局页面

 

H5

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>  首页 </title>
 5     <link rel="stylesheet" type="text/css" href="./css/style.css">
 6     <link rel="icon" type="text/png" href="images/favicon.png" size="16x16">
 7     <!-- <base href="http://localhost/admin/users/"> -->
 8 </head>
 9 <body>
10 
11     <header>
12         <div class="container">    
13             <a href="index.html"><img src="./images/logo.png"></a>
14             <nav>
15                 
16                     <a href="index.html" class="home active">Home</a>
17                     <a href="#" class="course">Course</a>
18                     <a href="#" class="actual">Actual</a>
19                     <a href="#" class="plan">Plan</a>
20                     <a href="#" class="faq">Faq</a>
21                     <a href="#" class="notes">Notes</a>
22 
23             </nav>
24         </div>
25     </header>
26     
27     <!-- <div class="banner"> -->
28     <section class="banner">
29         <ul>
30             <li class="left" ><img src="./images/banner/banner3.jpg"></li>
31             <li class="active"><img src="./images/banner/banner2.jpg"></li>
32             <li class="right"><img src="./images/banner/banner1.jpg"></li>
33         </ul>
34     </section>
35     <!-- </div> -->
36 
37     <section class="main">
38         <aside>
39                 <h1>Recent <samp> Course</samp> </h1>
40                 <dl>
41                     <dt>Hyper Text Markup Language</dt>
42                     <dd><img src="./images/Course/09_07.png"></dd>
43                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
44                 </dl>    
45 
46 
47                 <dl>
48                     <dt>JavaScript</dt>
49                     <dd><img src="./images/Course/02_09.png"></dd>
50                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
51                 </dl>    
52 
53                 <dl>
54                     <dt>Cascading Style Sheets</dt>
55                     <dd><img src="./images/Course/05_05.png"></dd>
56                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
57                 </dl>    
58 
59                 <dl>
60                     <dt>AngularJS</dt>
61                     <dd><img src="./images/Course/06_04.png"></dd>
62                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
63                 </dl>    
64 
65 
66         </aside>
67 
68         <article>
69             <h1>Welcome to  <samp>Massive Open Online Course!</samp> </h1>
70 
71             <p>We provide the latest knowledge to help you cope with the changing world!</p>
72 
73             <img src="./images/article.jpg">
74 
75             <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
76 
77             <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education</p>
78         </article>
79 
80     </section>
81 
82     <footer>
83         <div class="container">
84             <p>Copyright © 2016 ：http://www.cnblogs.com/silvercell/ All Rights Reserved.</p>
85             <span>
86                 <img src="./images/icon/qq.png">
87                 <img src="./images/icon/sina.png">
88                 <img src="./images/icon/weichat.png">
89             </span>
90         </div>
91     </footer>
92 
93 
94 
95 
96 
97 
98 </body>
99 </html>

 

 

Css

  1 *{
  2      font-family: Arial;
  3      font-size: 14px;
  4     margin:0;
  5     padding:0;
  6     border:none;
  7 }
  8 
  9 ul{
 10     list-style:none;
 11 }
 12 
 13 a{
 14     text-decoration:none;
 15 }
 16 
 17 header{
 18     height:80px;
 19     background-color:#000;
 20 }
 21 
 22 header > .container {
 23     width:1200px;
 24     margin:0 auto;
 25 }
 26 
 27 header > .container > a{
 28     display:block;
 29     margin:5px 25px;
 30     float:left;
 31 }
 32 
 33 header > .container > nav {
 34     float:right;
 35 }
 36 
 37 header >.container > nav > a{
 38     font-size: 24px;
 39     display:block;
 40     float:left;
 41     width:110px;
 42     height:73px;
 43     line-height:73px;
 44     text-align:center;
 45     color:#fff;
 46 
 47 }
 48 
 49 
 50 header > .container > nav >a.home {background-color: #433b90;}
 51 header > .container > nav >a.course {background:#017fcb;}
 52 header > .container > nav >a.actual {background:#78b917;}
 53 header > .container > nav >a.plan {background:#feb800;}
 54 header > .container > nav >a.faq {background:#f27c01;}
 55 header > .container > nav >a.notes {background:#d40112;}
 56 
 57 
 58 header > .container > nav > a:hover,
 59 header > .container > nav > a.active{
 60 
 61         padding-bottom: 7px;
 62 
 63 }
 64 
 65 
 66 .banner    {
 67     background:#eaeaea;
 68 }
 69 
 70 .banner > ul{
 71     position:relative;
 72     width:1490px;
 73     height:538px;
 74     margin:0 auto ;
 75     padding-top:10px;
 76 }
 77 
 78 .banner > ul > li {
 79     position:absolute;
 80     width:610px;
 81     height:300px;
 82     overflow:hidden;
 83 }
 84 
 85 .banner > ul > li.active{
 86     z-index:2;
 87     width:960px;
 88     height:460px;
 89     right:0;
 90     left:0;
 91     top:37px;
 92     margin:auto;
 93     border: 1px solid #fff;
 94 }
 95 
 96 .banner > ul > li.left{
 97     z-index:1;
 98     top:0;
 99     bottom:0;
100     left:0;
101     margin:auto;
102 }
103 
104 .banner > ul > li.right{
105     z-index:1;
106     top:0;
107     bottom:0;
108     margin:auto;
109     right:0;
110 }
111 
112 .banner > ul > li >img {
113     position:absolute;
114     height:100%;
115     left:-30%;
116 }
117 
118 
119 /*main secion*/
120 .main{
121     width:1200px;
122     height:473px;
123     margin:43px auto 0;
124 }
125 
126 
127 .main h1{
128     font-size:30px;
129     font-weight: bold;
130     margin-bottom:7px;
131 }
132 
133 
134 .main h1>samp {
135     color:#7c7c7c;
136     font-size: 30px;
137 }
138 
139 
140 .main > aside {
141     width:450px;
142     float:left;
143 }
144 
145 
146 .main > article {
147     width:720px;
148     float:right;
149     overflow:hidden;
150 }
151 
152 
153 .main > aside > dl{
154     position:relative;
155     display:block;
156     height:74px;
157     margin-bottom:17px;
158 }
159 
160 
161 .main >aside >dl >dt{
162     position:absolute;
163     top:-1px;
164     left:92px;
165     font-size:16px;
166     font-weight: bold;
167     text-decoration:underline;
168 }
169 
170 
171 .main > aside >dl >dd:first-of-type{
172     position:absolute;
173     left:0;
174 }
175 
176 
177 .main > aside > dl > dd:last-of-type {
178     position:absolute;
179     left:92px;
180     top: 20px;
181 }
182 
183 
184 .main > article > p,
185 .main > article > img {
186     margin-bottom:20px;
187 }
188 
189 
190 
191 /*footer*/
192 
193 footer {
194     background:#000;
195 }
196 
197 footer > .container {
198     width:1200px;
199     height:64px;
200     margin:0 auto;
201 }
202 
203 
204 footer > .container > p{
205     color:#fff;
206     line-height:64px;
207     float:left;
208 }
209 
210 footer > .container > span {
211     float:right;
212     margin:14px 34px;
213 }
214 
215 footer > .container > span > img {
216     margin:4px;
217     opacity: .7;
218 }
219 
220 
221 footer > .container > span > img:hover {
222     opacity: 1;
223     cursor:pointer;
224 }

 

posted @ 2017-08-10 15:32  silvercell  阅读(1820)  评论(0)    收藏  举报