PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例
网站页面布局
http://www.sj33.cn/digital/wyll/201501/42379.html【页头、页脚、侧边栏和内容区域】
#避免各浏览器对CSS的解析差异,需对其进行测试
不同浏览器的区别【http://www.wenkuxiazai.com/doc/5fd3b2774afe04a1b171de3e.html】
1、IE和FF居中不一样text-align:center #包中所有文本居中2、IE指定的最小高度为18px,FF都可以定义小于18px的,默认18px3、IE会自动调整块高度,而FF不会,指定多高就是多高【高度不随内容高度增高而增高】
#把原背景高度去掉
4、FF如果使用浮动则是正常的显示,脱离文本流5、IE和FF在列表不区别内外边距清零,无需列表(清除样式)6、H不一样7、Border IE=内容+框,FF边框另算
实例实现
#命名需遵循命名规范
0、定义文件
在css文件中定义实现各功能的不同的样式【分辨率设置:1024*768px】
1、初步编辑【定义标签、主体(分布)、css】{浏览器差异问题1:居中}
id:只调用一次的时候使用,调用多次的时候使用类
#定义类(nav),分割条
clear:both; //清除浮动区块 overflow:hidden; //超出部分隐藏
2、页头、菜单
#header分为三部分logo、banner(广告位:动图等)、tool(快捷操作)【全部脱离文本流进行操作,页面可更美观】{浏览器差异问题2、3、4}
float:脱离文本流操作 #margin-left:10px //浮动框右边留10px空位
#menu菜单栏{浏览器差异问题5}
3、主体(body)
先分成左右两边,中间为广告位,栏目块为图片【选项高度以图片高度为准】
#浏览器差异问题6
#
##IE与火狐的边界界定有几个像素差异
#!important #优先级,为火狐等浏览器优先识别标志
4、内容区域
#通常为列表,在content里面
###成果展示
遗留问题:
当content定义高度时,在IE中则会页面被撑大叠加
##暂时解决方法:content不设高度
PHP.5-DIV+CSS布局网站首页实例的更多相关文章
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- 【使用DIV+CSS重写网站首页案例】CSS选择器
使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...
- 使用DIV+CSS布局网站的优点和缺陷
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网 ...
- 【使用DIV+CSS重写网站首页案例】CSS浮动
CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止 由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性 ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: <!DOCTYPE h ...
- 【使用DIV+CSS重写网站首页案例】CSS盒子模型
CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
随机推荐
- MVC3.0在各个版本IIS中的部署
概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: ...
- HDU 3311 Dig The Wells(斯坦纳树)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=3311 [题意] 给定k座庙,n个其他点,m条边,点权代表挖井费用,边权代表连边费用,问使得k座庙里 ...
- HDU5634 Rikka with Phi 线段树
// HDU5634 Rikka with Phi 线段树 // 思路:操作1的时候,判断一下当前区间是不是每个数都相等,在每个数相等的区间上操作.相当于lazy,不必更新到底. #include & ...
- Cloudera 建议使用 NTP 使 Hadoop 群集实现时间同步
主机的 NTP 服务未响应时钟偏差请求. 建议 这是主机运行状况测试,用于检查主机的系统时钟是否与其 NTP 服务器不同步.该测试能检查“ntpdc -c loopinfo”命令报告的主机时钟偏差绝对 ...
- AHOI2013 Round2 Day1 简要题解
第一题,好吧这是个dp.(搜素也能在BZOJ上卡过). 第二题,BFS搜索碰到的立方体面数,智硬没有想到... 第三题,其实一看就有思路,但关键是求x坐标不交的矩形对数+y坐标不交的矩形对数 - x, ...
- 【现代程序设计】【homework-07】
C++11 中值得关注的几大变化 1.Lambda 表达式 Lambda表达式来源于函数式编程,说白就了就是在使用的地方定义函数,有的语言叫“闭包”,如果 lambda 函数没有传回值(例如 void ...
- ecstore b2b2c 商城页面伪静态代码 及相关注意事项
一下代码需要添加到 nginx.conf配置文件的server块,阿里云虚拟机一般在conf文件夹下建立vhost文件夹,把server块放进去,然后 在nginx.conf使用include 包含进 ...
- inline(内联函数)
一般来说,调用函数会造成:目前的指令位置被存储下来,程序流跳转到所调用的函数,然后执行调用函数,最后跳转回之前存储的位置.对于需要常常调用的小函数来说,这会影响程序的运行效率.所以,c99新增了inl ...
- CentOS 下安装操作Memcached
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...
- TMS320F2803x系列实时控制 MCU 技术文档
C2000系列实时控制器简介: C2000 生产选择指南 sprufk8.pdf 数据表: 中文板:TMS320F28030/28031/28032/28033/28034/28035 Picco ...