div+css

各浏览器下图片垂直居中的方法：

由 自闭症网瘾萝莉.ら 提交于 2019-12-07 19:15:02
各浏览器下图片垂直居中的方法： 1.IE6下使用writing-mode：tb-rl；当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。实现未知高度替换元素图片垂直居中： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>利用定位来显示垂直局中的图片</title> <style type="text/css"> .miao { width:500px; height:220px; line-height:220px; border: 1px solid; text-align: center; } .miao img { vertical-align: middle; } </style> <!--[if IE 6]> <style type="text/css"> .miao span { border: 1px solid red; height: 100%

学DIV+CSS必须关注的问题

由 喜夏-厌秋 提交于 2019-12-07 02:06:01
今天看了一篇不错的文章，自己保存用吧，虽然里面的东西还不能体会。 一、CSS命名规范： 1、文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 2、常用类/ID命名规范 页 眉：header 内 容：content 容 器：container 页 脚：footer 版 权：copyright 导 航：menu 主导航：mainMenu 子导航：subMenu 标 志：logo 标 语：banner 标 题：title 侧边栏：sidebar 图 标：Icon 注 释：note 搜 索：search 按 钮：btn 登 录：login 链 接：link 信息框：manage …… 二、处理浏览器BUG问题 关于这点，不知那位高人把CSS BUG变成顺口溜了！在这里引用一下，很容易记住的！ 1、IE边框若显若无，须注意，定是高度设置已忘记； 2、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中； 3、三像素文本慢移不必慌，高度设置帮你忙； 4、兼容各个浏览须注意，默认设置行高可能是杀手； 5、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览； 6、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好

Div+CSS实现始终居中的半透明弹出层

由 醉酒当歌 提交于 2019-12-04 19:24:40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Div+CSS实现始终居中的半透明弹出层丨网页特效丨CsrCode.Cn</title> <style type="text/css"> <!-- html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index:999; width: 300px; height: 120px; left:50%; top:50%; margin-left:-150px

div+css：页面整体布局居中显示：上下居中||垂直居中，左右居中||水平居中

由 走远了吗. 提交于 2019-12-04 17:14:23
如何实现整体居中显示： 如果要实现整体页面上下居中，在<body>标签中加了个class ，<body class="mainLayout"> 然后对 mainLayout 进行设置： .mainLayout { position:absolute; left:50%; top:50%; width:910px; /*你的实际页面的宽度*/ margin-top:-270px; margin-left: -455px; /*455为整体width(这里是910)的一半*/ } 这是使用绝对定位和负margin值实现的。 left:50% 会让整个mainlayout容器从浏览器水平方向的中点开始往右显示，此时浏览器左边的一半是空的。 然后设置 margin-left为mainlayout容器的一半，设置为负值是让容器能再向左移动，也就是将整个容器从浏览器中点往左边挪动它（mainlayout容器）本身的一半。这样mainlayout容器刚好就能够左右居中显示了。 上下居中显示的原理一样：先top：50%让容器从垂直方向的中点向下显示，上面空出一半。然后再向上移动mainlayout容器的一半，使之垂直居中。 这样子的实现貌似兼容所有浏览器哦~（我自测了chrome ff ie7-10） 小结： 之前大概知道这个方法，但没有弄明白原理。今天碰到了这个任务，也终于看懂了

用div+css实现水平垂直居中

由 余生长醉 提交于 2019-12-03 14:25:56
以前我们做网页布局时要实现页面水平垂直居中的方法需要用 js 代码来实现。这样故然是一种好的方法，但是对于js 代码不懂的不熟的朋友来说也是比较困难的。今天我们就来讲一下如何用 div+css 实现水平垂直局中的呢。请大家先来看一下效果图： 这里我只是截了个图示范一下。 用div+css实现水平垂直居中的css样式代码部分： <style type="text/css"> /* 居中层CSS*/ #center { height:0px; width:0px; /* 设置位置*/ top:50%; left:50%; position:absolute; } /* 内容层CSS*/ #content { background:#FF9933; width:300px; height:200px; /* 设置浮动，脱离居中层限制（菜单什么很有用哦）*/ position:absolute; /* 这里设置的2个值，第一个是宽，第二个是高，但都是这个DIV的宽高的一半*/ margin:-150px 0 0 -100px; /* 演示用*/ color:#fff; } </style> 具体的效果还请大家自己 下载源代码 去运行查看一下效果，就会明白的。希望能对给您好带来帮助。 提醒一下大家不管是用 div+css 来实现页面水平垂直居中还是通过 js 来实现页面水平垂直居中的效果

转载 Div+css浏览器兼容实例分析（一）

由 爷，独闯天下 提交于 2019-12-02 23:01:22
今天又在OECP社区发现了一篇好文章， 《 Div+css浏览器兼容实例分析 》， 因为文章太长所以分为两篇上传给大家分享。 用 div+css 布局来做页面相比用table来做页面当然是好处多多,比如说我前面文章所提到过的" div+css网页布局对seo的好处 "和网页打开速度更快的优点,所以div+css布局也成为最爱欢迎和关注的焦点. 然而 div+css 浏览器兼容 问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容.用div+css布局的网页在IE下显示一切正常,可是在火狐（FireFox）浏览器里打开，本来好好网页一下子就全乱了.让人怎么看?这一定会影响到你的网站的推广,seo优化,不利于搜所引擎的搜索.所以解决 div+css 浏览器兼容 的问题是完全必须的. 下面来看一下 di+css 浏览器兼容 的实例，区分IE6，IE7，firefox 火狐浏览器CSS的写法： 先来分开区分一下。 首先声明 div+css 浏览器兼容 性IE6与IE7与火狐(firefox)的一些识别规则： 1. IE都能识别* ; 标准浏览器(如FF)不能识别*； 2. IE6能识别*，但不能识别 !important, 3. IE7能识别*，也能识别!important; 4. firefox不能识别*，但能识别!important; 请看下简单的 div+
订阅 div+css