运用HTML和CSS制作聚美优品注册整体界面

最新推荐文章于 2022-04-29 16:31:55 发布

Xyp9x.

最新推荐文章于 2022-04-29 16:31:55 发布

阅读量2k

点赞数 5

文章标签： html+css 浮动

本文链接：https://blog.csdn.net/weixin_44701229/article/details/102560198

版权

运用HTML和CSS制作聚美优品注册整体界面聚美优品的界面一向很讨广大客户的喜爱，好看却不繁杂，下面大家看下本次将制作的界面看到网页的第一件事就是想布局，如何把整个网页中各个元素进行包装分化。总体可以分为三个部分header、main和footer，总体再包在一个div下，其中header有两个部分：左边的图片和右边的三个超链接精灵图，main有两个部分：左边的大图片和右边的一个登录样式，f...

摘要由CSDN通过智能技术生成

运用HTML和CSS制作聚美优品注册整体界面

聚美优品的界面一向很讨广大客户的喜爱，好看却不繁杂，下面大家看下本次将制作的界面

在这里插入图片描述

看到网页的第一件事就是想布局，如何把整个网页中各个元素进行包装分化。总体可以分为三个部分header、main和footer，总体再包在一个div下，其中header有两个部分：左边的图片和右边的三个超链接精灵图，main有两个部分：左边的大图片和右边的一个登录样式，footer总体来说是一个部分：一段其中包含少许超链接的文字和5个精灵图，制作网页前我们先大体的画出这个框架如下
在这里插入图片描述
搭建好制作思路框架后我们开始整理要用到的图片以及精灵图，可以从聚美优品网页中检视获得，如下

在这里插入图片描述

做好这些准备就可以开始编码，先看一下我具体的html和css的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>聚美优品</title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<center>
			<div class="wapper">
				<div class="header">
					<div class="left_1"></div>
					<div class="right_1">
						<ul>
							<li><a href="#" class="li_a_1"></a></li>
							<li><a href="#" class="li_a_2"></a></li>
							<li><a href="#" class="li_a_3"></a></li>
							
						</ul>
					</div> 
				</div>		
				
				<div class="main">
					
					<div class="left_2"><img src="img/signPic.jpg.png" /> </div>
						<div class="right_2">
							<div class="main_txt">
								<h1 style="font-size: 20px;color: #e31256;font-family: "Microsoft YaHei", 微软雅黑, 黑体;">用户注册
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<a class="txt_1">已有帐号</a>
								<a class="txt_2" href="#">在此登录</a>
								</h1><br /><br />
								<form method="get">
									<input type="text" class="text_1" placeholder="手机号"/>
									<input type="text" class="text_2" placeholder="短信验证码"/>
									<button class="button_1">获取短信验证码</button>
									<input type="password" class="text_1" placeholder="密码"/>
									<input type="password" class="text_1" placeholder="重复密码"/>
									<br /><br /><button class="button_2">同意协议并注册</button>
								</form><br>
						        <a class="txt_2" href="#">《聚美优品用户协会》

最低0.47元/天解锁文章

Xyp9x.

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
运用HTML和CSS制作聚美优品注册整体界面

运用HTML和CSS制作聚美优品注册整体界面聚美优品的界面一向很讨广大客户的喜爱，好看却不繁杂，下面大家看下本次将制作的界面看到网页的第一件事就是想布局，如何把整个网页中各个元素进行包装分化。总体可以分为三个部分header、main和footer，总体再包在一个div下，其中header有两个部分：左边的图片和右边的三个超链接精灵图，main有两个部分：左边的大图片和右边的一个登录样式，f...
复制链接

扫一扫