Fatal编程技术网
  • html/
  • CSS不适用于HTML页面

CSS不适用于HTML页面

html css

CSS不适用于HTML页面,html,css,inline,Html,Css,Inline,我最近在记事本中用一些HTML做了一个测试设计，效果非常好。我决定保留设计并将网站扩展为多页网站-因此CSS需要进入外部CSS文件。我这样做了，CSS立即停止了对我的页面的工作 我尝试将CSS编码粘贴回HTML文件中，但仍然不起作用。我花了好几个小时试图解决这个问题，但它仍然不适合我 我错过了一个明显的错误吗 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

我最近在记事本中用一些HTML做了一个测试设计，效果非常好。我决定保留设计并将网站扩展为多页网站-因此CSS需要进入外部CSS文件。我这样做了，CSS立即停止了对我的页面的工作

我尝试将CSS编码粘贴回HTML文件中，但仍然不起作用。我花了好几个小时试图解决这个问题，但它仍然不适合我

我错过了一个明显的错误吗

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Test">
    <meta name="keywords" content="test">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>West</title>
    <style type="text/css">
        html, body {
            height100%;
            margin 0px;
            padding 0px;
        }
        video#bgvid {
            position fixed;
            right 0;
            bottom 0;
            min-width 100%;
            min-height 100%;
            width auto;
            height auto;
            z-index -100;
            background url(imgillamal.png) no-repeat;
            background-size cover;
        }
        #wrapper {
            background-color rgba(255, 255, 255, 0.7);
            -webkit-box-shadow 0px 0px 54px -7px rgba(0, 0, 0, 0.75);
            -moz-box-shadow 0px 0px 54px -7px rgba(0, 0, 0, 0.75);
            box-shadow 0px 0px 54px -7px rgba(0, 0, 0, 0.75);
            width 800px;
            height 100%;
            min-height 100%;
            margin auto;
        }
        #header {
            width 800px;
            height 230px;
            margin auto;
            padding-top 2px;
        }
        .map_image {
            display block;
            width 800px;
            height 230px;
            position relative;
            background-position 0 0;
            background-repeat no-repeat;
        }
        .map_image .map_link {
            display block;
            position absolute;
            text-indent -999em;
            overflow hidden;
        }
        .map_image #map_link_0 {
            width 133px;
            height 131px;
            top 50px;
            left 92px;
        }
        .map_image #map_link_1 {
            width 156px;
            height 112px;
            top 58px;
            left 536px;
        }
        .map_image #map_link_2 {
            width 54px;
            height 46px;
            top 54px;
            left 34px;
        }
        .map_image #map_link_3 {
            width 59px;
            height 51px;
            top 129px;
            left 226px;
        }
        .map_image1 {
            display block;
            width 800.1818182468414px;
            height 50.18181824684143px;
            position relative;
            background-position 0 0;
            background-repeat no-repeat;
        }
        .map_image1 .map_link1 {
            display block;
            position absolute;
            text-indent -999em;
            overflow hidden;
        }
        .map_image1 #map_link_4 {
            width 64.36363649368286px;
            height 39.36363649368286px;
            top 3.90625px;
            left 141.9033966064453px;
        }
        .map_image1 #map_link_5 {
            width 95.36363649368286px;
            height 36.36363649368286px;
            top 7.897705078125px;
            left 416.9033966064453px;
        }
        .map_image1 #map_link_6 {
            width 81.36363649368286px;
            height 37.36363649368286px;
            top 9.90057373046875px;
            left 226.9033966064453px;
        }
        .map_image1 #map_link_7 {
            width 79.36363649368286px;
            height 36.36363649368286px;
            top 6.903411865234375px;
            left 325.90907287597656px;
        }
        .map_image1 #map_link_8 {
            width 111.36363649368286px;
            height 36.36363649368286px;
            top 0.909088134765625px;
            left 524.9005279541016px;
        }
        #content {
        }
        #social {
            bottom0;
            positionfixed;
            z-index150;
            _positionabsolute;
            _topexpression(eval(document.documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)));
            width 800px;
            height72px;
            margin-bottom 20px;
            text-align center;
        }
        .outline {
            border 2px solid #80b78f;
            box-shadow 3px 3px 5px rgba(0, 0, 0, 0.6);
            -moz-box-shadow 3px 3px 5px rgba(0, 0, 0, 0.6);
            -webkit-box-shadow 3px 3px 5px rgba(0, 0, 0, 0.6);
        }
        #sociallinks {
            height 8-px;
            margin-top 525px;
            text-align center;
            font-size 20px;
            font-family Cooper Std Black;
            letter-spacing 5px;
        }
        #logolinks2 {
            text-align center;
        }
        #twitterfeed {
        }
    </style>
