Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/85.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
Html 第页未显示段落文本_Html_Css_User Interface - Fatal编程技术网

Html 第页未显示段落文本

Html 第页未显示段落文本,html,css,user-interface,Html,Css,User Interface,我对web开发相当陌生,我决定重新创建一些网站,而不看它们的源代码进行实践(在我自己设计和编写它们之前)。一切都很顺利,直到我在我的divs中添加了标记 我尝试过的事情:z-index,改用spans,重新启动电脑,关闭浏览器,使用其他浏览器。这可能是个错误,也可能是重复的。如果是重复的,我希望你能把我和另一个问题联系起来,而不是断章取义地结束它。我已经试过搜索了,但是没有找到任何结果 问题: <div id="below-headbar"> <di

我对web开发相当陌生,我决定重新创建一些网站,而不看它们的源代码进行实践(在我自己设计和编写它们之前)。一切都很顺利,直到我在我的
div
s中添加了
标记

我尝试过的事情:
z-index
,改用
span
s,重新启动电脑,关闭浏览器,使用其他浏览器。这可能是个错误,也可能是重复的。如果是重复的,我希望你能把我和另一个问题联系起来,而不是断章取义地结束它。我已经试过搜索了,但是没有找到任何结果

问题:

<div id="below-headbar">
    <div id="cloud-based">
        <img src="images/cloud-based.png">
        <h1>CLOUD BASED</h1>
        <p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
    </div>
    <div id="dynamic-pricing">
        <img src="images/dynamic-pricing.png">
        <h1>DYNAMIC PRICING</h1>
        <p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
    </div>
    <div id="print-ready">
        <img src="images/print-ready.png">
        <h1>PRINT READY</h1>
        <p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
    </div>
</div>
任何帮助/故障排除都将不胜感激。这里是JSFIDLE(到目前为止,整个网站,正如我所说,它是另一个网站的副本,用于实践):
没有这些图片,这个网站看起来有点难看,但不用担心。同样,这可能是一些初学者的错误。谢谢。

快速查看您的JSFIDLE,它显示您的
p
标记的字体大小为0

尝试:


删除
字体大小:0来自标题栏下方的
,更新示例:

@导入url('https://fonts.googleapis.com/css?family=Montserrat');
@导入url('https://fonts.googleapis.com/css?family=Roboto');
* {
保证金:0;
}
html,正文{
宽度:100%;
身高:100%;
字体系列:“Roboto”,无衬线;
}
@字体{
字体系列:'Montserrat-Bold';
src:url(“../font/Montserrat Bold.ttf”);
}
#包装纸{
宽度:1920像素;
高度:6000px;
保证金:自动;
}
#标志包装{
边缘顶部:30px;
左边距:95px;
}
#耳机部{
宽度:100%;
高度:830px;
}
#信息和颜色包装{
宽度:950px;
身高:100%;
}
#自定义信息{
宽度:700px;
高度:360px;
左边距:95px;
边缘顶部:240px;
显示:内联块;
线高:3rem;
}
#自定义信息h1{
文本转换:大写;
字体大小:300;
颜色:rgb(52,52,52);
颜色:#333;
字体系列:“蒙特塞拉特”,无衬线;
}
#自定义信息h1 span{
显示:块;
字号:700;
字体大小:34px;
颜色:#333;
}
#自定义信息{
边缘顶部:20px;
字号:26px;
颜色:rgb(102102);
宽度:550px;
线高:2.8雷姆;
}
#开始{
文本转换:大写;
字号:600;
颜色:白色;
宽度:121px;
背景色:rgb(58204129);
高度:46px;
文本对齐:居中;
边界半径:4px;
边缘顶部:20px;
字体大小:15px;
边框:2个实心rgb(58204129);
光标:指针;
-webkit转换:所有500毫秒;
-moz转换:所有500ms;
-o型过渡:所有500ms;
过渡:所有500ms;
}
#开始:悬停{
背景色:白色;
颜色:rgb(58204129);
}
#耳机颜色{
高度:300px;
宽度:50px;
左边距:850px;
利润上限:-250px;
}
.耳机颜色{
高度:40px;
宽度:40px;
显示:内联块;
边界半径:50%;
边缘底部:20px;
-webkit转换:所有300ms;
-moz转换:所有300ms;
-o-过渡:所有300ms;
过渡:所有300毫秒;
}
.耳机颜色:悬停{
高度:70像素;
宽度:70px;
显示:内联块;
边界半径:50%;
左边距:-15px;
光标:指针;
}
#红色的{
背景色:rgb(111,7,31);
}
#红色:悬停{
利润上限:-20px;
边缘底部:10px;
盒影:3px 3px 5px 3px rgba(101,5,21,2);
}
#黄色的{
背景色:rgb(237202,37);
}
#黄色:悬停{
利润上限:-15px;
边缘底部:5px;
盒影:3px 3px 5px 3px rgba(227192,27,3);
}
#橙色的{
背景色:rgb(251144,63);
}
#橙色:悬停{
利润上限:-15px;
边缘底部:5px;
盒影:3px 3px 5px 3px rgba(241134,53,2);
}
#蓝色的{
背景色:rgb(12184150);
}
#蓝色:悬停{
利润上限:-15px;
盒影:3px3px5px3pxRGB(2174140.2);
}
#耳机{
左边距:1372px;
利润上限:-488px;
}
#井架{
高度:70像素;
宽度:1920像素;
显示器:flex;
垂直对齐:居中;
背景色:rgb(25325125);
边框底部:1px实心rgb(226);
}
#头架{
显示器:flex;
列表样式类型:无;
宽度:400px;
保证金:自动;
右边距:-30px;
边缘顶部:25px;
}
#头杆{
右边距:45像素;
盒影:0px 3px 0px 0px rgb(253251251);
过渡:300ms全部;
边框底部:10px实心rgb(253251);
光标:指针;
}
#头杆:悬停{
盒影:0px 3px 0px 0px rgb(58204129);
边缘底部:-16px;
}
#请求{
显示:内联块;
宽度:130px;
高度:40px;
边界半径:10px;
背景色:rgb(58204129);
颜色:白色;
右边距:710px;
边缘顶部:15px;
线高:40px;
文本对齐:居中;
边框:1px实心rgb(58204129);
过渡:200ms全部;
光标:指针;
}
#请求:悬停{
背景色:白色;
颜色:rgb(58204129);
}
#井架下{
宽度:1260px;
高度:400px;
保证金:自动;
边缘顶部:100px;
/*评论这种风格*/
/*字号:0*/
文本对齐:居中;
}
#床头杆下分区img{
宽度:130px;
高度:自动;
显示:块;
保证金:自动;
}
#井架下分区h1{
字号:26px;
颜色:#333;
字体大小:300;
字体系列:'Montserrat-Bold';
宽度:250px;
左边距:90像素;
}
#井架下方p区{
字体系列:'Roboto',无衬线;
字体大小:400;
线高:27px;
颜色:#333;
宽度:350px;
高度:250px;
保证金:自动;
文本对齐:居中;
}
#基于云计算、动态定价、可打印{
宽度:420px;
高度:400px;
显示:内联块;
颜色:黑色;
字体系列:“蒙特塞拉特”,无衬线;
}

生产化
产品
定制
变得容易

#below-headbar div p {
    font-family:'Roboto', sans-serif;
    font-weight:400;
    line-height:27px;
    color:#333;
    width:350px;
    height:250px;
    margin:auto;
}
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
font-size: 16px;
}