「Web前端」“千年之恋”-重构美化版

Daboia-不二小王

已于 2023-10-31 01:13:45 修改

阅读量844

点赞数 1

分类专栏： Web 前端文章标签：前端 web html5

于 2023-10-31 01:01:25 首次发布

本文链接：https://blog.csdn.net/Daboia/article/details/134130910

版权

Web 前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

引言

Hello，各位程序🐒，我是海南的一名在校的计科大学生。本篇文章我们来制作“千年之恋”的注册页面。在我们学习 web 前端开发的过程中一定会遇到表单，而这个例子是网上流传已久的题目，但大多数都是用表格实现，我们这次用其他方式，一样能达到效果，顺便带点美化！这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，也是我的在校作业之一，接下来来看看我是如何实现这个页面的效果吧。

效果图

效果图 1

效果图2

交流分享

在屏幕前的你，应该是正在学这门课程吧，并且碰到了这个作业！你的第一眼，是不是认为我是用表格做的布局呢。那当然不是，网上很多博主给的都是 <table>来进行布局完成，我的代码是在课上独立零开发写出来的，体会到了表格的麻烦，所以我用了<ul><li>...</li></ul>，用列表进行布局，省去了单元格的麻烦！！！我是不二小王，就是喜欢特别，做就做到最完美！就像老师说的*宇出手就是精品，嘿嘿嘿！有点小骄傲！

代码小笔记

看代码前，你需要了解用列表会有一个小点点在名称前面，我们就要在 <ul>标签用到下面这个属性，去消除<li>标签前面默认出现的小点点，变得更加美观！

list-style-type: none;

代码区域

我有点小懒，喜欢直接在标签、还有 html里写样式代码，就不用 link 外链了，请见谅，嘿嘿嘿嘿！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>千年之恋</title>
</head>

<style type="text/css">
body {
    background-image: url(image/content_bg.jpg);
    border: none;
    background-size: cover;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: white;
}
.bg_1 {
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.bg_img_css {
    border-radius: 50px;
    border: 5px #ffd9e6 solid;
}
.zcbz {
    display: flex;
    align-items: center;
    color: #fc8696;
    padding: 0;
    list-style-type: none;
    justify-content: center;
}
ul {
    color: #fc8696;
    list-style-type: none;
}
li {
    padding-bottom: 10px;
}
form {
    color: #fc8696;
}
input {
    height: 20px;
    border-radius: 5px;
    border: 1px #fc8696 solid
}
#header {
    width: 980px;
    height: 70px;
    margin: 0 auto;
    padding-top: 20px;
}
#nav_bg {
    width: 100%;
    height: 48px;
    background: #fe668f;
}
.nav {
    width: 980px;
    margin: 0 auto;
}
.nav li {
    float: left;
}
a {
    display: inline-block;
    height: 48px;
    padding: 0 50px;
    line-height: 48px;
}
.bg {
    background: #fe9ab5;
}
a:hover {
    background: #fe9ab5;
}
#footer {
    width: 100%;
    height: 68px;
    line-height: 26px;
    background: #fe668f;
    color: #fff;
    text-align: center;
    padding: 40px;
}
</style>

<body>
<div id="header"> <img src="image/logo.jpg" /> </div>
<div id="nav_bg">
  <ul class="nav">
    <li> <a href="#">首页</a> </li>
    <li> <a href="#">会员</a> </li>
    <li> <a href="#">活动</a> </li>
    <li> <a href="#">直播</a> </li>
    <li> <a href="#">视频</a> </li>
    <li> <a href="#" class="bg">注册</a> </li>
  </ul>
</div>
<div>
  <div align="center" class="bg_1"> <img class="bg_img_css" src="image/banner.jpg" /> <span class="zcbz">注册步骤：&nbsp;&nbsp; <img src="image/step.jpg" width="338" height="42" alt="" /> </span> </div>
  <div style="margin: 25px auto;width:500px">
    <form>
      <span style="padding:25px">你的账号信息：</span>
      <hr style="border-color: #ffd9e6;">
      <ul>
        <li> 注册方式：
          <input type="radio" name="fangshi">
          Email注册
          <input type="radio" name="fangshi">
          手机号注册 </li>
        <li> 邮箱地址：
          <input style="width: 320px;" type="email" placeholder="请输入你的邮箱">
        </li>
        <li> 手机号码：
          <input style="width: 320px;" type="tel" placeholder="请输入你的手机号码">
        </li>
        <li> 登录密码：
          <input style="width: 320px;" type="password" placeholder="请输入设置的密码">
        </li>
        <li> 用户昵称：
          <input style="width: 320px;" type="text" placeholder="请输入你的名称">
        </li>
      </ul>
      <span style="padding:25px">你的个人信息：</span>
      <hr style="border-color: #ffd9e6;">
      <ul>
        <li> 你的性别：
          <input type="radio" name="sex">
          男
          <input type="radio" name="sex">
          女 </li>
        <li> 你的学历：
          <input list="xueli" placeholder="选择你的学历">
          <datalist name="xueli" id="xueli">
            <option>小学</option>
            <option>中学</option>
            <option>高中</option>
            <option>大专</option>
            <option>本科</option>
            <option>硕士</option>
          </datalist>
        </li>
        <li> 所在城市：
          <input list="chengshi" placeholder="选择你的城市">
          <datalist name="chengshi" id="chengshi">
            <option>海口</option>
            <option>文昌</option>
            <option>澄迈</option>
            <option>儋州</option>
            <option>三亚</option>
            <option>临高</option>
          </datalist>
        </li>
        <li>兴趣爱好：
          <label>
            <input type="checkbox" name="xingquaihao" value="足球" id="xingquaihao_0">足球</label>
          <label>
            <input type="checkbox" name="xingquaihao_" value="篮球" id="xingquaihao_1">篮球</label>
          <label>
            <input type="checkbox" name="xingquaihao_" value="游泳" id="xingquaihao_2">游泳</label>
          <label>
            <input type="checkbox" name="xingquaihao_" value="唱歌" id="xingquaihao_3">唱歌</label>
          <label>
            <input type="checkbox" name="xingquaihao_" value="跑步" id="xingquaihao_4">跑步</label>
          <label>
            <input type="checkbox" name="xingquaihao_" value="瑜伽" id="xingquaihao_5">瑜伽</label>
        </li>
        <li> 自我介绍：
          <textarea rows="6" style="width: 320px;border-radius: 5px;border:1px #fc8696 solid;" placeholder="评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持"></textarea>
        </li>
        <li>
          <input style="padding: 0 150px 0 150px;height: 40px;border:none" type="image" src="image/btn.jpg">
        </li>
      </ul>
    </form>
  </div>
</div>
<div id="footer">
  <p>Copyright 20
    06-2016 QIANNIANZHILIANcom, All rights reserved. <br />
    2001-2018, 版权所有 千年之恋 85CP 备 13385453</p>
</div>
</body>
</html>

点个CSDN关注再走吧～谢谢啦～

Daboia-不二小王

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
「Web前端」“千年之恋”-重构美化版

Hello，各位程序🐒，我是海南的一名在校的计科大学生。本篇文章我们来制作“千年之恋”的注册页面。在我们学习 web 前端开发的过程中一定会遇到表单，而这个例子是网上流传已久的题目，但大多数都是用表格实现，我们这次用其他方式，一样能达到效果，顺便带点美化！这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，也是我的在校作业之一，接下来来看看我是如何实现这个页面的效果吧。
复制链接

扫一扫