网站未显示CSS

 

发生这种情况时，是否有很多要解决的事情？一切似乎都已正确链接。我正在Chrome中查看该项目，也许想知道它是否与供应商前缀有关。

 

 

答：是的，正如Brent在浏览器中查看网站时所说的那样，样式没有显示出来。我使用Coda 2作为文本编辑器，当我从Coda预览时，样式显示很好。主页位于henrymorrow.com，我将在下面包含我的代码。

 

的HTML

 

<！DOCTYPE html> 

< html > 

< head > 

< title >亨利·莫罗| 主页</ title > < meta charset = “ UTF-8” > <！-将与说明一起显示的信息>-> < meta name = “ description” content = “欢迎来到我的页面！我是一名招聘人员，我很乐意为您的下一个项目提供帮助！在这里您可以找到我的简历以及其他一些有关我的一般信息。感谢您的光临！” /> <    

       

      = “ width = device-width，initial-scale = 1”  /> 

<！-外部规范化，CSS和Javascript-> < link rel = “ stylesheet” type = “ text / css” href = “ css / normalize的CSS” > <链接的href = 'https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu|Droid+Sans'相对= '样式表'类型= '文本/样式表' > <链路相对= “样式表”类型= “文本/ css”href = “ css / style.css” > </

 

 

头> 

<正文> 

<！-网格中的头-> <头类= “ main-header” > < div类= “背景” > < h1类= “主徽标” > < a href = “索引。 html“ > < img src = ” IMG / Henrylogo.svgz“ alt = ”徽标“ > </ a > </ h1 > < ul class = ”主导航“> < li > < a

      

                 HREF = “index.html的”  ID = “选中” >主页</一> </李> 

<李> <一个HREF = “hbiofloat.html” >生物</一> </李> <李> <一个HREF = “ hresumefloat.html” >恢复</ a > </ li > < li > < a href = “ hcontactfloat.html”>联系</ a                 

                 

                 > </ li > 

</ ul > < button class = “汉堡” > ＆＃9776; </ button > < button class = “十字” > ＆＃735; </按钮> < DIV类= “菜单” > < UL > <李> <一个HREF = “index.html的” > HOME </一> </李> <            

        

                 = “hbiofloat.html” > BIO </一> </李> 

<李> <一个HREF = “hresumefloat.html” > RESUME </一> </李> <李> <一个HREF = “hcontactfloat.html” >联系人</ a > </ li > </ ul > </ div > </ div > <div class = “ main-heading” >                 

 

           

            招募者

</ DIV > < DIV类= “标题项” > <一个HREF = “hresumefloat.html” >恢复</一> </ DIV > </报头> <！ -     <DIV类=“主横幅hide-mobile“>         <h1>这是主要横幅标题</ h1>         <p> Andouille猪排pancetta鸡腿切成圆形的牛肋骨猪s火腿。</ p>     </ div> -> <！-Body网格中的列-> <div class = “内容” >           

 

        < div  class = “” > 

< h2 class = “ content-header” >简介</ h2 > < div class = “ intro-content” > < p >我叫Henry Morrow，我目前是招生代表。我非常享受与客户建立联系的机会，可以帮助他们实现未来的目标！我也热衷于学习有关技术及其可用来使生活更轻松的方法。这种驱动力使我学习了编码并建立了这个网站，以便其他人可以了解我如何帮助他们的招聘工作。<             

                 

                  > 

</ div > < div class = “ break” > < hr > </ div > < h1 class = “ content-header” >需要帮助来实现您的招聘目标？</ H1 > < DIV ID = “租用”类= “内容操作” > <一个HREF = “hcontactfloat.html” >联系我</一> <                

 

        > 

</ div > <！-Footer-> < footer class = “ main-footer” > < div > < div class = “ footer-logo” > < img src = “ IMG / Henrylogo.svgz” alt = “徽标” > </ div > < div >亨利·莫罗</ div > < div > < ul class = “ footer-nav” > <li > < a href =      

 

            “index.html的”  ID = “选择” >主页</一> </李> 

<李> <一个HREF = “hbiofloat.html” >生物</一> </李> <李> <一个HREF = “ hresumefloat.html” >恢复</一> </李> <李> <一个HREF = “hcontactfloat.html” >联系</ a > </ li >            

            

            

         </ ul > 

