sxfxtf 发表于 2019-2-10 06:47:30

为何用了CSS导入模式会使得页面出现问题

本帖最后由 sxfxtf 于 2019-2-10 06:48 编辑

新鱼友,权限不够无法上传图片.
自己写了个百度网页,把CSS代码写在<head>标签中显示都OK,
但是我把CSS单独写到一个文件后用<link> (79行)导入后字体就不不会居中显示了,请问这个是什么问题?


<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <style type="text/css">
               
                body{
                        text-align: center;
                }
                .over_head{
                        height:8px;
                }
                .head{
                        height: 150px;
                        text-indent: 1420px;
                        word-spacing: 10px;
                        /* background-color: pink; */
                }
                .more_product{
                        color: white;
                        background-color: #38f;
                        padding: 5px;
                }
                .head a{
                        font-size: 14px;
                }
                .guid{
                        color: black;
                        font-weight: bold;
                }
                .guid-1{
                        color: black;
                }
                input{
                        width: 500px;
                        height: 30px;
                }
                input{
                        height: 38px;
                        width: 100px;
                        background-color: #38f;
                        color: white;
                        border: 0px;
                        font-size: 15px;
                }
                .body{
                        height: 580px;
                        /* background-color: orange; */
                }
                .footer p {
                        font-size: 12px;
                        color: #666;
                }
                .underfloor1{
                        word-spacing: 12px;
                        font-size: 10px;
                        height: 20px;
                }
                .underfloor1 a{
                        color: #999;
                }
                .underfloor2{
                       
                        color: #999;
                        word-spacing: 5px;
                        font-size: 10px;
                        height: 20px;
/*                         background-color: aquamarine;
                        background-image: url(icon.gif);
                        background-position: -1000px -96px;
                       */
                }
                .underfloor2 a{
                        color: #999;
                       
                }
                </style>
                <!-- <link rel="stylesheet"href="new_file.css"/> -->

        </head>
        <body>
                <div class="over_head">
                       
                </div>
                <div class="head">
                        <a href="#" class="guid">新闻</a>
                        <a href="#" class="guid">hao123</a>
                        <a href="#" class="guid">地图</a>
                        <a href="#" class="guid">视频</a>
                        <a href="#" class="guid">贴吧</a>
                        <a href="#" class="guid">学术</a>
                        <a href="#" class="guid-1">登陆</a>
                        <a href="#" class="guid-1">设置</a>
                        <a href="#" class="more_product">更多产品</a>
                       
                </div>
                <div class="body">
                        <img src="bd_logo1.png" width="270"px height="129"px>
                <div id="" class="search">
                        <input type="text" name="" id="" value="" />
                        <input type="button" name="" id="" value="百度一下" />
                </div>       
                </div>
                <div class="footer">
                        <div id="">
                        <img src="ewm.png" width="65px">
                        <p>百度</p>
                        </div>
                        <div class="underfloor1" >
                        <a href="#">把百度设为主页</a>
                        <a href="#">关于百度</a>
                        <a href="#">AboutBaidu</a>
                        <a href="#">百度推广</a>
                        </div>
                        <divclass = "underfloor2">
                       
                        ©2019&nbsp;Baidu&nbsp;
                        <a href="#">使用百度前必读 意见反馈</a>
                        京ICP证030173号
                        <a href="#">京公网安备11000002000001号 </a>
                       
                        </div>
               

        </body>
</html>

像番茄加两个蛋 发表于 2019-2-10 09:09:46

你得给我们看看new_file.css里得代码，我目测是new_file.css中的代码与你上面的css样式层叠了。你试试把new_file.css代码放在前面。{:7_123:}

不二如是 发表于 2019-2-10 09:14:33

1、样式冲突，按照优先级排序设置“唯一”的css，建议将代码发全

2、可以将封装后的xxx.css，通过 link 嵌入并放置 head 元素中

sxfxtf 发表于 2019-2-10 20:41:04

像番茄加两个蛋 发表于 2019-2-10 09:09
你得给我们看看new_file.css里得代码，我目测是new_file.css中的代码与你上面的css样式层叠了。你试试把new ...

CSS代码就是从我发的这个代码中复制过去的.都一样

sxfxtf 发表于 2019-2-10 20:42:06

不二如是 发表于 2019-2-10 09:14
1、样式冲突，按照优先级排序设置“唯一”的css，建议将代码发全

2、可以将封装后的xxx.css，通过 link...

我级别不够,没办法发附件上来.所以只能把代码上传了.我自己在研究下你说的 原因1,多谢

不二如是 发表于 2019-2-11 07:36:33

sxfxtf 发表于 2019-2-10 20:42
我级别不够,没办法发附件上来.所以只能把代码上传了.我自己在研究下你说的 原因1,多谢

试着在xxx.css文件中调整z-index层级关系哈
页: [1]
查看完整版本: 为何用了CSS导入模式会使得页面出现问题