</head>
第一个声明中有一个拼写错误

html, body {
height100%;
margin 0px;
padding 0px;
... }
应该是

html, body {
height: 100%;
margin:0px;
padding:0px;
}
很多：在其他地方也丢失了，我建议添加那些冒号并重试。

第一个声明中有一个拼写错误

html, body {
height100%;
margin 0px;
padding 0px;
... }
应该是

html, body {
height: 100%;
margin:0px;
padding:0px;
}
很多：在其他地方也丢失了，我建议添加那些冒号，然后再试一次。

您还应该附加body标签中的内容。 关于CSS，它不会起作用，因为你忽略了：例如，在很多地方

border 2px solid #80b78f;
should be
border:2px solid #80b78f;
您还应该附加“主体内”标记。 关于CSS，它不会起作用，因为你忽略了：例如，在很多地方

border 2px solid #80b78f;
should be
border:2px solid #80b78f;
有不少打字错误。确保您正在输入冒号和分号：

height: x;
不是：

有不少打字错误。确保您正在输入冒号和分号：

height: x;
不是：

你应该把：在属性和值之间；如果你看到你的css代码，你永远不会使用这个。 我修复了它，请复制并粘贴到你的html文件

<style type="text/css">
html, body {
height : 100%;
margin : 0px;
padding : 0px;
}
video#bgvid {
position : fixed; right : 0; bottom : 0;
min-width  : 100%; min-height : 100%;
width : auto; height : auto; z-index : -100;
background : url(imgillamal.png) no-repeat;
background-size : cover;
}
#wrapper {
background-color : rgba(255, 255, 255, 0.7);
-webkit-box-shadow : 0px 0px 54px -7px rgba(0,0,0,0.75);
-moz-box-shadow : 0px 0px 54px -7px rgba(0,0,0,0.75);
box-shadow : 0px 0px 54px -7px rgba(0,0,0,0.75);
width : 800px;
height : 100%;
min-height : 100%;
margin : auto;
}
#header {
width : 800px;
height : 230px;
margin : auto;
padding-top : 2px;
}
.map_image { display : block; width : 800px; height : 230px; position : relative; background-position : 0 0; background-repeat : no-repeat; }
.map_image .map_link { display : block; position : absolute; text-indent : -999em; overflow :     hidden; }
.map_image #map_link_0 { width : 133px; height : 131px; top : 50px; left : 92px; }
.map_image #map_link_1 { width : 156px; height : 112px; top : 58px; left : 536px; }
.map_image #map_link_2 { width : 54px; height : 46px; top : 54px; left : 34px; }
.map_image #map_link_3 { width : 59px; height : 51px; top : 129px; left : 226px; }
.map_image1 { display : block; width : 800.1818182468414px; height : 50.18181824684143px; position : relative; background-position : 0 0; background-repeat : no-repeat; }
.map_image1 .map_link1 { display : block; position : absolute; text-indent : -999em; overflow : hidden; }
.map_image1 #map_link_4 { width 64.36363649368286px; height : 39.36363649368286px; top 3.90625px; left 141.9033966064453px; }
.map_image1 #map_link_5 { width 95.36363649368286px; height : 36.36363649368286px; top : 7.897705078125px; left 416.9033966064453px; }
.map_image1 #map_link_6 { width : 81.36363649368286px; height : 37.36363649368286px; top : 9.90057373046875px; left 226.9033966064453px; }
.map_image1 #map_link_7 { width 79.36363649368286px; height : 36.36363649368286px; top : 6.903411865234375px; left 325.90907287597656px; }
.map_image1 #map_link_8 { width 111.36363649368286px; height 36.36363649368286px; top :0.909088134765625px; left 524.9005279541016px;}
#content {
}
#social {
bottom : 0;
position : fixed;
z-index150;
position: absolute;
width : 800px;
height : 72px;
margin-bottom : 20px;
text-align : center;
}
.outline {
border : 2px solid #80b78f;
box-shadow : 3px 3px 5px rgba(0,0,0,0.6);
-moz-box-shadow : 3px 3px 5px rgba(0,0,0,0.6);
-webkit-box-shadow : 3px 3px 5px rgba(0,0,0,0.6);
}
#sociallinks {
height : 8-px;
margin-top : 525px;
text-align : center;
font-size : 20px;
font-family : Cooper Std Black;
letter-spacing : 5px;
}
#logolinks2 {
text-align : center;
}
#twitterfeed {
}
</style>
最好的

你应该把：放在属性和值之间；如果你看到你的css代码，你永远不会使用这个。 我修复了它，请复制并粘贴到你的html文件

<style type="text/css">
html, body {
height : 100%;
margin : 0px;
padding : 0px;
}
video#bgvid {
position : fixed; right : 0; bottom : 0;
min-width  : 100%; min-height : 100%;
width : auto; height : auto; z-index : -100;
background : url(imgillamal.png) no-repeat;
background-size : cover;
}
#wrapper {
background-color : rgba(255, 255, 255, 0.7);
-webkit-box-shadow : 0px 0px 54px -7px rgba(0,0,0,0.75);
-moz-box-shadow : 0px 0px 54px -7px rgba(0,0,0,0.75);
box-shadow : 0px 0px 54px -7px rgba(0,0,0,0.75);
width : 800px;
height : 100%;
min-height : 100%;
margin : auto;
}
#header {
width : 800px;
height : 230px;
margin : auto;
padding-top : 2px;
}
.map_image { display : block; width : 800px; height : 230px; position : relative; background-position : 0 0; background-repeat : no-repeat; }
.map_image .map_link { display : block; position : absolute; text-indent : -999em; overflow :     hidden; }
.map_image #map_link_0 { width : 133px; height : 131px; top : 50px; left : 92px; }
.map_image #map_link_1 { width : 156px; height : 112px; top : 58px; left : 536px; }
.map_image #map_link_2 { width : 54px; height : 46px; top : 54px; left : 34px; }
.map_image #map_link_3 { width : 59px; height : 51px; top : 129px; left : 226px; }
.map_image1 { display : block; width : 800.1818182468414px; height : 50.18181824684143px; position : relative; background-position : 0 0; background-repeat : no-repeat; }
.map_image1 .map_link1 { display : block; position : absolute; text-indent : -999em; overflow : hidden; }
.map_image1 #map_link_4 { width 64.36363649368286px; height : 39.36363649368286px; top 3.90625px; left 141.9033966064453px; }
.map_image1 #map_link_5 { width 95.36363649368286px; height : 36.36363649368286px; top : 7.897705078125px; left 416.9033966064453px; }
.map_image1 #map_link_6 { width : 81.36363649368286px; height : 37.36363649368286px; top : 9.90057373046875px; left 226.9033966064453px; }
.map_image1 #map_link_7 { width 79.36363649368286px; height : 36.36363649368286px; top : 6.903411865234375px; left 325.90907287597656px; }
.map_image1 #map_link_8 { width 111.36363649368286px; height 36.36363649368286px; top :0.909088134765625px; left 524.9005279541016px;}
#content {
}
#social {
bottom : 0;
position : fixed;
z-index150;
position: absolute;
width : 800px;
height : 72px;
margin-bottom : 20px;
text-align : center;
}
.outline {
border : 2px solid #80b78f;
box-shadow : 3px 3px 5px rgba(0,0,0,0.6);
-moz-box-shadow : 3px 3px 5px rgba(0,0,0,0.6);
-webkit-box-shadow : 3px 3px 5px rgba(0,0,0,0.6);
}
#sociallinks {
height : 8-px;
margin-top : 525px;
text-align : center;
font-size : 20px;
font-family : Cooper Std Black;
letter-spacing : 5px;
}
#logolinks2 {
text-align : center;
}
#twitterfeed {
}
</style>
最好的

