文章/答案/技术大牛

发布

社区首页 >问答首页 >课程项目:为haiku网站编辑用户页面。

问课程项目:为haiku网站编辑用户页面。
EN

Code Review用户

提问于 2017-09-03 23:39:50

回答 1查看 44关注 0票数 2

我正在制作一个网站，只使用HTML和CSS的课堂项目(我们是在新兵训练营的第二周。)我已经建立了我的网站，并希望得到别人的意见，对代码。我主要是希望有适当的网站规模在不同的浏览器，但其他输入，以及赞赏。

body {
    font-family: 'Anton', sans-serif;
    margin: auto;
}

.top {
    background-color: #F25266;
    border: #666561 solid 1em;
}

h1 {
    color:#F4EF6B;
    text-decoration: underline;
    text-align: center;
}

.middle {
    background-color:#ECECEC;
    border-left: #666561 1em  solid;
    border-right: #666561 1em solid;
}

.pic {
   display: block;
  margin: auto;
  width: 40%;
}


form > label{
    color: #2E90BF;
    column-count: 1
}


form > input {
    background-color: #2E90BF;
    border-color: #666561;
    width: 14.2%;
    column-count: 1
}

#button_one {
    font-family: 'Anton', sans-serif;
    color:#FFF;
    background: #2E90BF;
    border-color: #000;
    height: 2em;
    width: 100%;
    font-size: 1em;
    cursor: pointer;
    margin-top: 1em;
}

#button_one:active {
  background-color: #2E90BF;
  transform: translateY(4px);
}

.bottom {
    background-color:#F25266;
    border: #666561 solid 1em;
}

ul {
    list-style: none;
    column-count: 10;
}


a:link {
    color: #6DBF2E;
}

a:visited {
    color: #6DBF2E;
}

a:hover { 
    color: yellow;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Edit User</title>
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
        <!-- Link to CSS Sheet -->
        <link type="text/css" rel="stylesheet" href="assets/stylesheets/style.css" />
    </head>
    <body background>
    <div class="top">
        <h1 style>User Information</h1>
    </div>
    <div class="middle">
        <img src="https://i.pinimg.com/736x/57/7b/3c/577b3c221b6ebdc218c347d1260a102e--japanese-haiku-poetry-lessons.jpg" alt="Haiku Example Pic" class="pic"/>
        <form>
            <label>E-Mail:</label>
            <input>
            <label>Password: </label>
            <input>
            <label>Confirm Password: </label>
            <input>
            <label>First Name: </label>
            <input>
            <label>Last Name: </label>
            <input>
            </br>
            <button type="submit" id="button_one">Submit</button>
        </form>
    </div>
    <div class="bottom">
        <ul>
            <li><a href="form_create_haiku.html"><span>Create Haiku</span></a></li>
            <li><a href="form_edit_haiku.html">Edit Haiku</a></li>
            <li><a href="form_edit_user.html">Edit User</a></li>
            <li><a href="form_signup_user.html">Signup User</a></li>
            <li><a href="haiku_list.html">List</a></li>
            <li><a href="haiku_one.html">One</a></li>
            <li><a href="haiku_rules.html">Rules</a></li>
            <li><a href="index.html">Index</a></li>
            <li><a href="user_list.html">User List</a></li>
            <li><a href="user_one.html">User One</a></li>
        </ul>
    </div>
    </body>
</html>

css

beginner

html

回答 1

Code Review用户

回答已采纳

发布于 2017-09-04 21:50:32

关于HTML

的

添加一个meta-charset元素通常是个好主意，它是页面的给出字符编码 (例如，"UTF-8")。这应该是head元素中的第一个元素：

<head>
  <meta charset="utf-8" />
  <!-- … -->
</head>

body元素不能具有background属性(已经过时了)。

您应该将每个label与其input关联起来。这可以用for属性完成，也可以通过在label中嵌套input来完成。您可以很容易地测试它是否正确:单击标签，相应的input就会得到焦点。

您有结束标记</br>，但遗漏了开始标记--但是，br元素开始时没有结束标记，因此您可能希望使用<br>或<br />。但无论如何，在这种情况下使用br似乎是不正确的。br必须只用于有意义的换行。。如果您只需要一些垂直空间，使用CSS代替。

这个列表似乎是导航。如果是这样的话，您可以使用nav元素：

<nav class="bottom">
  <ul>
    <!-- … -->
  </ul>
</nav>

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/174738

复制

相似问题

问课程项目:为haiku网站编辑用户页面。
EN

回答 1

Code Review用户

的

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问课程项目:为haiku网站编辑用户页面。EN

回答 1

Code Review用户

的

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问课程项目:为haiku网站编辑用户页面。
EN