html,css基本项目框架搭建

搭建框架

1.css样式

1.  
   * {
2.  
   margin: 0;
3.  
   padding: 0;
4.  
   }
5.  
    
6.  
   body {
7.  
   background-color: brown;
8.  
   }
9.  
    
10.  
    #box {
11.  
    margin: 0 auto;
12.  
    width: 1200px;
13.  
    height: 900px;
14.  
    }
15.  
     
16.  
    header {
17.  
    width: 1000px;
18.  
    height: 60px;
19.  
    border-bottom: 1px solid #ccc;
20.  
    margin-top: 30px;
21.  
    margin: 0 auto;
22.  
    background-color: aliceblue;
23.  
    }
24.  
     
25.  
    h2 {
26.  
    height: 60px;
27.  
    line-height: 60px;
28.  
    text-align: center;
29.  
    }
30.  
     
31.  
    nav {
32.  
    width: 1000px;
33.  
    height: 60px;
34.  
    margin: 0 auto;
35.  
    background-color: aliceblue;
36.  
    }
37.  
     
38.  
    section {
39.  
    width: 1000px;
40.  
    height: 510px;
41.  
    margin: 20px auto;
42.  
    background-color: aliceblue;
43.  
    }
44.  
     
45.  
    aside {
46.  
    float: left;
47.  
    width: 430px;
48.  
    height: 400px;
49.  
    margin: 20px 20px;
50.  
    background-color: rgb(97, 97, 97);
51.  
    }
52.  
     
53.  
    article {
54.  
    float: left;
55.  
    width: 510px;
56.  
    height: 400px;
57.  
    margin: 20px 0;
58.  
    background-color: rgb(97, 97, 97);
59.  
    }
60.  
     
61.  
    hgroup {
62.  
     
63.  
    width: 480px;
64.  
    height: 60px;
65.  
    margin: 0 auto;
66.  
    background-color: rgb(141, 22, 22);
67.  
    }
68.  
     
69.  
    p {
70.  
    width: 480px;
71.  
    height: 140px;
72.  
    margin: 20px auto;
73.  
    background-color: rgb(141, 22, 22);
74.  
    text-align: center;
75.  
    line-height: 120px;
76.  
    }
77.  
     
78.  
    span {
79.  
    font-weight: 600;
80.  
    font-size: 25px;
81.  
    }
82.  
     
83.  
    footer {
84.  
    width: 1000px;
85.  
    height: 60px;
86.  
    border-bottom: 1px solid #ccc;
87.  
    margin-top: 10px;
88.  
    margin: 0 auto;
89.  
    background-color: aliceblue;
90.  
    }

2.html框架

1.  
   <div id="box">
2.  
   <h2>body</h2>
3.  
   <header>
4.  
   <h2>header</h2>
5.  
   </header>
6.  
   <nav>
7.  
   <h2>nav</h2>
8.  
   </nav>
9.  
   <section>
10.  
    <h2>section</h2>
11.  
    <aside>
12.  
    <h2>aside</h2>
13.  
    </aside>
14.  
    <article>
15.  
    <h2>article</h2>
16.  
    <hgroup>
17.  
    <h2>hgroup</h2>
18.  
    </hgroup>
19.  
    <p><span>p</span></p>
20.  
    <hgroup>
21.  
    <h2>dialog</h2>
22.  
    </hgroup>
23.  
    </article>
24.  
    </section>
25.  
    <footer>
26.  
    <h2>footer</h2>
27.  
    </footer>
28.  
    </div>

3.搭建效果

这篇好文章是转载于：学新通技术网