1.单列布局 2.两列布局 3.三列布局
学习《李炎恢HTML5视频教程》视频教程，将向大家详细介绍HTML5，HTML5是超文本标记语言（HTML）的第五次重大修改，即最新版本；它比原来的标准又增加了一些新的标签，实现更多功能，更标准化，更适用于移动互联网。
![Smarty模板引擎[基础篇]](https://img.php.cn/upload/course/000/117/584/5aa730c080508391.jpg)
对Smarty模板引擎的基本应用
《Yii2.0框架入门与实战项目开发视频教程》将向大家介绍一个基于组件的高性能PHP框架——Yii框架，这个框架用于开发大型Web应用。Yii采用严格的OOP编写，并有着完善的库引用以及全面的教程。注意：有几节视频开始没有图像，所以大家不要惊讶，十几秒后就有了，前面无关紧要！
《传智播客HTML系列视频教程》步步深入，带领大家学习HTML知识，了解各种常用标签的意义以及基本用法，为后面的案例课程打下基础。
JSP参考手册
《LNMP生产环境优化及LVS集群视频教程》LNMP指的是一个基于CentOS/Debian编写的Nginx、PHP、MySQL、phpMyAdmin、eAccelerator一键安装包。可以在VPS、独立主机上轻松的安装LNMP生产环境。
包含PS工具的使用、UI设计基础、商业设计要素，《16天带你入门UI视频教程》带你快速入门UI设计-2019IT兄弟连新视频
Composer 是 PHP 的一个依赖管理工具。我们可以在项目中声明所依赖的外部工具库，Composer 会帮你安装这些依赖的库文件，有了它，我们就可以很轻松的使用一个命令将其他人的优秀代码引用到我们的项目中来。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
2年前 添加回复 0
网站布局： 1.单列布局； 2.两列布局； 3.三列布局。 （一）单列布局 1.一个div（class/id），可以搞定。 （二）两列布局 1.左右浮动； 2.绝对定位。 （三）三列布局 1.左右浮动，中间自适应。 （一定要先写左右【left、right】，再定中间【main】）; 2.绝对定位 （父级是相对位置，左右、中间是相对位置）-》父相子绝。
1年前 0
<!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>
2年前 0
布局入门源码.zip所属章节：30分钟学会网站布局
习惯了所有
老师讲的真好
3年前 添加回复 2