您的代码中有很多拼写错误，主要是CSS中缺少冒号。以下是正确的CSS代码：

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url(imgillamal.png) no-repeat;
  background-size: cover;
}
#wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.75);
  width: 800px;
  height: 100%;
  min-height: 100%;
  margin: auto;
}
#header {
  width: 800px;
  height: 230px;
  margin: auto;
  padding-top: 2px;
}
.map_image { display: block; width: 800px; height: 230px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow:             hidden; }
.map_image #map_link_0 { width: 133px; height: 131px; top: 50px; left: 92px; }
.map_image #map_link_1 { width: 156px; height: 112px; top: 58px; left: 536px; }
.map_image #map_link_2 { width: 54px; height: 46px; top: 54px; left: 34px; }
.map_image #map_link_3 { width: 59px; height: 51px; top: 129px; left: 226px; }
.map_image1 { display: block; width: 800.1818182468414px; height: 50.18181824684143px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image1 .map_link1 { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image1 #map_link_4 { width 64.36363649368286px; height: 39.36363649368286px; top 3.90625px; left 141.9033966064453px; }
.map_image1 #map_link_5 { width 95.36363649368286px; height: 36.36363649368286px; top: 7.897705078125px; left 416.9033966064453px; }
.map_image1 #map_link_6 { width: 81.36363649368286px; height: 37.36363649368286px; top: 9.90057373046875px; left 226.9033966064453px; }
.map_image1 #map_link_7 { width 79.36363649368286px; height: 36.36363649368286px; top: 6.903411865234375px; left 325.90907287597656px; }
.map_image1 #map_link_8 { width 111.36363649368286px; height 36.36363649368286px; top :0.909088134765625px; left 524.9005279541016px;}
#social {
  bottom: 0;
  position: fixed;
  z-index: 150;
  position: absolute;
  width: 800px;
  height: 72px;
  margin-bottom: 20px;
  text-align: center;
}
.outline {
  border: 2px solid #80b78f;
          box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
     -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
  -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
}
#sociallinks {
  height: 8-px;
  margin-top: 525px;
  text-align: center;
  font-size: 20px;
  font-family: "Cooper Std Black";
  letter-spacing: 5px;
}
#logolinks2 { text-align: center; }
你不需要把所有这些都放在一个标签中，一个带有有效css的.css文件就可以了。

你的代码中有很多拼写错误，主要是css中没有冒号。以下是正确的CSS代码：

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url(imgillamal.png) no-repeat;
  background-size: cover;
}
#wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.75);
  width: 800px;
  height: 100%;
  min-height: 100%;
  margin: auto;
}
#header {
  width: 800px;
  height: 230px;
  margin: auto;
  padding-top: 2px;
}
.map_image { display: block; width: 800px; height: 230px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow:             hidden; }
.map_image #map_link_0 { width: 133px; height: 131px; top: 50px; left: 92px; }
.map_image #map_link_1 { width: 156px; height: 112px; top: 58px; left: 536px; }
.map_image #map_link_2 { width: 54px; height: 46px; top: 54px; left: 34px; }
.map_image #map_link_3 { width: 59px; height: 51px; top: 129px; left: 226px; }
.map_image1 { display: block; width: 800.1818182468414px; height: 50.18181824684143px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image1 .map_link1 { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image1 #map_link_4 { width 64.36363649368286px; height: 39.36363649368286px; top 3.90625px; left 141.9033966064453px; }
.map_image1 #map_link_5 { width 95.36363649368286px; height: 36.36363649368286px; top: 7.897705078125px; left 416.9033966064453px; }
.map_image1 #map_link_6 { width: 81.36363649368286px; height: 37.36363649368286px; top: 9.90057373046875px; left 226.9033966064453px; }
.map_image1 #map_link_7 { width 79.36363649368286px; height: 36.36363649368286px; top: 6.903411865234375px; left 325.90907287597656px; }
.map_image1 #map_link_8 { width 111.36363649368286px; height 36.36363649368286px; top :0.909088134765625px; left 524.9005279541016px;}
#social {
  bottom: 0;
  position: fixed;
  z-index: 150;
  position: absolute;
  width: 800px;
  height: 72px;
  margin-bottom: 20px;
  text-align: center;
}
.outline {
  border: 2px solid #80b78f;
          box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
     -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
  -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
}
#sociallinks {
  height: 8-px;
  margin-top: 525px;
  text-align: center;
  font-size: 20px;
  font-family: "Cooper Std Black";
  letter-spacing: 5px;
}
#logolinks2 { text-align: center; }
您不需要将所有这些内容都放在标签中-一个带有有效css的.css文件可以正常工作。

您的标签和内容在其中的什么位置？除非你只发布了一个片段，否则我需要更多的信息。你的CSS也是无效的。你所有的：'在属性后面的什么地方？你的标签和内容在里面的什么地方？除非你只发布了一个片段，否则我需要更多的信息。您的CSS也无效。属性后面的所有：'在哪里？