首页 > 代码库 > 【CSS3】布局

【CSS3】布局

2024-09-18 16:26:54   209人阅读

浮动布局：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <header>header</header>
10     <aside>aside</aside>
11     <section>section</section>
12     <footer>footer</footer>
13 </body>
14 </html>
*{
    margin:0;
    padding: 0;
}
header{
    height: 100px;
    background:rgba(10,180,10,0.5);
}
aside{
    width: 30%;
    height:450px;
    background:rgba(180,10,10,0.5);
    float: left;
    border:1px solid blue;/*aside的width加上section的width等于100%，此句会多出2px宽，影响正常布局。*/
    box-sizing: border-box;/*content-box总宽不包括外边框。border-box总宽包括外边框，可以解决上面那个问题。*/
}
section{
    width: 70%;
    height: 450px;
    background:rgba(10,10,180,0.5);
    float: left;
}
footer{
    height: 100px;
    background:pink;
    clear: left;
}

 

【CSS3】布局


联系
我们