CSS（二）

最新推荐文章于 2021-08-08 11:20:50 发布
最新推荐文章于 2021-08-08 11:20:50 发布
阅读量166 收藏
点赞数
分类专栏： CSS 文章标签： 使用DIV+CSS完成注册页面的优化 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41819988/article/details/90767586
版权

使用DIV+CSS完成注册页面的优化

需求分析

由于之前博客的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注册页面进行美化

总共是5部分内容

技术分析

CSS的盒子模型: 万物皆盒子，顺时针方向编辑

内边距: 内边距 ,控制的是盒子内容的距离

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px;  上下左右都是10px

padding:10px 20px;  上下是10px 左右是20px

padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px

padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

外边距: 外边距 控制盒子与盒子之间的距离

margin-top:

margin-right:

margin-bottom:

margin-left:

CSS绝对定位:

position: absolute

top: 控制距离顶部的位置

left: 控制距离左边的位置

步骤分析:

  1. 总共是5部分

  2. 第一部分是LOGO部分

  3. 第二部分是导航菜单

  4. 第三部分是注册部分

  5. 第四部分是FOOTER图片

  6. 第五部分是一堆超链接

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 网站注册页面优化</title>
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
	</head>
	<body>
		<!--1. 总共是5部分
			2. 第一部分是LOGO部分
			3. 第二部分是导航菜单
			4. 第三部分是注册部分
			5. 第四部分是FOOTER图片
			6. 第五部分是一堆超链接
		-->
		<div>
			<!--第一部分是LOGO部分-->
			<div>
				<div class="logo">
					<img src="../img/logo.jpg"  width="100px" height="60px"/>
				</div>
				<div class="logo">
					<img src="../img/header.jpg" />
				</div>
				<div class="logo">
					<a href="#">登陆</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			<!--清除浮动-->
			<div style="clear: both;"></div>
			
			<!--第二部分是导航菜单-->
			<div style="background-color: black;height: 50px;">
					<a href="#" class="amenu">首页</a>
					<a href="#" class="amenu">手机数码</a>
					<a href="#" class="amenu">鞋靴箱包</a>
					<a href="#" class="amenu">电脑办公</a>
					<a href="#" class="amenu">香烟酒水</a>
			</div>
			
			
			<!--第三部分是注册部分-->
			<div style="background: url(../ProductsImg/regist_bg.jpg); height: 500px;">
				
				<div style="position: absolute; top: 200px;left: 350px;border:5px solid darkgray; width: 50% ;height: 50%; background-color: white;">
					<table width="60%" align="center">
						<tr>
							<td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td>
						</tr>
						<tr>
							<td>用户名：</td>
							<td>
								<input type="text" />
							</td>
						</tr>
						<tr>
							<td>密码：</td>
							<td>
								<input type="password" />
							</td>
						</tr>
						<tr>
							<td>确认密码：</td>
							<td>
								<input type="password" />
							</td>
						</tr>
						<tr>
							<td>emal:</td>
							<td>
								<input type="email" />
							</td>
						</tr>
						<tr>
							<td>姓名</td>
							<td>
								<input type="text" />
							</td>
						</tr>
						<tr>
							<td>性别</td>
							<td>
								<input type="radio" name="sex"/>男
								<input type="radio" name="sex"/>女
							</td>
						</tr>
						<tr>
							<td>出生日期</td>
							<td>
								<input type="date" />
							</td>
						</tr>
						<tr>
							<td>验证码</td>
							<td>
								<input type="text" />
							</td>
						</tr>
						<tr>
							<td></td>
							<td>
								<input type="submit" value="注册" />
							</td>
						</tr>
					</table>
				</div>
				
			</div>
			
			
			<!--第四部分是FOOTER图片-->
			<div>
				<img src="../img/footer.jpg" width="100%" />
			</div>
			
			
			<!--第五部分是一堆超链接-->
			<div style="text-align: center;">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				<p>Copyright © 2015-2016 网站商城 版权所有</font></p>
			</div>
		</div>
	</body>
</html>

结果展示

 

