HTML+CSS页面布局教程进阶

视频项目前端开发管理|前端开发面试宝典|游戏开发需要前端

【进阶篇】
第一课:实战小热身
实战总结:
1.浏览器兼容问题
每个浏览器都有一个内置的属性,当没有对某个标签的属性设置的时候,浏览器会应用内置的css文件,
这样就会导致浏览器不兼容,要让浏览器兼容,在本例中将用到的标签body和div置零就ok了。
body,div{padding:0;margin:0;}
2、将区域定位于浏览器的正中间
精简写法:margin:20px 0 0 20px;顺序是上右下左
将区域定位于浏览器正中间,无论浏览窗口的大小,显示器分辨率的大小:margin:0 auto;
第二课:浮动
两种页面布局方式
1、浮动float
2、定位position
float作用:消除块状元素的“霸权主义”
发生IE6双倍边距BUG,需要满足三个条件
1、要为块状元素
2、要左侧浮动
3、要有左外边距(margin-left)
解决该bug的方法:在相应的css属性中加入display:inline

第三课:清除浮动
<div class=”clear”></div>
css代码
.clear{clear:both;}
【成长篇】
第四课:导航条(上)
1、做一个容器放置导航盒子
ID为“nav”,width:960px;height:35px;margin-top:30px;居中
2、在盒子里放导航条,导航条的内容当成酒杯,无需列表ul作为隔板将酒杯隔开,ul里的单元格为li
ul、li为块状元素,横向排列需要让 li 使用float,
3、为“酒杯”添加“车距”:#nav ul li{width:100px;flaot:left;}

研究生面试前端开发|前端开发需要掌握哪些技术|前端可以开发软件吗

» 本文来自:前端开发者 » 《HTML+CSS页面布局教程进阶》
» 本文链接地址:https://www.rokub.com/5310.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!