CSS网站注册页面的优化

最新推荐文章于 2021-08-03 19:22:25 发布
最新推荐文章于 2021-08-03 19:22:25 发布
阅读量427 收藏
点赞数
分类专栏： CSS 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mqingo/article/details/83747990
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" type="text/css" href="../css/main.css"/>
		 <style>
		 	.logo{
				float: left;
				width: 33%;
				height: 60px;
				line-height: 60px;
				/*border: 1px;
				border-color: red;
				border-style: solid;*/
				border: 1px red solid;
			}
			
			.amenu{
				color: white;
				text-decoration: none;
				height: 60px;
				line-height: 60px;
			}
		 </style>
	</head>
	<body>
		<!--
			1. 总共是5部分
			2. 第一部分是LOGO部分
			3. 第二部分是导航菜单
			4. 第三部分是注册部分
			5. 第四部分是FOOTER图片
			6. 第五部分是一堆超链接
		-->
		<div>
			
			<!--2. 第一部分是LOGO部分-->
			<div>
				<div>
				<div class="logo">
					<img src="../img/logo2.png"/>
				</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>
			<!--3. 第二部分是导航菜单-->
			<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>
			<!--4. 第三部分是注册部分-->
			<div style="background: url(../image/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>email:</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>
			
			<!--5. 第四部分是FOOTER图片-->
			<div>
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--9. 第四部分: 放一堆超链接-->
			<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>
					
					<br />
					
					Copyright © 2005-2016  版权所有
			</div>
			
		</div>
	</body>
</html>

 

