您好!欢迎访问宝安深圳富海360总部
欢迎来电咨询:13728723580

宝安深圳做网站公司解决浏览器兼容性的技巧

文章出处:ba.bafuhai360.com | 发布时间:2018-01-19 15:36

宝安网站建设公司-网站制作宝安网站seo优化宝安企业网站建设公司

       对于web2.0的过度我们尽量使用xhtml格式来写代码,再次给大家推荐一个教程,就是php100教程。里面在php开发的前期有一个很好的xhtml教程,是李炎恢老师主讲的,大家有时间的话好好学学。

其次新建html页面时最好用DreamWeaver或者类似的网页工具来建,因为它会自动生成一些代码,如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个代码的指定,因为DOCTYPE会影响css的编译,作为w3c的标准,我们一定要加上这个DOCTYPE的声明。

下面主要讲一下在css在网页设计和布局中的技巧,让你如何更好的去解决浏览器的兼容性问题

1.div的垂直居中问题。
首先呢,我说一下在代码书写时的一个问题,一个良好的代码书写习惯对于程序员来说非常重要。比如简单的代码缩进,css类的起名等。对于代码的缩进,改善代码的层次结构,再次我向大家推荐一款工具,就是微软的Visual studio。因为本身来说我就是做.net开发的,所以对微软的.net开发工具也比较熟悉。对于很多常见的代码格式例如html,xml,aspx,asp,php等常见的网页文件,他都可以对此进行代码栅格化。这样非常有利于找到层次结构,加快开发。具体方法是把以html,xml,aspx,asp或者php为后缀的网页文件用visual studio打开,然后按下ctrl+E,然后按下ctrl+D.有时Visual Studio会提示不是vs(之后把visual Studio一律叫做vs)的内部命令。这时不要慌张,做一个简单的配置就可以。
点工具》》选项》》环境》》键盘》》重置,如果测试还是不行的话,就把刚才说的这个键盘里面的"应用以下其他键盘映射方案"复选框勾选Visual C#2005,这样应该就没有问题,如果大家在测试的过程中还有什么问题,可以在本网站(www.woyexing.com)的首页联系我。

下来说一下wrapper这个词,在英文单词中他是外套,外壳的意思。所以在html中,我们习惯性的在<body>和</body>之间新建一个<DIV class="wrapper">,以wrapper为类名的一个<div>.参考上一点,我们随时可以利用vs把自己的代码栅格化,使得整体美观,有利于开发。

现在说div内容的居中问题,首先给div一个高度,然后让行高和div的高度一样高;
示例代码如下:
<!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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        .wrapper
        {
            border: #F00 solid 1px;
            width: 998px;
            height: 700px;
            margin: 0 auto;
        }
        .wrapper .header
        {
            border: #00F solid 1px;
            height: 40px;
            line-height: 40px;
            width: 996px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            头部部分内容头部部分内容头部部分内1容头部部分内容头部部分内容头部部分2内容
        </div>
    </div>
</body>
</html>

(此内容由ba.bafuhai360.com提供)
返回列表