gongchengketang
  • Guozhan 发布于2016年10月31日 20:43
    【作业】CSS-作业1-Guozhan
    HTML
    1. <!DOCTYPE html>
    2. <html>

    3.         <head>
    4.                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5.                 <title>攻城课堂</title>
    6.                 <link rel="stylesheet" href="style.css" media="screen" title="no title">
    7.         </head>

    8.         <body>
    9.                 <div class="content">
    10.                         <a href="http://www.gongchengketang.com/"><img src="http://www.gongchengketang.com/images/logo-gckt-20150726.png" alt="logo" /></a>
    11.                         <form action="index.html" method="post">
    12.                                 <input type="text" name="user_name" value="" placeholder="昵称">
    13.                                 <input type="text" name="email" value="" placeholder="电子邮箱地址">
    14.                                 <input type="password" name="name" value="" placeholder="密码">
    15.                                 <input type="password" name="name" value="" placeholder="确认密码">
    16.                                 <input type="submit" name="sign_in" value="注册">
    17.                         </form>
    18.                         <p class="zhuce">注册即代表我同意<a href="#">服务条款</a>、 <a href="#">隐私政策</a></p>
    19.                         <p class="denglu">已经是攻城课堂用户?<a href="#" class="blue">登录</a></p>
    20.                 </div>
    21.         </body>

    22. </html>
    复制代码


    CSS
    1. img {
    2.     width: 183px;
    3. }

    4. .content {
    5.     width: 280px;
    6.     margin: 0 auto;
    7.     margin-top: 100px;
    8.     text-align: center;
    9. }

    10. [type=text], [type=password] {
    11.     display: block;
    12.     width: 260px;
    13.     height: 40px;
    14.     padding: 0 10px;
    15.     margin: 27px auto;
    16.     border: 1px #d2d2d2 solid;
    17.     border-radius: 2px;
    18.     outline: none;
    19. }

    20. [type=submit] {
    21.     background-color: #ed706b;
    22.     width: 280px;
    23.     border-style: none;
    24.     border-radius: 3px;
    25.     height: 40px;
    26.     color: #fff;
    27.     font-size: 1em;
    28.     box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;
    29.     outline: none;
    30. }

    31. .zhuce {
    32.     font-size: 0.6em;
    33.     color: #7d7d94;
    34.     text-align: left;
    35.     margin-top: 30px;
    36.     padding-bottom: 25px;
    37.     border-bottom: 1px #d2d2d2 solid;
    38. }

    39. a {
    40.     text-decoration: none;
    41.     color: #ed706b;
    42. }

    43. .denglu {
    44.     font-size: 0.8em;
    45.     color: #7d7d94;
    46.     text-align: left;
    47.     margin-top: 25px;
    48. }

    49. .blue {
    50.     color: #4e79cc;
    51. }
    复制代码


    1个回答
  • 牛小k 发表于2016-11-04 09:59
    基本完成作业要求,样式上没有任何问题

    有一小地方需要注意:
    1 密码和确认密码的两个输入框,name的值应该是不同的
    2 给.content 加text-align:center,为了使图片和按钮文字居中,但由于加在了外层,导致.zhuce和.denglu都需要加text-align:left,本身默认就是左对齐。一般如果不是所有内容都居中,不建议给外层加居中,哪里用到居中加在哪里即可
    3 不建议使用[type=text], [type=password] 这种css选择器,不同浏览器的支持不同,容易出现兼容性问题
    4 .blue这种起名很不好,不要依据UI的颜色去命名class,假设你在一个公司实习,这个链接你命名class为blue_link,突然某天网站改版了,ui重新调色成绿色,你是不是还得改class名为green_link,你得改html和css两个地方的名称和css的color属性。当然你也可以不改名,只改color,这样别人看你代码会很不好,明明是绿色,这家伙为什么加个blue_link的类名。所以以功能命名不要以颜色命名,举例:header_content,find_pwd_btn,login_link,item_detail等等这样的命名更恰当些
上一页 第1页/共32页 下一页
社区VIP账号 做作业巩固知识 拿6k以上offer