mqingo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础以及使用DIV+CSS完成网站首页、注册页面优化
qq_45100706的博客
05-14 1388
1.CSS样式 表格布局的缺陷： ​ 1.嵌套太多，容易出现顺序错乱 ​ 2.表格布局的页面不灵活，改变其中一个模块时，其他的布局结构也会发生改变 1.1 CSS概述： ​ Cascading Style Sheets（层叠样式表） ​ CSS作用：美化页面、将HTML内容和美化内容进行分离 ​ 简单语法： 选择器{ 属性名：属性值; 属性名：属性值 } 1.2 HTML的...
使用DIV+CSS完成注册页面的优化
weixin_45121123的博客
05-08 223
<!--2. 第一部分是LOGO部分--> <div> <div class="logo"> <img src="../img/logo2.png" /> </div> <div class="logo"> <img src="../img/header.png" /> </div> <div class=...
【使用DIV+CSS重写网站首页案例】CSS选择器
u012161251的博客
06-01 215
使用表格<table></table>对网站首页进行布局有缺陷，不能拖动版块，不灵活。 DIV Div是一个html的标签，单独使用没有意义，必须结合CSS使用； 是一个块级元素，单独占一行； 它主要用于页面的布局； Span Div是一个html的标签，单独使用没有意义，必须结合CSS使用； 是一个内联元素，显示一行； 它主要用于对括...
【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
u012161251的博客
06-02 622
使用DIV+CSS重写网站首页案例 步骤分析： 第一步：先定义一个大的 div（整个页面），然后嵌套 8 个小的 div（共八行）； 第二步：(第一行)在第一个 div 里面嵌套 3 个小的 div； 第三步：(第二行)在小 div 里面写一个列表标签(需要使用 css 的 display 属性的 inline)； 第四步：(第三行)在小 d...
首页网站div制作（div+css概述，css选择器）
cuterabbitbaby的博客
09-14 1821
首页DIV+CSS布局代码 首页 #bodydiv { border: solid 1px blue; width: 90% px; } .logodiv { border: solid 1px blue; width: 33%; float: left; height: 48px; } .clear { clear: both; }
简单登录注册页面（HTML5、CSS、JS）
03-24
在这个登录注册页面中，CSS可能被用来设置背景颜色、字体样式、边框、内边距、外边距等视觉效果。使用CSS可以实现响应式设计，使页面在不同设备和屏幕尺寸上都能良好显示。CSS3还引入了许多新特性，如伪类选择器、...
手机APP注册页面html模板是一款采用css3制作的手机APP注册页面设计html模板。.rar
04-27
总结来说，这个"手机APP注册页面html模板"是一个基于CSS3的网页设计资源，它简化了手机应用注册页面的开发过程，提供了良好的基础样式和交互效果。通过理解和修改这个模板，开发者可以快速打造出符合品牌形象且用户...
html+css网站模板网页设计源码-html商城网页设计模板.zip
05-10
HTML和CSS是构建网页设计的基础，此资源提供了一个完整的HTML商城网页设计模板，适用于初学者和专业人士进行网页制作。这个模板包含了一系列预先设计的页面结构和样式，可以帮助快速搭建一个功能齐全、外观吸引人的...
html+css高仿B站的注册页面
08-07
在本项目中，我们主要探讨如何使用HTML和CSS来高仿制作哔哩哔哩（B站）的注册页面。这是一个适合初学者练习的基础项目，它将帮助你掌握基本的前端网页布局、样式设计以及元素对齐等技能。下面我们将详细讨论这个过程...
HTML&CSS——使用DIV和CSS完成网站首页重构
小强博客
01-17 8296
需求分析 技术分析 1、DIV 相关的技术 Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。 Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合CSS 来使用。它主要用于对括起来的内容进行样式的修饰。 2、CSS 的作用 HTML：它是整个网站的骨架。 CSS：它是对整...
一个简单易懂的div+CSS写的博客首页
08-15
一个很好懂得CSS+DIV例子，适合新手看，页面也好看的例子
用DIV+CSS技术设计的个人网页（网页制作课作业）
12-07
关于网页制作课程的作业，使用DIV+CSS技术设计的个人主页，有需要的朋友可以下载，挺简洁的
div+css注册页面案例
消极的人永远是对的，积极的人选择勇往直前
09-24 965
div+css注册页面案例 所有的html标签中，表单标签是最重要的。在实际开发中，最经典的实例就是⽤户注册，覆盖了表单标签的所有的元素。效果图如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
DIV+CSS实现商城首页
m0_37286282的博客
07-23 3099
用table可以实现一个布局，但是远没有div+css来的强大。基本上所有的网页开发时的布局都是用的div+css，div知识一个框架，没有css的配合也是不行的。 #father{ border: 1px solid red; width:1300px; height: 2000px; margin: auto; } #logo{ bo
div+css搭建网站
learnerq的博客
11-12 909
一，分析页面结构 如一个页面有导航栏 该结构在分析时应从大到小进行分析 首先是一个大div里面套有3个小div 中间的div是一个ul li结构 一，应设置body的属性比如字体大小和类型 二，应设置父div的宽，高由内容填充 三，导航栏 第一部分是一张图片设置它的margin-right和float为left 第二部分是一个ul li结构的导航条
用div和css制作网页,DIVCSS网页设计总结:有用的3个网页制作_css
weixin_32188111的博客
08-03 1089
网页制作Webjx文章简介：DIVcss网页设计总结:有用的3个网页制作技巧.我们在进行DivCSS布局的时候，非常关注CSS技巧的学习，今天向大家推荐3个所谓的 “顶级”CSS技巧！虽然没有什么新意，但对新手而言却非常重要！一、在一行内声明CSSh2{font-size:18px;border:1pxsolidblue;color:#000;background-color:#FFF...
jsp页面使用DIV+CSS设计主页通用代码
信息技术的博客
07-28 304
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %> <% String path =request.getContextPath(); %> <!DOCTYPE html&...
DIV+CSS首页布局
Tina_dl的博客
03-25 938
1.前期大一学习过，但是后来写东西的时候还是忘记了布局的问题， 近来正好又开了前端的课，所以（小菜猫的我）又记录下来了，以便 我后面的时候学习， 2.页面的布局采用HTML+CSS 就是做个最简单的布局 首先看一下首页的标签 主要就是 【 页眉 ，导航标签，轮播图标签，内容不分，页脚 】,这几个比较 大的不部分，具体布局还是根据自己的需求来，上我的模板 HTML CSS 效果： ...
DIV+CSS搭建（淘宝首页）布局图
热门推荐
小柒的前端之旅
03-19 3万+
制作网页时，构建页面布局图很重要。布局前的结构划分避免造成混乱。 下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去，只有布局图和最终页面的比较图。 搭建的布局图与最终效果的一个比较： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
html中利用css做注册页面背景
最新发布
09-13
### 回答1： 可以使用CSS的background属性来设置注册页面的背景，具体步骤如下： 1. 在HTML文件中添加一个div元素，用于包括整个注册页面的内容。 2. 在CSS文件中设置该div元素的样式，包括宽度、高度、位置等。 3. 使用background属性设置背景，可以使用颜色、图片等作为背景。 例如，以下是一个利用CSS设置注册页面背景的示例代码： HTML代码： ``` <div class="register-page"> <!-- 注册页面内容 --> </div> ``` CSS代码： ``` .register-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff url('background.jpg') no-repeat center center fixed; background-size: cover; } ``` 其中，background属性的值包括颜色值和图片地址，no-repeat表示不重复平铺，center center表示背景图片居中，fixed表示背景图片不随页面滚动而滚动，background-size: cover表示让背景图片充满整个页面。 ### 回答2： 要利用CSS在HTML中设置注册页面的背景，可以使用以下步骤： 第一步是编写HTML代码。创建一个带有注册表单的HTML文件。可以使用<form>元素和相应的输入字段（例如<input>）和提交按钮（例如<button>）。确保为每个元素设置适当的ID或class属性，以便在CSS中引用它们。 第二步是编写CSS代码。在HTML文件的<head>标签内部或外部的CSS文件中，使用选择器来选择要应用样式的元素。例如，可以使用body选择器选择整个页面，或使用特定的ID或class选择器选择特定的元素。 第三步是设置背景。使用background属性来设置背景。可以使用background-image属性指定背景图片的URL。例如，可以使用以下代码在CSS中设置背景图片： body { background-image: url("image.jpg"); } 如果想要设置其他背景属性，例如背景颜色或背景重复，可以使用background-color和background-repeat等属性。 第四步是根据需要进一步调整样式。可以使用其他CSS属性来调整表单元素的样式，例如设置输入字段的宽度、高度、边框样式等等。可以通过在CSS中选择适当的元素，并添加相应的属性和值来进行样式设置。 最后，将CSS样式表与HTML文件关联。在HTML文件的<head>标签内使用<link>元素或在<style>标签中添加CSS代码，将CSS样式应用于注册页面。 这样，注册页面就会具有设置的背景样式。可以根据需要进一步自定义和调整背景，以及其他元素的样式。 ### 回答3： 在HTML中利用CSS来设置注册页面的背景可以通过以下步骤来实现： 1. 在HTML文件中添加一个注册页面的容器元素，例如一个div或者一个section标签，给这个容器添加一个唯一的id属性，例如"registration-container"。 2. 在CSS文件中选择这个注册页面容器的id选择器，例如"#registration-container"，然后设置它的背景属性。可以使用background-color属性来设置背景颜色，例如设置为白色可以使用"background-color: white;"。 3. 如果想要设置一个背景图片，可以使用background-image属性。可以将背景图片的路径放在url()函数中，例如"url(images/background.jpg)"。同时，可以使用background-repeat属性来指定图片的重复方式，例如"background-repeat: no-repeat;"。 4. 如果想要设置背景图片的位置，可以使用background-position属性。可以使用关键字或者百分比来指定图片在容器中的位置，例如"background-position: center;"可以将图片居中显示。 5. 如果图片不足以填满整个容器，可以使用background-size属性来调整图片的尺寸。可以使用关键字，像素值或者百分比来指定尺寸，例如"background-size: cover;"可以让图片填满整个容器，保持比例不变。 6. 可以根据需要继续使用其他的CSS属性来进一步调整注册页面的背景，例如添加透明度、阴影效果等等。 通过以上步骤，就可以使用CSS来设置注册页面的背景了。根据实际需求，可以选择合适的颜色或者图片，并进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值