子木_Lee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS二级导航菜单
11-20
"纯CSS二级导航菜单"是一个完全依赖CSS（层叠样式表）来实现的交互式菜单，不涉及JavaScript或其他编程语言。这种菜单设计适用于那些希望简化代码、提高网页加载速度以及优化移动设备用户体验的开发者。 首先，我们...
CSS轮廓 边距 填充 分组和嵌套
weixin_30809173的博客
06-02 77
CSS轮廓 围绕一个元素(outline),绘制一条线 p { border: 1px solid red; outline: thick dotted green; } <body> <p><b>注意:</b>如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p&g...
CSS的框模型(div)与边距（margin、padding）
weixin_30451709的博客
10-25 710
所谓框模型，例如div标签，你就可以直接把它理解成一个相框。 这个相框里面的相片有高度和宽度，框本身也有一定的宽度。相框和别的相框之间，还有一定的边距。 div设置常见属性 border：边框 padding：内边距 margin：外边距 图上的element，就是相片。 padding就是相片与相框的间距。 border就是相框本身的宽度。 margin就是这个相框和别...
前端之CSS（二）
weixin_30896763的博客
07-03 72
一、盒子模型 说到盒子模型，我们不得不提一下，W3C标准和IE浏览器是有区别的，我昨天就在写抽屉作业的时候踩过坑，建议用谷歌浏览器，并推荐一篇博文：http://www.osmn00.com/translation/213.html 在W3C盒模型中，一个块级元素的总宽度(总高度同理)按照如下的方程式计算： 总宽度 = margin_left + border_left + paddi...
漂亮的CSS二级竖向导航菜单
06-06
本教程将深入探讨如何创建一个“漂亮的CSS二级竖向导航菜单”。这个菜单具有优雅的下拉效果，使得用户体验更加友好。 首先，我们来理解CSS（层叠样式表）在构建导航菜单中的作用。CSS是一种用于描述HTML或XML（包括...
CSS3二级下拉动画滑动菜单特效代码
03-20
"CSS3二级下拉动画滑动菜单特效代码"就是利用CSS3特性实现的一种交互式菜单设计，它使得网页的导航结构更加生动有趣。此特效主要包含以下几个关键知识点： 1. **CSS3选择器**：为了精确地控制每个菜单项的样式，CSS...
前端小练习，css二级菜单制作
最新发布
10-20
css二级菜单，实现tab切换效果
CSS二级菜单
12-19
CSS二级菜单是网站导航系统中的常见设计，它允许用户通过悬停鼠标来展开下一级的链接选项，提供更直观的用户体验。在纯CSS操作下，我们可以实现无需JavaScript的交互效果，使得菜单响应迅速且易于维护。接下来，我们...
CSS基础（二）
Java追求者的博客
05-20 145
1. Emmet语法 Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度, Vscode内部已经集成该语法。 1.1 快速生成HTML结构语法 生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成< div>< /div> 如果想要生成多个相同标签加上就可以了比如 div 3就可以快速生成3个div 如果有父子级关系的标签，可以用>比如ul > li就可以了 如果有兄弟关系的标签，用＋就可以了比如div+p 如果生
css（二）
qq_46199553的博客
08-08 139
1. Emmet 语法 1.1 快速生成HTML结构语法 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了 如果有兄弟关系的标签，用 + 就可以了 比如 div+p 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了 如果生成的div 类名是有顺序的， 可以用 自增
html边框宽度div填充,html元素(div)的全高,包括边框,填充和边距？
weixin_29275257的博客
06-16 201
gdoron is su..62如果你可以使用jQuery:$('#divId').outerHeight(true) // gives with margins.对于vanilla javascript,你需要写更多内容(比如总是......):function Dimension(elmID) {var elmHeight, elmMargin, elm = document.getEleme...
div入门之盒子模型，边界margin,填充padding,框边border
u011333814的专栏
02-03 3302
一个div分为边界，框边，还有内部，内部有内容到边框的距离padding
（二）CSS
qq_40126611的博客
12-23 167
css 的声明 <html> <head> <meta charset="UTF-8"> <title>css的声明学习</title> <!-- CSS声明学习: 1、在head标签中使用style标签声明： 作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式 2、在标签上使用style属性进行声明： 作用：此声明会将css样式直接作用于当前标签。 3
css(二）
rrfighting的博客
08-11 116
CSS属性书写顺序 布局定位属性：display、position、float、clear、visibility、overflow 自身属性：width、height、margin、padding、border、background 文本属性：color、font、text-decoration、text-align、vertical-align、white-apace、break-word 其他属性：content、cursor、border-radius、box-shadow、 布局流程 先确定版
使用DIV+CSS布局页面——1
热门推荐
qq_36461411的博客
07-01 2万+
1.什么是div        div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上时个容器，例如使用&lt;p&gt;段落的标签。&lt;p&gt;段落&lt;/p&gt;        &lt;p&gt;标签作为一个容器，其中放入了内容。同样的，div也是一个容器，能够放置内容，例如： &lt;div&gt; 文档内容 &lt;/div&gt;        在传统的表格样式...
CSS margin 设置div外边距填充
tichangde的专栏
09-30 844
最近学习css，记录一些笔记。 CSS  margin 设置div外边距填充 div{     margin:0,70px,0,70px; } IE可解析，但Google浏览器不能解析，要改写为 div{     margin-top:0px;     margi

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值