</ div > < div id = “ copyright” > ＆copy; 2015亨利莫罗</ DIV > < DIV类= “图标排” > <一个HREF = “https://www.facebook.com/henry.morrow1” > < IMG类= “页脚图标” SRC = “IMG /whitefacebookembed.svg“ alt = ” Facebook徽标“ > </ a > <          

         

             

         > < IMG 类= “页脚图标”  SRC = “IMG / whitetwittericonembed.svg”  ALT = “Twitter的标志” > </一>  

<一个HREF = “https://instagram.com/honron66/” > < IMG类= “ footer-icon” src = “ img / whiteinstagramiconembed.svg” alt = “ Instagram徽标” > </ a > < a href = “ https://www.linkedin.com/pub/henry-morrow/32/540 / 65b“ > <img class = “页脚图标”            

           SRC = “IMG / whiteinkediniconembed.svg”  ALT = “LinkedIn标识” > </一> 

<一个HREF = “电子邮件地址：hjmorrow23@gmail.com” > < IMG类= “页脚图标” SRC = “IMG / whitemailembed。 svg“ alt = ”电子邮件徽标“ > </ a > </ div > </ div > </ footer > <脚本src = ” http://code.jquery.com/jquery-1.11.0.min.js“类型= “文字/ JavaScript”                 

     charset = “ utf-8” > </脚本> 

<脚本src = “ js / henrysite.js” type = “ text / javascript” charset = “ utf-8” > </脚本> </ body > </ html >     

 

 

的CSS

 

/ *页面样式

=============================== * / 

* { -moz- box-sizing ：border-box ; 框大小：border-box ；} body {字体：正常1 em / 1.5 sans-serif ；颜色：＃222 ; 背景颜色：＃edeff0 ; 溢出-x ：隐藏; } p { text-indent ：2.0 rem ; } / *主要版面样式

 

=============================== * / 

。内容{ margin-top ：6.25 rem ; } 。main-header { padding-top ：0.625 rem ; 底部距：0.625 rem ; 身高：25雷姆; 背景：线性梯度（RGBA （192 ，192 ，192 ，0.6 ），RGBA （192 ，192 ，192 ，

 

         0.6 ）

），网址（'../img/tie.jpg' ）; 背景大小：封面；背景位置：中心; 字体家族：“ Droid Sans” ，sans-serif ；} 。main-logo { margin-top ：0 ; 底边距：0 ; 字体大小：1.5 em ; 文字对齐：向左；显示：inline-block ; } 。主徽标       

     

 IMG ，

。footer-logo  img  {

宽度：100 px ; 高度：100像素; } 。主标志一，。标题项目a { display ：inline-block ; text-align ：center ; 颜色：白色; 填充：0.625雷姆0.625雷姆; 文字装饰：无；} 。主标识一     

 

 ：悬停，

。主导航 a ：悬停，

。页脚-NAV 一个：悬停 {

颜色：灰色; 过渡：0.5 s ; } ＃选择，＃选择{颜色：灰色；} 。标题项目a ：悬停{ background-color ：white ; 颜色：灰色; 过渡：0.5     

 

     s ; 

} 

。标题项目，＃更多项目{ text-align ：center ; } 。标题项目a {边框：1 px纯白色；} 。main-nav { display ：none ; } 。汉堡{背景：没有; 职位：绝对; 最高：0 ; 正确：0 ;

 

  行高：45 px ; 

填充：0 px 15 px 0 px 15 px ; 颜色：#fff ; 边界：0 ; 字体大小：1.4 em ; font-weight ：粗体; 光标：指针; 大纲：没有; z索引：10000000000000 ；} 。交叉{背景：无;     

  

  职位：绝对; 

顶部：0像素; 正确：0 ; 填充：0 px 15 px 0 px 15 px ; 颜色：#fff ; 边界：0 ; 字体大小：3 em ; 行高：65 px ; font-weight ：粗体; 光标：指针; 大纲：没有;  

 

  z索引：10000000000000 ；

} 

。菜单{ z-index ：1000000 ; font-weight ：粗体; 字体大小：0.8 em ; 宽度：100 ％; 背景：＃131313 ; 职位：绝对; text-align ：center ;} 。菜单ul { margin ：0 ; 填充：0 ; 列表样式类型

       

      ： 没有;  list-style-image ： 无；} 

。菜单 li  {显示： 块;    填充：15像素 0  15像素 0 ;  border-bottom ：＃1d1f20  1 px 实心;} 

