[已解决]为何用了CSS导入模式会使得页面出现问题

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 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[type=text]{
                        width: 500px;
                        height: 30px;
                }
                input[type=button]{
                        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="#">About  Baidu</a>
                        <a href="#">百度推广</a>
                        </div>
                        <div  class = "underfloor2">
                        
                        ©2019 Baidu 
                        <a href="#">使用百度前必读 意见反馈</a>
                        京ICP证030173号
                        <a href="#">京公网安备11000002000001号 </a>
                        
                        </div>
                

        </body>
</html>

最佳答案

月排行榜 / 总排行榜

不二如是

2019-2-10 09:14:33

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

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

跳转到最佳答案楼层

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

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

不二如是 · 发表于 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层级关系哈

账号		自动登录	找回密码
密码			立即注册