Question

在生成的页面上似乎没有显示3个项目，我输错了什么？

PHP：

<?php

header('Content-type: text/html; charset=UTF-8');   
echo "<!DOCTYPE HTML>";
echo "<html>";
echo "<head>";


echo "  <title>This is a test</title>";
echo '    <link rel="stylesheet" href="t3.css">';
echo "</head>";

echo '<body>';
echo '<div class="f1">';
echo "testing...";
echo "</div>";

echo '<div class="f2">';
echo '<p class="f2 s1">first</p>';
echo '<p class="f2 s2">second</p>';
echo '<p class="f2 s3">third</p>';
echo '<form>';
echo '<input type="submit" value="Press this button">';
echo '</form>';

echo '</div>';
echo "</body>";
echo "</html>";

?>

CSS：

body 
{
   font-family: Arial;
   margin: 0px;
}


.f1 {
    float: left;
    height: 45px;    
    width: 100%;
    position:relative; 
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    text-align:center;
    background-color: yellow;
    font-weight: 100;
text-align: center;
font-size: 2.3em;
}
.f2 {
    float: left;
  position: fixed; 
  top: 10%;
  left: 40%;
  width: 500px;
  height: 350px;
  margin: auto;
  background-color: #efefef;
  border-radius: 15px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 1);

  overflow: hidden;

}
.f2 .s1 {
   position: relative;
   left: 30px;
   top: 20px;
    color: red;
}

.f2 .s2 {
   position: relative;
   left: 30px;
   top: 50px;
    color: blue;
}

.f2 .s3 {
   position: relative;
   left: 30px;
   top: 70px;
    color: black;
}

.f2 input[type="submit"] {
    border-color: aqua;
}

我的问题是：

为什么＆＃34;秒＆＃34;和＃34;第三＆＃34;元素没有显示？
为什么没有显示按钮（f2输入）？
为什么我在中间的圆形框中添加这条额外的线？ http://imgur.com/5aDG3O9 - 标有橙色。怎么能删除这个？

谢谢你的帮助！

Answer 1

此处无需使用多个echo：

示例：

<!DOCTYPE HTML> <html> <head> <title>This is a test</title> <link rel="stylesheet" href="t3.css"> </head> <body> <div class="f1">testing...</div> <div class="f2"> <p class="s1">first</p> <p class="s2">second</p> <p class="s3">third</p> <form> <input type="submit" value="Press this button"> </form> </div> </body> </html>

您需要什么？

无需在f2上使用<p>课程，我将删除此

无需position:relative使用s1,s2,s3类。

<强> CSS：

.s1 {left: 30px;top: 20px;color: red;} .s2 {left: 30px;top: 50px; color: blue;} .s3 {left: 30px;top: 70px; color: black;}

body { font-family: Arial; margin: 0px; } .f1 { float: left; height: 45px; width: 100%; position:relative; margin-top: 0; margin-left: 0; margin-right: 0; text-align:center; background-color: yellow; font-weight: 100; text-align: center; font-size: 2.3em; } .f2 { float: left; position: fixed; top: 10%; left: 40%; width: 500px; height: 350px; margin: auto; background-color: #efefef; border-radius: 15px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 1); overflow: hidden; } .f2 .s1 { left: 30px; top: 20px; color: red; } .f2 .s2 { left: 30px; top: 50px; color: blue; } .f2 .s3 { left: 30px; top: 70px; color: black; } .f2 input[type="submit"] { border-color: aqua; }

<!DOCTYPE HTML> <html> <head> <title>This is a test</title> <link rel="stylesheet" href="t3.css"> </head> <body> <div class="f1">testing...</div> <div class="f2"> <p class="s1">first</p> <p class="s2">second</p> <p class="s3">third</p> <form> <input type="submit" value="Press this button"> </form> </div> </body> </html>

CSS / HTML中的元素不可见

1 个答案: