注册页面DIV实现（CSS盒子模型、超链接的伪类）

最新推荐文章于 2024-08-25 14:00:04 发布
最新推荐文章于 2024-08-25 14:00:04 发布
阅读量924 收藏
点赞数
分类专栏： JAVAWEB学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuterabbitbaby/article/details/77989790
版权 



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript">
function tips(){
	document.getElementById("usernamespan").innerHTML="<font color='red'>用户名是应该字母</font>";
}
function checkusername(){
	document.getElementById("usernamespan").innerHTML="<font color='green'>用户名是正确</font>";
}

function checkform(){
	var username=document.getElementById("inputusername").value;
	if(username==""){
		window.alert(username);
		document.getElementById("usernamespan").innerHTML="<font color='green'>用户名是空</font>";
		return false;
	}
	else{
		document.getElementById("usernamespan").innerHTML="<font color='green'>注册成功</font>";
		return true;
	}
}
</script>
<style type="text/css" contenteditable="inherit">
div {
	border: 1px solid blue;
	width: 100%;
}

#bodydiv {
	width: 90% px;
}

.logodiv {
	border: solid 1px blue;
	width: 33%;
	float: left;
	height: 48px;
}

.clear {
	clear: both;
}

.cd {
	background-color: black;
	height: 30px;
}
</style>
</head>
<body>
	<div id="bodydiv">
		<div class="logodiv">
			<img alt="" src="../imag/head1.png" height=100%>
		</div>
		<div class="logodiv">
			<img alt="" src="../imag/head2.png" height=100%>
		</div>
		<div class="logodiv"
			style="padding-top: 5px; text-align: center; height: 43px"
			align="center">
			<a href="#">登陆</a> <a href="zhuce.html">注册</a> <a href="#">购物车</a>
		</div>
		<div class="clear"></div>
		<div class="cd">
			<a href="shouyediv.html">首页</a> <a href="#">手机数码</a> <a href="#">电脑办公</a>
			<a href="#">研烟酒箱包</a>
		</div>
		<div
			style="height: 800px; background-image: url('../imag/zhuce.jpg'); background-size: 100% 100%;">
			<div
				style=" border: 1px red solid; height:90%;position: absolute;top: 300px;"
				align="left">
				<form method="post" action="zhucediv.html"
					οnsubmit=" return checkform()">
					<table align="center" border="1" width=50%>
						<tr>
							<td align="right" width=50%>用户名    
							<td align="left"><input type="text" name="username" value=""
								οnfοcus="tips()" οnblur="checkusername()" id=inputusername></input><span
								id="usernamespan"></span>
							</td>
						</tr>
						<tr>
							<td align="right" width=50%>密码    
							<td align="left"><input type="password" name="password"
								οnfοcus="tips()"></input><span id="passwordspan"></span></td>
						</tr>
						<tr>
							<td align="right" width=50%>确认密码    
							<td align="left"><input type="password" name="repassword"></input><span
								id="repassword"></span></td>
						</tr>
						<tr>
							<td align="right" width=50%>邮箱    
							<td align="left"><input type="text" name="email"></input>
							</td>
						</tr>
						<tr>
							<td align="right" width=50%>性别    
							<td align="left"><input type="radio" name="sex" value="man"
								checked="checked">男<input type="radio" name="sex"
								value="woman">女</td>
						</tr>
						<tr>
							<td align="right" width=50%>生日    
							<td align="left"><input type="date" name="birth">
							</td>
						</tr>
						<tr>
							<td align="right" width=50%>爱好    
							<td align="left"><input type="checkbox" name="love"
								value="1">看电视<input type="checkbox" name="love"
								value="2">打游戏<input type="checkbox" name="love"
								value="3">吃饭<input type="checkbox" name="love" value="4"
								checked>睡觉</td>
						</tr>
						<tr>
							<td align="right" width=50%>籍贯    
							<td align="left"><select name="pro">
									<option>--请选择--
									<option value="sx">陕西
									<option value="hn">河南
									<option value="hb">河北
									<option value="yn">云南
							</select>
						<tr>
							<td align="right" width=50%>头像    
							<td align="left"><input type="file">
							</td>
						</tr>
						<tr>
							<td align="right" width=50%>个人简介    
							<td align="left"><textarea cols="" rows="5" name="a">我是一个</textarea>
							</td>
						</tr>
						<tr>
							<td colspan="2" align="center"><input type="submit"
								value="注册"><input type="reset" value="重置">
							</td>
						</tr>

					</table>
				</form>
			</div>
		</div>
		<div>
			<img alt="" src="../imag/q.png" width="100%">
		</div>
		<div style="text-align: center;">
			<a href="html.html">关于我们</a>  公司简介  招贤纳士  广告服务  联系方式  合作伙伴  论坛反馈<br>版权声明：Copyright
			© 1999-2016,赵瑾的网站 , All Rights Reserved
		</div>
	</div>
