QQ空间首页布局原理 登录

下一节课程: 无 (次播放)

5 秒后自动播放下一节
  重新观看
介绍 >

30分钟学会网站布局

难度:初级 共10节 205705次学习

新课:PHP零基础(CMS开发)教学!

立即报名
章节 评论 笔记 课件
第1章 网站快速预览[配乐版]

快速预览网站布局精华[配乐版]

02分钟38秒
第2章 单例布局_最简洁的布局形式

单列_上中下等宽布局

04分钟10秒

单列_宽度自适应_内容居中布局

04分钟34秒
第3章 两列布局_最优雅的布局形式

两列_左侧固定_右侧自适应

03分钟35秒

两列_右侧固定_左侧自适应

03分钟30秒

二列_左右固定_自己撑开父级块

10分钟06秒

两列_左右二侧_绝对定位布局

08分钟22秒
第4章 三列布局_最通用的布局形式

三列_左右固定_中间自适应布局

06分钟45秒

三列_左右绝对定位_中间适应布局

07分钟42秒
第5章 实战:QQ空间首页主体布局

QQ空间首页布局原理

16分钟37秒

全部评论我要评论

  • 习惯了所有

    习惯了所有6年前

    老师讲的真好

    回复
    2

  • 手机用户417769686

    手机用户4177696864年前

    可以可以可以可以可以可以

    回复
    1

  • 淡定的年轻人@

    淡定的年轻人@5年前

    素材在哪?

    回复
    1

  • 天蓬老师

    课程页面下面就有一个选择卡: 课件下载

    天蓬老师 · 5年前
  • 橘子味的男孩

    橘子味的男孩3年前

    讲得比较基础。不过讲得思路清晰。

    回复
    0

  • 移动用户-8337453

    移动用户-83374534年前

    内容通俗易懂。

    回复
    0

  • young

    young4年前

    老师,主体区域的内容太长的话会穿过右边栏

    回复
    0

  • 天蓬老师

    主体自适应就没问题... 推荐后续学习Flex布局

    天蓬老师 · 4年前
  • 枫

    5年前

    才发现,自己浮动啊,相对定位啊,绝对定位啊,伪类并没有真正掌握,老师讲的还是很好的

    回复
    0

  • 龙哥

    龙哥5年前

    不错,老师讲的挺好的

    回复
    0

  • MrThinco

    MrThinco5年前

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.

    回复
    0

  • 古月丨就是我了

    古月丨就是我了5年前

    就死回过神来抠脚大汉地方开始考虑过

    回复
    0

  • 警徽闪光

    警徽闪光5年前

    不错不错看起来靠谱thx

    回复
    0

  • 蓝色闪电

    蓝色闪电5年前

    讲的不错啊。。。继续支持

    回复
    0

  • 过了

    过了5年前

    暂且跟着学习看看吧!

    回复
    0

  • 刘勇~泡泡龙OK

    刘勇~泡泡龙OK5年前

    感谢朱老师!学习提高。

    回复
    0

  • 忻的一年

    忻的一年5年前

    好性能好性能好性能好性能

    回复
    0

  • 全部笔记发布笔记

  • Evelyn

    Evelyn3年前

    网站布局: 1.单列布局; 2.两列布局; 3.三列布局。 (一)单列布局 1.一个div(class/id),可以搞定。 (二)两列布局 1.左右浮动; 2.绝对定位。 (三)三列布局 1.左右浮动,中间自适应。 (一定要先写左右【left、right】,再定中间【main】); 2.绝对定位 (父级是相对位置,左右、中间是相对位置)-》父相子绝。

    0

  • 移动用户-4252030

    移动用户-42520304年前

    厉害,学到了很多,如果细节讲细点就好了

    厉害,学到了很多,如果细节讲细点就好了

    0

  • 手机用户417769686

    手机用户4177696864年前

    请对该资源做出评价,评价后即可下载

    0

  • 移动用户-5012666

    移动用户-50126665年前

    网页布局notes

    0

  • MrThinco

    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>&nbsp;&nbsp;&nbsp;&nbsp;对这个世界如果你有太多的抱怨 跌倒了 就不敢继续往前走 为什么 人要这么的脆弱 堕落 请你打开电视看看 多少人为生命在努力勇敢的走下去 我们是不是该知足 珍惜一切就算没有拥有 还记得 你说家是唯一的城堡随着稻香河流继续奔跑 微微笑 小时候的梦我知道 不要哭 让萤火虫带着你逃跑 乡间的歌谣 永远的依靠 回家吧 回到最初的美好 </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

  • 刘勇~泡泡龙OK

    刘勇~泡泡龙OK5年前

    处长

    0

  • Godmotto

    Godmotto5年前

    qq空间首页布局

    0

  • 取消 回复 发送
  • 取消 发布笔记 发送
  • PHP中文网