Question

我的问题在于HTML和CSS。我觉得这个话题非常令人困惑，这种想法让我在网上创造我的想法令人失望。这就是我想创造的东西;我刚刚在油漆区画画。

What I want my site to look like

这是我自己项目第一页的HTML代码：

<?php 
include("includes/classes/mysession.php");
mysession::start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="includes/css/style_mainpage.css" />
</head>

<body>
<div id="container">
<div id="header">
<div id="loginpart">
<form action="pages/userspage/checkuser.php" method="post" name="form_login" id="form_login">
<input name="txf_id" type="text" id="textfield_id"/>
<input name="txf_pw" type="password" id="textfield_pw"/>
<input name="button_login" type="submit" value="login" id="button_login" />
</form>
<a href="pages/signuppage/signup.php">sign up</a>
</div>

</div>
<hr />
<div id="content">
<div id="logopart">
     <img src="../../includes/images/logo.jpg" alt="AnaDilim" name="logoimg" id="logoimg" />
</div>
<div id="mainpart">
    <div id="searchbox">
        <form id="form_search "action="../../mainpage/index.php" method="get">
      <input id="textfield_search" name="textfield_search" type="text" maxlength="100" />
      <input id="button_search" name="button_search" type="submit" value="search" />
          </form>
     </div>
    <div id="resultpart">this is result part</div>
    <div id="numberpart">words:256000</div>
 </div>
 </div>
<hr />
<div id="footer">All rights reserved !!</div>
 </body>
 </html>

这是我的css：

/* CSS Document */
#container{
width: 100%;
background-color: #666;
/**********************
***********************
header part css
***********************
**********************/
}
#header {
width: 100%;
min-height: 50px;
background-color: #0FF;
}
#form_login {
float: left;
margin-left: 50px;
vertical-align: middle;
background-color: #F30;
margin-top: 15px;
min-width: 30%;
}
#txf_username {
float: left;
margin-left: 10px;
}
#txf_password {
float: left;
margin-left: 10px;
}
#button_login {
float: left;
margin-left: 20px;
min-width: 100px;
}
/*********************
**********************
end of header part
**********************
**********************/
#content{
width: 100%;
background-color: #FF0;
    }
#logopart {
width: 100%;
background-color: #0F0;
display: inline-block;
}

#logoimg{
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
display: block;
}
#mainpart {
width: 100%;
background-color: #39F;
display: inline-block;
}


#searchbox {
margin-top: 10px;
display: block;
background-color: #F00;
margin-right: auto;
margin-left: auto;
width: 50%;
}
#textfield_search {
vertical-align: middle;
width: 60%;
font-size: 24px;
}

#button_search {
vertical-align: middle;
width: 30%;
margin-left: 4%;
}
#resultpart {
background-color: #0FF;
width: 70%;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#numberpart {
background-color: #C6F;
display: block;
margin-top: 80px;
margin-right: auto;
margin-left: auto;
width: 25%;
margin-bottom: 60px;
text-align: center;
clear: both;
}
#footer {
width: 100%;
background-color: #0CC;
text-align: center;
clear: both;
}

这是我令人失望的结果：

enter image description here

在这个页面中，我用不同的颜色绘制潜水，看看它们是如何工作的！请说如何在不使用HTML的情况下更轻松地设计网站？

Answer 1

好吧，它就像这样非常容易：

#loginpart input{float:left}

但是很奇怪，因为你把每个元素都浮到左边，然后在你的图片中它们浮动到右边，所以试试这个：

1）杀死所有浮子 2）看看会发生什么，如果需要，添加它（你不需要它，请参阅fiddle，但供将来参考）：

#loginpart{display:block}
#loginpart input{display:inline-block}

然后您可能希望为每个元素（您已正确识别）添加特定的CSS。如果这不起作用，那么你还有别的东西导致这个

Answer 2

行。你很乱。所以。让我们重新开始吧！

首先关闭转到

http://www.getbootstrap.com

这就是我们很多人用来构建我们网站的基础知识，学习bootstrap的东西，看起来更整洁，更专业，而且你需要更多的css线！

我是专业但不是魔术师，这很简单，花了我5分钟。看看并研究它。

我还没有为你完成这一切

工作小提琴：演示

http://jsfiddle.net/Wy22s/301/

<强> HTML

<!-- /lesson one: use bootsrap - getbootstrap.com --> 


<!-- /navbar -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="email">
                <input type="text" class="form-control" placeholder="password">
            </div>
            <button type="submit" class="btn btn-default">Login</button>
        </form>
    </div>
    <div>
</nav>
 <!-- /main box logo and search -->            
<div class="content">
    <img src="http://www.firebirdsql.org/file/about/firebird-logo-200.png"> <span class="input-group search">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>

</div>

        <!-- /results -->
<div class="results">Your search results go here</div>


 <!-- /below here goes a sticky footer - see bootstrap -->

<强> CSS

.content {
    margin-top:100px;
    text-align: center;
}
.search {
    width: 200px;
    margin: auto;
    margin-top:20px;
}
.results {
    height: 200px;
    margin:50px 100px;
    text-align:center;
}

为什么这些物体的顺序不正确？

2 个答案: