qiannianzhilian网页制作

最新推荐文章于 2024-09-09 22:16:15 发布

资深流浪马戏团

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量325

点赞数 8

文章标签： html

本文链接：https://blog.csdn.net/2301_80146964/article/details/135260239

版权

<!doctype html>
<html>

<head>
   <meta charset="utf-8">
   <title>千年之恋</title>
   <style type="text/css">
       * {
           margin: 0;
           /*外边距清零*/
           padding: 0;
           /*内边距清零*/
           list-style: none;
           /*清除列表样式*/
           outline: none;
           /*清除轮廓*/
           border: 0;
           /*边框设为0*/
           background: none;
           /*背景清除*/
       }

       body {
           font-family: "微软雅黑";
           /*字体样式*/
           font-size: 14px;
           /*字体大小*/
       }

       a:link,
       a:visited {
           text-decoration: none;
           /*下划线清除*/
           color: #fff;
           /*字体颜色*/
           font-size: 16px;
           /*字体大小*/
       }

       #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;
           /*背景颜色*/
       }

       #banner {
           width: 980px;
           /*宽度设置*/
           margin: 0 auto;
           /*页面居中显示*/
       }

       #content {
           width: 930px;
           /*宽度设置*/
           height: 934px;
           /*高度设置*/
           background: url(images/content_bg.jpg) no-repeat;
           /*背景图片*/
           margin: 0 auto;
           /*页面居中显示*/
           padding-left: 150px;
           /*左内边距*/
       }

       .step {
           width: 454px;
           /*宽度设置*/
           height: 80px;
           /*高度设置*/
           font-size: 20px;
           /*字体大小*/
           font-weight: 100;
           /*字体宽度设置*/
           color: #dd8787;
           background: url(images/step.jpg) center right no-repeat;
           /*背景图片*/
           line-height: 80px;
           /*字体行高*/
       }

       h3 {
           width: 444px;
           /*宽度设置*/
           height: 45px;
           /*高度设置*/
           font-size: 20px;
           /*字体大小*/
           font-weight: 100;
           /*字体宽度设置*/
           color: #dd8787;
           /*字体颜色*/
           line-height: 45px;
           /*行高设置*/
           border-bottom: 1px solid #dd8787;
       }

       td {
           height: 50px;
           /*高度设置*/
           color: #dd8787;
           /*字体颜色*/
       }

       .left {
           width: 120px;
           /*宽度设置*/
           text-align: right;
           /*字体右对齐*/
       }

       .right {
           width: 320px;
           /*宽度设置*/
           height: 28px;
           /*高度设置*/
           border: 1px solid #dd8787;
           /*边框设置*/
       }

       input {
           vertical-align: middle;
       }

       select {
           width: 171px;
           /*宽度设置*/
           border: 1px solid #dd8787;
           /*边框设置*/
           color: #aaa;
           /*字体颜色*/
       }

       textarea {
           width: 380px;
           /*宽度设置*/
           border: 1px solid #dd8787;
           /*边框设置*/
           resize: none;
           font: 12px;
           /*字体大小*/
           color: #aaa;
           /*字体颜色*/
           padding: 20px;
           /*设置内边距*/
       }

       .btn {
           width: 409px;
           /*宽度设置*/
           height: 76px;
           /*高度设置*/
           background: url(images/btn.jpg) right center no-repeat;
           /*背景图片*/
       }

       #footer {
           width: 100%;
           /*宽度设置*/
           height: 68px;
           /*高度设置*/
           line-height: 26px;
           /*字体行高*/
           background: #de668f;
           /*背景颜色*/
           color: #fff;
           /*字体颜色*/
           text-align: center;
           /*字体居中*/
           padding-top: 40px;
           /*设置上内边距*/
       }
   </style>
</head>

<body>
   <div id="header">
       <img src="images/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 id="banner">
       <img src="images/banner.jpg" />
   </div>
   <div id="content">
       <h2 class="step">注册信息：</h2>
       <form action="#" method="post" class="one">
           <h3>您的账号信息：</h3>
           <table class="content">
               <tr>
                   <td class="left">
                       注册方式：
                   </td>
                   <td>
                       <label for="one"><input type="radio" name="sex"
                               id="one" />E-mail注册</label>    
                       <label for="two"><input type="radio" name="sex" id="two" />手机号码注册</label>
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       注册邮箱：
                   </td>
                   <td>
                       <input type="text" class="right" />
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       注册手机：
                   </td>
                   <td>
                       <input type="text" class="right" />
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       登录密码：
                   </td>
                   <td>
                       <input type="password" maxlength="8" class="right" />
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       昵称：
                   </td>
                   <td>
                       <input type="text" class="right" />
                   </td>
               </tr>
           </table>
           <h3>您的个人信息：</h3>
           <table class="content">
               <tr>
                   <td class="left">
                       性别：
                   </td>
                   <td>
                       <label for="boy"><input type="radio" name="sex" id="boy" />男</label>    
                       <label for="girl"><input type="radio" name="sex" id="girl" />女</label>
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       学历：
                   </td>
                   <td>
                       <select>
                           <option>-请选择-</option>
                           <option>中职/高中</option>
                           <option>专科/本科</option>
                           <option>硕士研究生</option>
                           <option>博士研究生</option>
                       </select>
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       所在城市：
                   </td>
                   <td>
                       <select>
                           <option>-请选择-</option>
                           <option selected="selected">北京</option>
                           <option>上海</option>
                           <option>广州</option>
                           <option>深圳</option>
                       </select>
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       兴趣爱好：
                   </td>
                   <td>
                       <input type="checkbox" />足球   
                       <input type="checkbox" />篮球   
                       <input type="checkbox" />游泳   
                       <input type="checkbox" />唱歌   
                       <input type="checkbox" />跑步   
                       <input type="checkbox" />瑜伽
                   </td>
               </tr>
               <tr>
                   <td class="left">
                       自我介绍：
                   </td>
                   <td>
                       <textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea>
                   </td>
               </tr>
               <tr>
                   <td colspan="2">
                       <input type="button" class="btn" />
                   </td>
               </tr>
           </table>
       </form>
   </div>
   <div id="footer">
       <p>Copyright 20
           06-2016 QIANNIANZHILIANcom, ALL rights reserved.<br />2001-2018,版权所有千年之恋 85cp 备 13385453</p>
   </div>
</body>

</html>

资深流浪马戏团

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
qiannianzhilian网页制作

<input type="radio" name="sex" id="boy" />男</label><label for="girl"><input type="radio" name="sex" id="girl" />女<a href="#" class="bg">注册</a>
复制链接

扫一扫