웹사이트 레이아웃의 본질을 빠르게 미리보기 [사운드트랙 버전]
02분38초단일 컬럼_상단, 중간 및 하단 동일한 너비 레이아웃
04분10초단일 컬럼 너비 적응형 콘텐츠 중심 레이아웃
04분34초두 개의 열_왼쪽 고정_오른쪽 적응형
03분35초두 개의 열_오른쪽에 고정_왼쪽에 적응형
03분30초두 개의 열이 왼쪽으로 고정되고 오른쪽으로 상위 블록 자체가 열립니다.
10분06초두 개의 열_왼쪽 및 오른쪽 측면_절대 위치 레이아웃
08분22초3개 열_왼쪽 및 오른쪽 고정_가운데 적응형 레이아웃
06분45초3개 열_왼쪽 및 오른쪽 절대 위치 지정_가운데 적응형 레이아웃
07분42초QQ 공간 홈페이지 레이아웃 원리
16분37초
Evelyn4年前
网站布局： 1.单列布局； 2.两列布局； 3.三列布局。 （一）单列布局 1.一个div（class/id），可以搞定。 （二）两列布局 1.左右浮动； 2.绝对定位。 （三）三列布局 1.左右浮动，中间自适应。 （一定要先写左右【left、right】，再定中间【main】）; 2.绝对定位 （父级是相对位置，左右、中间是相对位置）-》父相子绝。
0
MrThinco5年前
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body,ul,li{margin: 0;padding: 0;} body{background-image: url(img/bg.png);background-repeat: no-repeat;background-color: #e9e9e9;background-position: 0 41px;} .top{width: 100%;height: 41px;background-color: #000;position: fixed;} .top > div{width: 90px ;height: 35px;overflow: hidden; float: left;} .top ul{list-style: none;} .top ul > li{float: left;margin: auto 20px;color: white;line-height: 35px;} .container{width: 1100px;height: 1000px;position: absolute;top: 41px;left: 0px;right: 0px;margin: auto;z-index: -1;} .container .header{height: 120px;} .container .header .header_img{margin-left:10px;padding: 5px;height: 100px;width: 100px;float: left;background-color: honeydew;} .container .header .header_right{height: 95px;margin-left:150px;} .container .header .header_right .vip1{width: 60px;height: 30px;} .container .header .header_right .vip2{width: 76px;height: 26px;} .container .header .header_right .header_ul ul{list-style: none;} .container .header .header_right .header_ul ul > li{float: left;margin: 20px 20px;} .container .main{position: relative;} /*定位父级*/ .container .main .left{position: absolute;top: 0;left: 0;height: 520px;width: 170px;background-color: #2A282A;} .container .main .left span{margin-left: 10px;color: #7B7678;} .container .main .left ul{list-style: none;} .container .main .left ul > li{margin: 10px 30px;color: #7B7678;} .container .main .right{position: absolute;top: 0;right: 0;height: 520px;width: 300px;background-color: #2A282A;color: #7B7678;} .container .main .right img{width: 66px;height: 66px;border-radius: 10px;margin: 10px;} .container .main .content{height: 520px;margin-left: 180px;margin-right: 310px;padding-left: 10px;background-color: #2A282A;color: #98969A;} .container .main .content .header_img{width: 48px;height: 48px;border-radius: 100%; border: 3px solid #eee; overflow: hidden;float: left;} .container .main .content .box1{margin: 20px auto;} .container .main .content .box1 > div{margin-left: 70px;} .container .main .content .box1 > div > p{margin: 0px;} .container .main .content .box2{margin-left: 10px;} .container .main .content .box2 .info_img{width: 322px; height: 203px;margin-left: 60px;} .container .footer{height: 50px;background-color: lightgray; } </style> </head> <body> <!-- 顶部的固定导航区 --> <div class="top"> <div> <img src="img/ico.png" height="40px;" alt=""> </div> <ul> <li>个人中心</li> <li>我的主页</li> <li>好友</li> <li>游戏</li> <li>装扮</li> </ul> </div> <!-- 主体内容部分 --> <div class="container"> <!-- 主体的头部 --> <div class="header"> <div class="header_img"><img src="./img/photo.gif" alt=""></div> <div class="header_right"> <div> <span>多宝多</span><br/> <img class="vip1" src="./img/vip1.png" alt=""><span>成长值1成长速度-10点/天0%</span><img class="vip2" src="./img/vip2.png" alt=""> </div> <div class="header_ul"> <ul> <li>个人中心</li> <li>我的主页</li> <li>好友</li> <li>游戏</li> <li>装扮</li> <li>设置</li> </ul> </div> </div> </div> <!-- 主体 --> <div class="main"> <!-- 主体左侧 --> <div class="left"> <span>好友动态</span> <ul> <li>好友动态</li> <li>特别关心</li> <li>与我相关</li> <li>那年今日</li> <li>腾讯课堂</li> <li>游戏应用</li> </ul> </div> <!-- 主体内容区 --> <div class="content"> <span>好友动态</span> <div class="box1"> <img class="header_img" src="./img/user.jpg" alt=""> <div> <p>天生是只狗</p> <p>2017年12月02日</p> </div> </div> <div class="box2"> <p> 对这个世界如果你有太多的抱怨 跌倒了 就不敢继续往前走 为什么 人要这么的脆弱 堕落 请你打开电视看看 多少人为生命在努力勇敢的走下去 我们是不是该知足 珍惜一切就算没有拥有 还记得 你说家是唯一的城堡随着稻香河流继续奔跑 微微笑 小时候的梦我知道 不要哭 让萤火虫带着你逃跑 乡间的歌谣 永远的依靠 回家吧 回到最初的美好 </p> <img class="info_img" src="./img/jb.jpg" alt=""> <p>来自：IPhone X</p> <div style="color: white;"> <span>浏览：108次 </span> <span style="margin-left: 250px;"> <a style="text-decoration: none;margin: 0px 20px;color: white;" href="">转发</a> <a style="text-decoration: none;margin: 0px 20px;color: white;" href="">点赞</a> <a style="text-decoration: none;margin: 0px 20px;color: white;" href="">评论</a> </span> </div> </div> </div> <!-- 主体右侧 --> <div class="right"> <span>最近访客</span> <div class="box1"> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> <img class="header_img" src="./img/frend.jpg" alt=""> </div> </div> </div> <!-- 主体底部 --> <div class="footer">主体底部</div> </div> </body> </html>
0