CSS布局案例(float-position-flex)
熟练掌握float-position-flex三种布局，一个案例就够了，话不多说，直接上效果图
1.Position布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 1200px;
height: 1100px;
margin: 0 auto;
}
.header{
height: 260px;
background-color: #0098FE;
}
.header_title{
background-color: #0032FE;
height: 190px;
position: relative;
top: 70px;
}
.header_left{
width: 280px;
height: 100px;
background-color: #F7117E;
position: absolute;
margin:65px 50px;
}
.header_right{
height: 40px;
width: 500px;
position: absolute;
background-color: #F411F7;
right: 50px;
top: 130px;
}
.content{
height: 720px;
position: absolute;
}
.content_left{
width: 250px;
height: 700px;
position: relative;
margin-top: 10px;
background-color: #0180FB;
}
.content_left_top{
width: 250px;
height: 414px;
background-color: #0099CB;
}
.content_left_bottom{
width: 250px;
height: 276px;
background-color: #5785D0;
margin-top: 10px;
}
.content_right{
width: 200px;
height: 700px;
left: 1000px;
bottom: 10px;
position: absolute;
background-color: #0064FE;
}
.content_center{
width: 730px;
height: 700px;
position: absolute;
bottom: 10px;
left: 260px;
background-color: #867CFC;
}
.content_center_top{
height: 345px;
width: 730px;
position: relative;
background-color: #31CBFD;
}
.content_center_top_left{
height: 120px;
width: 120px;
background-color: #0000FD;
position: absolute;
top: 145px;
}
.content_center_top_center{
height: 160px;
width: 380px;
background-color: #527136;
position: absolute;
top: 25%;
right: 25%;
}
.content_center_top_right{
height: 80px;
width: 140px;
background-color: #27FC4A;
position: absolute;
right: 0;
bottom: 0;
}
.content_center_bottom{
height: 345px;
width: 730px;
position: absolute;
top: 355px;
}
.rectangle1{
width: 50%;
height: 50%;
background-color: #FD4200;
position: absolute;
}
.rectangle2{
width: 50%;
height: 50%;
background-color: #00FD30;
position: absolute;
right: 0;
}
.rectangle3{
width: 50%;
height: 50%;
background-color: #FDED01;
position: absolute;
top: 50%;
}
.rectangle4{
width: 50%;
height: 50%;
background-color: #D8AFFE;
position: absolute;
top: 50%;
left: 50%;
}
.footer{
width
本文通过一个案例详细介绍了CSS布局中的float、position和flex三种方法，旨在帮助读者熟练掌握这些布局技巧。文章包含每个布局模式的实例展示。
最低0.47元/天 解锁文章
3903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