。菜单 li ：悬停{显示： 块;     背景：＃181818 ;  填充：15 px  0  15 px  0;  border-bottom ：＃1d1f20  1 px 实心;} 

。菜单 ul  li  a  { 文本装饰：无；  边距： 0 px ;  颜色：#fff ;} 

。菜单 ul  li  a ：悬停 {  颜色： #fff ;  文字装饰：无;} 

。菜单 a {文本装饰：无； 颜色：白色;} 

。菜单 a ：悬停{文本装饰：无； 颜色：白色；} 

。主标题{颜色：白色; text-align ：center ; 字体大小：3 rem ；字体粗细：600 ; 底部填充：1.5 rem ; } 。内容标题{ text-align ：center ; 底部填充

 

  ： 3.125雷姆; 

} 

。内容简介{ padding-left ：12.5 rem ; 右填充：12.5 rem ; 底部距：3.125雷姆; 最小宽度：100 ％; } 。中断{轮廓：1 px实心透明; 顶部填充：0.625 rem ; 底部填充：1.25雷姆; }小时

 

 {

高度：0.0625雷姆; 不透明度：0.4 ; } ＃imageGallery {宽度：100 ％; 高度：100 ％; } ＃imageGallery李{显示：块; text-align ：center ; 底部填充：1.25雷姆; } ＃imageGallery IMG {宽度：16 REM ;   

 

    高度： 16雷姆; 

填充：0.3125雷姆; } ＃覆盖{背景：RGBA （0 ，0 ，0 ，0.8 ）; 宽度：100 ％; 高度：100 ％; 最高：0 ; 左：0 ; } ＃更多项目，＃雇用{ padding-top ：0.625     

 

     雷姆; 

底部距：3.125雷姆; } ＃更多项目a ：悬停，＃聘用a ：悬停{ background-color ：black ; 颜色：白色; 过渡：0.5 s ; } ＃租赁{文本对齐：中心; } ＃以上项目一个，＃聘请一个{边界：     

 

     2 px 纯 黑色; 

文字装饰：无；颜色：黑色; 填充：0.625雷姆; } 。icon-row a { padding-right ：.25 rem ; } 。footer-icon { width ：1 rem ; 高度：1雷姆; 边界：无; } 。主要页脚{ text-align ：     

 

     中心; 

上边距：1.875雷姆; 填充：4雷姆2雷姆; 背景色：银色；颜色：白色; } 。footer-logo { text-align ：center ; 显示：inline-block ; 字体大小：1 rem ; 字体粗细：200 ; padding-bottom ：.5 rem ; } 。页脚导航     

 

 li { 

display ：inline-block ; 左填充边：.5 rem ; padding-bottom ：.5 rem ; padding-top ：.5 rem ；字体粗细：200 ; } 。footer-nav a {文本装饰：无；颜色：白色; } ＃版权{ padding-bottom ：.5 rem ; } / *浮动Clearfix     

 

    =============================== * / 

。组：后{内容：“” ; 显示：表; 明确：两者; } / *媒体查询    =============================== * / @ media （最小宽度：768px ）{ / *主要版式样式    ============================== * / body { padding-top ：4.6875 rem ; } 。内容{ margin-top ：

 

     

         40雷姆; 

} 。主标题{职位：绝对；最高：0 ; 宽度：100 ％; 高度：40雷姆; } 。主标志，。主导航李{ float ：left ; } 。主要标题{ margin-top ：12 rem ; } 。main-nav { text-align ：right    

 

         ; 

显示：inline-block ; padding-left ：50 px ; 浮动：对; } 。菜单，。汉堡包，。交叉{显示：无; } 。main-nav a { display ：inline-block ; text-align ：center ; 颜色：白色; 填充：0.625雷姆; 文字装饰         

 

         

        ： 没有; 

} 。li nav li {边距：0.375 rem ; 左边距：0.625雷姆; text-align ：center ; } 。选择{颜色：灰色; } ＃imageGallery {文本对齐：中心; } ＃imageGallery李{显示：内联块; text-align ：center ;    

 

    } 

＃覆盖{背景：线性梯度（RGBA （0 ，0 ，0 ，0.6 ），RGBA （0 ，0 ，0 ，0.6 ））; } } @ media （最小宽度：1像素）和（最大宽度：767像素）{ 。li nav li {上边距：0.75雷姆；}