登陆页面综合应用 - html/css

Home > List of blog posts > 登陆页面综合应用

Blogger Information

Blog 13

fans 0

comment 0

visits 11021

Special Recommendation

More>

Related recommendations

总结

此次课程我学了如何应用背景background实现背景图的定位显示、颜色渐变、背景size的应用，以及表单的用法，按钮标签input，占位符placeholder提示文字显示。并做了一个案例综合应用。

实例1表格练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格</title>
	<style type="text/css" media="screen">
		table {
			width: 300px;

			border: 1px solid #ccc;
			border-collapse: collapse;  /*表格独有的折叠边框 border-collapse collapse*/
			text-align: center;
		}

	td {
		border: 1px solid #ccc;
	}
    ul {
    	list-style: none;  /*取消原来自带样式*/
    }
	</style>
</head>
<body>
<table>

		<tr>
			<td rowspan="3">data</td>   <!-- rowspan合并行 -->
		</tr>
		<tr>
			<td colspan="4">data</td> <!-- colspan 合并列 -->

		</tr>
		<tr>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
		</tr>
</table>

<ul>  <!-- 无序列表 -->
	<li>全权</li>
	<li>全权</li>
	<li>全权</li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例 2 登陆界面总结应用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登陆WEB界面</title>
<!-- 	<link rel="stylesheet" type="text/css" href="">
	<link rel="icon" type="image/x-icon" href=""> -->
<style type="text/css" media="screen">
	*{
		margin: 0px 0px;
		padding: 0px 0px;
	}
	html {
		height: 100%;   /*定义html高  应该是块标签 所以不用定义宽，宽会自适应，高度需要靠内容支撑，设置100%就是根据浏览器窗口高度自适应*/
	}
	body {
/**/
								/*(to 渐变方向，起始颜色，终止颜色)        bgsize设置宽、高 100%    */    
		background: linear-gradient(to bottom,#1D85E0,#0B4182) no-repeat 100% 100%;
		/*background-size:;*/
	}
	div {
		margin:180px auto;
		width: 400px;
		height: 300px;
		background: #fff;
		text-align: center;
		background: rgba(255,255,255,0.8);   /*背景颜色RGB+透明度0~1*/
		border-radius: 6px;   /*圆角*/
	}
   img {
   	margin: 10px 0px;
   	border-radius:40px;   
   	width: 80px;
   	height: 80px;
   	box-shadow: 2px 2px rgba(0,0,0,0.3); /*图像阴影  水平X垂直Y 阴影大小 让后就是颜色值和透明度取值0~1*/
   }
   input {
	margin: 6px 0px;
   	width: 200px;
   	height: 25px;
   	border: none;
   	padding-left: 12px; /* 内部顶出12像素*/
   	border-radius: 6px;  /*圆角*/
   }
   button {
   	width: 300px;
   	height: 30px;
   	margin-top: 20px;    
   	background: #1C80D9;   /*背景色*/
   	border: none;
   	border-radius: 6px;
   	color: #fff;
   }
   .userp {
   	font-size: 14px;
   	color: #616366;

   }
   .pic1 {
   	display: inline-block;    /*将span标签转换成内联块元素，让它同时可以用内联、块的样式元素*/
   	width: 20px;
	height: 20px;
	background: url(p1.jpg) -95px -111px no-repeat;   /*背景图定位 背景不平铺*/
	vertical-align:middle;   /*垂直居中*/
    border-radius: 10px;   /*边框圆角*/
    margin-right: 5px;  /*向右顶出5像素*/
   }
      .pic2 {
   	display: inline-block;
   	width: 20px;
	height: 20px;
	background: url(p1.jpg) -54px -192px no-repeat; /*背景图定位 背景不平铺*/
	vertical-align:middle;
    border-radius: 10px;
    margin-right: 5px;
   }
</style>
</head>
<body>
<div>

		<img src="http://img4.duitang.com/uploads/item/201412/24/20141224224554_SuYth.thumb.700_0.jpeg" alt="头像">
			<p class="userp">请输入用户名和密码<p>
	<form action="url" method="get" accept-charset="utf-8">
	<span class="pic1"></span><input type="text" name="user" value="" placeholder="请输入用户名...."><br> <!--  placeholder 占位符提示 -->
	<span class="pic2"></span><input type="password" name="passwd" value="" placeholder="请输入密码...."><br>

	<button type="">登陆</button>
	</form>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

新闻列表样式跳转

2019-03-12 14:14:51

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

总结

实例1表格练习

实例 2 登陆界面总结应用