</body>
</html>





cuterabbitbaby
关注
专栏目录
超链接样式、盒子模型、定位
weixin_46229315的博客
03-15 1399
超链接样式 超链接伪类简介 超链接共有伪类，分别是： link：未访问的超链接（没被点击过。 visited：已被访问过的超链接（被点过。 hover：鼠标悬停。 active：选定的链接，被点住，松开后就不适用该样式。 深入了解超链接伪类 注意：这四个伪类必须按照一定的顺序设置，不然会意外，因为link和active是常态样式，而hover和active是瞬时属性。 顺序：link–visited–hover-active 当一个超链接处于未激活的状态下，它是适用于link伪类的，若此时将鼠标悬停（ho
css之超链接，盒子模型，定位
qq_2992427261
07-23 2162
css提供了四种a对象的伪类，他表示四种不同的状态， link：没有访问时的状态 visited：已经访问的链接 active：激活链接,单击链接但还没有释放之前的样式 hover：鼠标停留在链接上时 a{ …… } a:link{ …… } avisited{ …… } 注意在这里还有滤镜，动感模糊，透明度处理，阴隐设置，发光效果，x光效果（x...
html之div注册页面
qq_36943809的博客
12-14 591
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding...
DIV盒模型+CSS基础
最新发布
YhMjQx的博客
08-25 309
本篇文章主要讲解DIV盒模型与CSS样式基础
超链接-盒子模型
wwttqq85538649的专栏
04-27 899
学习心得：1，超链接可以使用盒子模型来进行设置。其中有用到padding属性，若属性设置为padding：50px 12px 23px 33px,则设置的顺序  为    上、右、下、左。2，若要实现如图的效果： 其原理是1，在a:link,a:visted 中设置右、下边框为实线，上、左边框为白色。在a:hover中实现右、下边框为白色，上、左边框为实线。同时使原来的背景颜色深一
利用JavaScript实现注册页面省市联动效果（附代码）
初心的博客
11-23 422
前段设计注册页面技巧： 达到省市联动效果 &lt;td&gt; &lt;select onchange="selectProvince()" id="province"&gt; &lt;option value="-1"&gt;--请选择--&lt;/option&gt; &lt;o
超链接伪类、盒模型
马农莎的博客
08-16 100
超链接伪类和列表样式
weixin_60508127的博客
08-11 263
超链接伪类 a：link{}，未单击访问的超链接样式。 a：visited{},单击访问后的超链接样式。 a：hover{},鼠标悬浮其上的超链接样式。 a：active{}，鼠标单机未释放的超链接样式。 顺序为从上到下设置。 别的标签悬浮也能设置，即div：hover{}。 列表样式 list–style–type属性设置列表项标记的类型， 常用的属性值：none，无标记符号。disc，实心圆，默认的。circle，空心圆。square,实心正方形。decimal，数字。 list–style是简写的方式
CSS课程讲解2(伪类,盒子模型)
weixin_44870681的博客
05-16 294
一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例：
html5/CSS/盒子模型/＜div＞/实现一个图文混排的网页效果/动手实践
No1banana的博客
01-25 7261
一、效果分析 根据图片分析得出该页面的组成部分，由标题、副标题、图片、正文、下划线、以及链接组成 二、开始实现 首先下载好图文素材，并将其保存在和准备建立html的文件同一文件夹 打开Dreamweaver2021，新建立一个html5格式的文档 建立好文档之后我们根据组成部分利用html将网页结构建立起来，正文我们使用<div>盒子模型,并着手将文字填入到对应的区域 接下来我们使用<style>标签直接用嵌入式的方式引入CSS用以实现效果 <s
CSS基础 引入 选择器 字体样式 文本样式 伪类 盒子模型 定位
weixin_45279447的博客
12-23 483
文章目录CSS概念优势CSS的基础语法HTNL中引入CSS样式CSS样式的优先级CSS的简单实用（块级元素<--->行内元素）借助display的应用CSS基本选择器标签选择器类选择器ID选择器(唯一的)基本选择器的优先级CSS高级选择器层次选择器属性选择器 CSS 概念 定义：Cascading Style Sheet 级联样式表 表现HTML文件样式的计算机语言 样式定义如何显示HTML元素 包括对字体、颜色、边距、高度、背景图片、网页定位等设定 优势 1、内容与表现分离 2、
小白的前端学习笔记（超链接伪类+盒子模型）
weixin_46303867的博客
05-10 321
一、超链接的伪类 二、伪类语法： 选择器名：伪类名{ } 以超链接为例： 1、未访问时的样式 a:link{} 2、 已访问的样式 a:visited{} 3、鼠标悬浮在上面是触发该样式 a块级元素：hover{ a的所有属性 } 4、鼠标长按的样式 a:active{} *注意：顺序不能更改 ling>visited>hover>active 三、列表 list-stye-type: 设置项目符号 list-style-image
HTML+CSS教程（五）伪类,盒子模型
qq_43434300的博客
11-06 327
一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt;
html怎么把盒子做成超链接,把整个DIV变成超链接
weixin_42359449的博客
06-07 3758
在网页中，常常需要使用到超级链接。一般情况下，使用超级链接仅需要使用到标签就可以实现了。比如，如下是一个简单的链接：大众计算机的超链接然而，有的时候，我们需要布局整个页面的各种对象，因此，需要使用到标签DIV，问题也出在这里，因为DIV标签本身不具备超链接功能。很多时候，DIV仅仅是一个布局对象，说得直接点，DIV只是一个容器，里面可以容纳各种对象，包括超链接。而DIV中的超链接对象范围比较小，哪...
在Div上加一个超链接
ych0108的博客
09-16 1889
在Div上加一个超链接，JavaScript VS Css？ » Written by Rainbow On 2009-04-18 With 0 Comments 前一段时间我为一个DIV上加链接而苦恼，到底用啥样的技术那？JavaScript VS Css？ 用把DIV内容包含进去进行超链接是不明智的选择，再说也不符合WEB标准。我想 何必用标记那！实际上在DIV的onclick...
在一个div里单独定义超链接的样式…
蟹蟹Lumos的博客
08-18 5608
在一个div里单独定义超链接的样式或颜色，怎么定义单个超链接的样式？一直在烦恼这个问题，但也没认真对待。今天小总结下吧。想定义某个超链接的样式，方法有两种：不过这里建议采用第2种要简单一点，其实效果都一样，估计第一种的代码要多一点，所以我用的是第二种。第一种我没试过，第二种试了有效，大家自己采用吧。 一、继承： 比如说：全站的超链接css为 a {text-decoration:none;c
JavaScript内置对象
fanrenxiaoshan的博客
06-13 174
Global对象的内置方法        var box = '//Lee 李'; alert(encodeURI(box)); //返回//Lee%20%E6%9D%8E 只编码了中文 var box = '//Lee 李'; alert(encodeURIComponent(box)); //返回%2F%2FLee%20%E6%9D%8E 特殊字符和中文...
省市联动
weixin_30550081的博客
05-16 73
jsp: ssldAjax.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> &l...
DIV中控制超级链接的方法
weixin_34198453的博客
05-14 124
在div中，我们要控制超级链接，要怎么做呢？是不是也要和普通的html语言一样，在html中加入诸如<a href="#"><font-size="1">超级链接</font></a>这样的一大堆东西呢？ 答案是否定滴~~~，我们有CSS来控制，更加方便，来看一段代码 <div id="navigator"...
HTML与CSS学习：页面布局与盒子模型
通过定义div元素及其内部的CSS样式，可以实现灵活的页面结构。本章还涉及了多种典型局部布局，如div-ul-il、div-dl-dt-dd、form-table-tr等，以及如何利用CSS创建圆角矩形，提升页面设计的视觉效果。 在实际操作中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值