html和css制作人人网注册界面

于 2023-10-27 20:53:31 发布
阅读量591 收藏 7
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thels_/article/details/134083845
版权 
CSS代码如下：

.block{
    width: 950px;
    height: 800px;
}
.headlinePicture{
    width: 120px;
    height: 40px;
    float: left; 
}
.headlineTxt1{
    width: 200px;
    height: 40px;
    float: left;
    
}
.headlineTxt2{
    width: 550px;
    height: 40px;
    float: left;

    text-align: right;
}
.clear{
    clear: both;
}

.mainContent{
    width: 550px;
    height: 620px;
    float: left;
    border-style:solid;
    border-width:1px;
}
.sideContent{
    width: 320px;
    height: 620px;
    float: left;
    border-style:solid;
    border-width:1px;
    background:#F7F7F7;
}
.bottom{
    width: 880px;
    height: 80px;
    float: left;
    
    text-align: right;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人人网注册页面</title>
    <link rel="stylesheet" href="./css/p3_2.css">
</head>
<body>
    <div class="block">
        <div class="headlinePicture">
            <img src="./images/p3_2/logo.gif" width="106" height="27">
        </div>

        <div class="headlineTxt1" style="line-height: 30px;">
            <b>10秒找到你所有朋友</b>
        </div>
        
        <div class="headlineTxt2" style="line-height: 30px;">
            已有人人网账号，
            <a href="#">登录 </a>
        </div>

        <div class="mainContent ">
            <br>
            <b>
                &nbsp;&nbsp;免费开通人人网账号
            </b>
            <table border="0">
                <tr>
                    <td width="110" height="50" align="right">
                        注册邮箱：
                    </td>
                    <td width="20"></td>
                    <td>
                        <input type="text" size="25" maxlength="25">
                    </td>
                </tr>
                <tr>
                    <td width="110" height="50" align="right">
                    </td>
                    <td></td>
                    <td>
                        你还可以使用 <a href="#">账号</a> 注册或者 <a href="#">手机号</a> 注册 
                    </td>
                </tr>
                <tr>
                    <td width="110" height="50" align="right">
                        创建密码：
                    </td>
                    <td></td>
                    <td>
                        <input type="text" size="25" maxlength="25">
                    </td>
                </tr>
                <tr>
                    <td width="110" height="50" align="right">
                        真实姓名：
                    </td>
                    <td></td>
                    <td>
                        <input type="text" size="25" maxlength="25">
                    </td>
                </tr>
                <tr>
                    <td width="110" height="50" align="right">
                        性别：
                    </td>
                    <td></td>
                    <td>
                        <input type="radio" name="gender" value="男" checked>男
                        <input type="radio" name="gender" value="女" >女
                    </td>
                </tr>
                <td width="110" height="50" align="right">
                    生日：
                </td>
                <td></td>
                <td>
                    <select name="" id="">
                        <option value="">1990</option>
                        <option value="" selected>1991</option>
                        <option value="">1992</option>
                        <option value="">1993</option>
                        <option value="">1994</option>
                        <option value="">1995</option>
                        <option value="">1996</option>
                        <option value="">1997</option>
                        <option value="">1998</option>
                        <option value="">1999</option>
                        <option value="">2000</option>
                        <option value="">2001</option>
                    </select>年
                    <select name="" id="">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="" selected>10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                    </select>月
                    <select name="" id="">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="" selected>30</option>
                        <option value="">31</option>
                    </select>日
                </td>
                <tr>
                    <td width="110" height="50" align="right">
                        我现在：
                    </td>
                    <td></td>
                    <td>
                        <select name="" id="">
                            <option value="" selected>正在上学</option>
                            <option value="" selected>上班</option>
                            <option value="" selected>无职业/退休</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="110" height="50" align="right">
                    </td>
                    <td></td>
                    <td >
                        <img src="./images/p3_2/verycode.gif">
                        <a href="#">看不清换一张？</a>
                    </td>
                </tr>
                <tr>
                    <td width="110" height="50" align="right">
                        验证码：
                    </td>
                    <td></td>
                    <td >
                        <input type="text" size="25" maxlength="25">
                    </td>
                </tr>
                <tr>
                    <td width="110" height="50" align="right">
                        验证码：
                    </td>
                    <td></td>
                    <td >
                        <img src="./images/p3_2/btn_reg.gif">
                    </td>
                </tr>
            </table>
        </div>
        
        <div class="sideContent">
            <table width="100%" border="0">
                <tr height="40"> </tr>
                <tr>
                    <td colspan="3" align="middle">
                        <img src="./images/p3_2/intro-new.png">
                    </td>
                </tr>
                <tr height="40"> </tr>
                <tr>
                    <td colspan="3"><b>最热门公共主页</b></td>
                </tr>
                <tr>
                    <td align="middle">
                        <img src="./images/p3_2/icon_zhaowei.gif">
                    </td>
                    <td align="middle">
                        <img src="./images/p3_2/icon_likaifu.gif">
                    </td>
                    <td align="middle">
                        <img src="./images/p3_2/icon_shangjie.gif">
                    </td>
                </tr>
                <tr>
                    <td align="middle">
                        赵薇
                    </td>
                    <td align="middle">
                        李开复
                    </td>、
                    <td align="middle">
                        商界
                    </td>
                </tr>
                <tr height="40"> </tr>
                <tr>
                    <td colspan="3"><b>最热门游戏</b></td>
                </tr>
                <tr>
                    <td align="middle">
                        <img src="./images/p3_2/icon_xxzz.gif">
                    </td>
                    <td align="middle">
                        <img src="./images/p3_2/icon_rrnc.gif">
                    </td>
                </tr>
                <tr>
                    <td align="middle">
                        小小战争
                    </td>
                    <td>
                        人人农场
                    </td>
                </tr>
            </table>
        </div>
        <div class="blankColumn1">
        </div>
        <div class="bottom" style="line-height: 40px;">
            点击免费开通账号表示同意并遵守
            <a href="#">人人服务条款 </a>
        </div>
    </div>
</body>
</html>

 

thels_
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html第三章练习5：人人网注册页面完善版
weixin_48131445的博客
05-12 2747
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>人人网.
注册人人网页面
nick988217的博客
02-06 8166
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人人网注册页面</title> </head> <body> <!--人人网logo以及网站的介绍--> <header> &lt...
人人网首页登录页面html码,仿人人网WordPress登陆注册界面
weixin_39550172的博客
06-04 6826
想知道通过钩子和css能把WordPress默认的登陆注册界面改成什么样，于是仿了一下人人网的注册界面，最后的成果如下图所。仿人人网WordPress登陆界面仿人人网WordPress注册界面可以定制化的部分顶部右侧的菜单：到wp后台->外观->菜单中创建一个新的菜单，将此菜单分配给位置WP Login Menu即可，支持两级下拉菜单注册表单右侧的图片文字可以通过HTML代码实现，很简...
人人网注册页面特效
02-28
人人网注册页面特效，你可以学习一下！
人人网注册页（表格表单）
ZZ0210的博客
08-31 547
img src="./人人网注册页/image/renren_titile.gif" alt="">女性别：男。电子邮箱：设置密码：真实姓名：
注册页面html版本
08-18 248
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title></head><body> <!-- <caption align="center" >注册页面...
新手入门案例 HTML表单之人人网
03-22
在这个"新手入门案例：HTML表单之人人网"中，我们将学习如何使用HTML和CSS来创建一个类似人人网的注册页面。通过这个案例，你可以掌握基本的HTML结构、表单元素以及CSS样式应用，为后续的网页开发打下基础。 首先，...
图片选择 模仿人人网好友选择
12-25
5. **模拟人人网风格**：为了模仿人人网的样式和交互，开发者需要关注UI/UX设计，保持一致性并遵循人人网的界面元素和布局。这可能涉及到使用相似的颜色方案、图标和布局结构，以及模拟原版的过渡和动画效果。 6. *...
人人网页制作人人网页制作人人网页制作人人网页制作人人网页制作
05-28
"人人网页制作"这个主题，意味着我们将探讨如何让每个普通人都能参与到网页设计与制作的过程中，实现自己的网页梦想。在这个过程中，我们将涉及以下几个核心知识点： 1. HTML基础：HTML（HyperText Markup Language...
[整站程序]校内网代码站_PHP源码
07-14
在【整站程序】校内网代码站中，PHP源码是整个系统的核心，负责处理用户请求、数据交互以及页面渲染等功能。 源码中的核心模块可能包括以下几个部分： 1. 用户注册与登录：这是任何社交平台的基础，用户可以通过...
人人网源代码
06-15
这是一个自编写的人人网源代码，希望会有帮助
023集-制作注册页面
10-24
023集-制作注册页面视频教程，真心不错哦。
练习2：人人网注册页面.rar
10-15
练习2：人人网注册页面.rar
简单的仿人人网登录页面控件
09-20
参考人人网登录界面，用div画的很简单，css也是基本的样式。
人人网登陆页面
05-13
使用web 中的div+css开发的人人网的登陆页面，几乎完全一样
网页模板 主要使用html语言编写 适合初学者套用
11-15
在本压缩包文件中，提供的"renren"可能是模板的一个实例，暗示着这个模板可能受到了人人网的启发或者设计风格与人人网类似。 HTML语言包含了各种标签，如`<head>`用于定义页面元信息，`<body>`包含页面的主要内容，...
静态网页—制作“人人网首页”页面
小奇
03-01 837
静态网页—静态网页制作第4章制作人人网首页
练习：人人网注册页面
热门推荐
u012273935的专栏
12-14 1万+
Document 10秒找到你所有的好友 已有人人网账号,注册
一个注册页面的HTML实现
xingyuner2的博客
08-09 1102
代码实现: html> html> head lang="en"> meta charset="UTF-8"> title>注册页面title> head> body> form action="#" method="GET"> table border="1px" bordercolor="red" bgcolor="#d3d3d3" cellspacing="0p
html利用CSS制作注册页面背景
最新发布
05-16
要利用CSS制作注册页面背景，可以按照以下步骤进行： 1. 创建HTML文件，并在文件头部引入CSS文件。 2. 在HTML文件中创建一个div元素，用于包含注册表单。 3. 设置该div元素的宽度、高度、边框和背景颜色。 4. 创建一个背景图片，并将其保存到服务器上。 5. 在CSS文件中，使用background-image属性将背景图片作为div元素的背景。 6. 根据需要，使用background-size、background-position和background-repeat属性调整背景图片的大小、位置和重复方式。 以下是一个简单的代码示例： HTML文件： ``` <!DOCTYPE html> <html> <head> <title>注册页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="register-form"> <!-- 在这里添加注册表单的HTML代码 --> </div> </body> </html> ``` CSS文件： ``` .register-form { width: 500px; height: 600px; border: 1px solid #ccc; background-color: #fff; background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` 在这个示例中，我们创建了一个名为register-form的div元素，并将其设置为500像素宽、600像素高，带有1像素灰色边框和白色背景色。我们还将名为background.jpg的背景图片作为该元素的背景，并使用CSS属性调整其大小、位置和重复方式。根据需要，您可以使用其他CSS属性来进一步自定义注册页面的外观和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值