html5_02_页面布局

 

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>  首页 </title>
 5 </head>
 6 <body>
 7 
 8     <header>
 9         <div class="container">    
10             <a href="index.html"><img src="./images/logo.png"></a>
11             <nav>
12                 <ul>
13                     <a href=""><li>Home</li></a>
14                     <a href=""><li>Course</li></a>
15                     <a href=""><li>Actual</li></a>
16                     <a href=""><li>Plan</li></a>
17                     <a href=""><li>Faq</li></a>
18                     <a href=""><li>Notes</li></a>
19                 </ul>
20             </nav>
21         </div>
22     </header>
23     
24     <!-- <div class="banner"> -->
25     <section>
26         <ul>
27             <li><img src="./images/banner/banner1.jpg"></li>
28             <li><img src="./images/banner/banner2.jpg"></li>
29             <li><img src="./images/banner/banner3.jpg"></li>
30         </ul>
31     </section>
32     <!-- </div> -->
33 
34     <section class="main">
35         <aside>
36                 <h1>Recent <samp> Course</samp> </h1>
37                 <dl>
38                     <dt>Hyper Text Markup Language</dt>
39                     <dd><img src="./images/Course/09_07.png"></dd>
40                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
41                 </dl>    
42 
43 
44                 <dl>
45                     <dt>JavaScript</dt>
46                     <dd><img src="./images/Course/02_09.png"></dd>
47                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
48                 </dl>    
49 
50                 <dl>
51                     <dt>Cascading Style Sheets</dt>
52                     <dd><img src="./images/Course/05_05.png"></dd>
53                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
54                 </dl>    
55 
56                 <dl>
57                     <dt>AngularJS</dt>
58                     <dd><img src="./images/Course/06_04.png"></dd>
59                     <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
60                 </dl>    
61 
62 
63         </aside>
64 
65         <article>
66             <h1>Welcome to  <samp>Massive Open Online Course!</samp> </h1>
67 
68             <p>We provide the latest knowledge to help you cope with the changing world!</p>
69 
70             <img src="./images/article.jpg">
71 
72             <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>
73 
74             <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>
75         </article>
76 
77     </section>
78 
79     <footer>
80         <div class="container">
81             <p>Copyright © 2016 ：http://www.cnblogs.com/silvercell/ All Rights Reserved.</p>
82             <span>
83                 <img src="./images/icon/qq.png">
84                 <img src="./images/icon/sina.png">
85                 <img src="./images/icon/weichat.png">
86             </span>
87         </div>
88     </footer>
89 
90 
91 </body>
92 </html>

 

先大块布局 header,  section.bannder,  section.main > (aside  article) ,  footer .

然后

header > div.container > ( a<img log   &&  nav>ul>li>a*4 >{title$}  ) 

banner > ul>li*3> img src=""

aside > (dl> (dt  && dd*2 ))*4

article> (h1 p  img p p p )

footer > div.container > (p>copyright  span>img*3)

posted @ 2017-08-07 20:04  silvercell  阅读(1371)  评论(0)    收藏  举报