Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
HTML5/CSS3:CSS区域_Html_Css - Fatal编程技术网

HTML5/CSS3:CSS区域

HTML5/CSS3:CSS区域,html,css,Html,Css,我现在正在学习HTML5和CSS3。目前,我已经进入CSS领域。当我尝试HTML时,文本不会传递到区域中 这是我的HTML <!doctype html> <html> <head> <meta charset="utf-8" /> <title>CSS Regions Example</title> <style type="text/css"> body, html{height: 100

我现在正在学习HTML5和CSS3。目前,我已经进入CSS领域。当我尝试HTML时,文本不会传递到区域中

这是我的HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS Regions Example</title>
  <style type="text/css">
    body, html{height: 100% width: 100%;}
    body{
      font-family: serif;
      color: black;
      font-size: large;
    }
    #source{
      -webkit-flow-into: main;
    }
    .region{
      -webkit-flow-from: main;
      margin: 0 25px 0 0;
      background: #EEE8AA;
      padding: 20px;
    }
    #region1{
      width: 20%;
      height: 50%;
      float: left;
    }
    #region2{
      width: 20%;
      height: 50%;
      float: left;
    }
    #workarea{
      position: relative;
      padding: 25px;
    }
  </style>
</head>
<body>
  <div id="source">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar
      ultricies, purus lectus malesuada libero, sit amet commodo magna
      eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a
      tellus. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Proin pharetra nonummy pede.</p>
  </div>
  <div id="workarea">
    <div id="region1" class="region"></div>
    <div id="region2" class="region"></div>
  </div>
</body>
</html>

CSS区域示例
正文,html{高度:100%宽度:100%;}
身体{
字体系列:衬线;
颜色:黑色;
字体大小:大号;
}
#来源{
-webkit流程分为:main;
}
.地区{
-webkit流来自:main;
利润率:0.25px 0.0;
背景:#EEE8AA;
填充:20px;
}
#区域1{
宽度:20%;
身高:50%;
浮动:左;
}
#区域2{
宽度:20%;
身高:50%;
浮动:左;
}
#工作区{
位置:相对位置;
填充:25px;
}
Lorem ipsum dolor sit amet,是一位杰出的领导者。
马萨是康格·马萨的前锋。普尔文纳大酒店
ultricies,自由之门,amet commodo magna
厄洛斯·奎斯·乌纳。努克·维韦拉·埃尼姆。福斯埃斯特。维瓦摩斯a
泰勒斯。佩伦特式居住者morbi tristique Sentecus et netus et
malesuada是著名的ac turpis egestas。普罗因·法雷特拉·诺米·佩德

这本书(我从中获得此示例代码)说,我应该通过在快捷方式的目标中执行以下操作来启用浏览器中的CSS区域:浏览器快捷方式>属性>添加“--启用CSS区域”,但问题仍然存在

有人能帮我吗


PS:我已经在IE11和Chrome ver 14上尝试过这一点,但大多数浏览器似乎还不支持区域:

它在铬上不起作用

它可以与带有-ms-前缀的ie一起工作


也许你应该改用Chrome 14?这似乎太低了…我们现在不是在40+?…无论如何。大多数浏览器还不支持它们(实验选项除外)-看起来IE 10+和Safari都支持这一点。使用CSS区域需要不止一个html文件。谢谢你提供的信息,我目前正在研究这门课程的考试。这是作为示例提供的代码,但经过测试,我找不到哪里会出错