HTML+CSS简单应用实例——购物网站的制作(二)注册页面
HTML+CSS简单应用实例——购物网站的制作(二)注册页面
接上一篇文章,本片文章是注册页面。
下面是效果图:
分析:上方欢迎注册是DIV,下面是表单,点击登录按钮会出现注册成功提示。下方为脚本,同主页。
下方为具体代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘淘网注册</title><style>.Bar{width: 100%; background-color:#FFFFFF;height:100px;position: absolute;top:0px;left:0px;}.loginBox{ width:400px;border:1px solid #ddd;box-shadow: 2px 2px 5px 2px #ddd;background: white;margin:30px auto;position:absolute;top:150px;left:565px;}.loginContent{width: 300px; margin:20px auto;}.loginTit{color:#666;line-height: 30px;font:"微软雅黑";}.loginInp{border:#bbb solid 1px;height:32px;width: 100%;line-height: 32px;text-indent:5px;} .checked{margin-right: 3px;margin-top: 20px;}.login_btn{width: 310px; height: 36px;color:rgb(248, 248, 248);cursor: pointer;margin-top: 20px;}.footer{ width:1100px;margin:0 auto;border-top:#dddddd 1px solid;margin-top:600px; height: 210px; background: rgb(245,245,245);text-align: center;}.footer p{ margin-top:20px;}.footer a{color:#666;}.footer a:hover{ color:rgb(228, 121, 89);}.footer .fp{color:#666;margin-top:10px;}.footimg{width="120px";height: "10px";}</style> <script type="text/javascript">function registersuccess(){alert("注册成功!");}</script></head><body bgcolor="plum" ><div class="Bar"><p align="center" style="font-family: 宋体; font-size: 40px; color:black;"><b>-欢迎注册-</b></p></div><div class="loginBox"><form class="loginContent"> <p class="loginTit">用户名/邮箱/手机号:</p><input type="text" class="loginInp" id="uname" name="user" placeholder="5-12位字符"><p class="loginTit">密码:</p><input type="password" class="loginInp" name="password" placeholder="6-12位字符"><input type="checkbox" id="a1" class="checked">自动登录<input type="submit" class="login_btn" value="登 录" οnclick="registersuccess()" > </form></div><div class="footer"><p><a href="#">联系我们</a> | <a href="#">诚聘英才</a> | <a href="#">合作招商</a> | <a href="#">广告平台</a></p><p class="fp">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”(包装及参数、售后保障等商品信息除外)</p><div class="footimg"><img src="img/冠名商标2.jpg" width="70px";height="60px";><img src="img/冠名商标.jpg" width="60px";height="40px"><img src="img/商标.jpg" width="70px";height="60px"><img src="img/商标2.jpg" width="60px";height="30px"></div></div></body>
</html>
HTML+CSS简单应用实例——购物网站的制作(二)注册页面相关推荐
- HTML+CSS简单应用实例——购物网站的制作(四)
HTML+CSS简单应用实例--购物网站的制作(四) 本页面是第二个商品页面,做了个限时抢购的页面. 下面是效果图: 分析:上方限时抢购和12点准时开抢是两个DIV,下面每个商品是一个单独的DIV,总 ...
- HTML+CSS简单应用实例——购物网站的制作(五)
HTML+CSS简单应用实例--购物网站的制作(五) 本页面是第三个商品页面. 下面是效果图: 分析:上方淘淘超市是一个DIV,下面超值套装每个商品是一个DIV,美容护肤是一个大表格.下面是脚本. 具 ...
- HTML+CSS简单应用实例——购物网站的制作(七)
HTML+CSS简单应用实例--购物网站的制作(七) 本页面是客服页面. 效果图: 分析:上方是一个DIV,下面是两个表格,表格里有列表. 具体代码: <!DOCTYPE html> &l ...
- HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签 实现目的: 制作导航栏菜单 代码分析: 基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪类选择器对a状态修饰 分步实 ...
- h5 php登录注册页面验证,H5制作一个注册页面的代码实例
HTML5写的注册页面,正在学习html5的朋友可以参考下 代码如下: register.html function play(){ document .getElementById("me ...
- HTML+CSS+JavaScript仿京东购物网站制作 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- web前端期末大作业(我的家乡广安网页设计与制作)HTML+CSS网页设计实例 企业网站制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- html css js制作登录注册页面,【7】使用css/js/html模板来实现一个注册、登录和管理的功能...
1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 4 importtornado.web5 importlogging6 importdatetime ...
- 基于ASP.Net写的一个购物网站
网站运行录像 在这里 链接:https://pan.baidu.com/s/1NaFNKnQ3UEorasadRf7EIA ...
最新文章
- 使用计算机视觉来做异常检测!
- Nature:如何做一篇肠道菌群免疫的顶级文章
- 想要升职加薪?先管理好时间与目标!
- 分析思维导图与绘制思维导图方法介绍
- python的优点和缺点-python的优点和缺点是什么?
- AutoLayout全解
- Java 正则表达式 工具类 中文 英文 email 手机号 身份证 数字 日期
- 深度学习之卷积神经网络(Convolutional Neural Networks, CNN)(二)
- 这不应该是19岁女孩的结局,这不应该是围观者该有的表达!
- mysql常用系统函数归类
- jquery.筛选文档处理
- linux服务器一键可视化,安装宝塔教程
- Win11系统的显卡驱动安装的详细方法步骤
- 华为数字化IT应用工程师面试经历
- 申请软件著作权步骤如下
- 松翰单片机操作日记SN8F5721(同步串口)
- C#使用Oxyplot绘制监控界面
- 【转】成像的清晰度、分辨率和锐度
- gitbook:node_modules\npm\node_modules\graceful-fs\polyfills.js:287
- 用纯Python就能写一个漂亮的网页