任务01-05-登录界面

最新推荐文章于 2024-08-10 09:49:48 发布
最新推荐文章于 2024-08-10 09:49:48 发布
阅读量91 收藏
点赞数
文章标签： css html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46137837/article/details/119211950
版权

登录界面

字体,表格,表单知识点

在这里插入图片描述在这里插入图片描述

设计图

在这里插入图片描述

代码实现

 -  html代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="登录.css">
</head>
<body>
	<div class="header">
		<div class="inner">
			<div class="innerleft">
				<span><img src="../../img/test1-5/logo.png" height="50px"></span>
				<span>
					<a href="#">首页</a>
					<a href="#">播客</a>
					<a href="#">专栏课程</a>
					<a href="#">下载</a>
					<a href="#">问答</a>
					<a href="#">社区</a>
					<a href="#">插件</a>
					<a href="#">认证</a>

				</span>
			</div>
			<div class="innercenter">
				<input type="text" placeholder="mysql安装教程">
				<img src="../../img/test1-5/research.jpg">
			</div>
			<div class="innerright">
				<span>
					<a href="#">登录/注册</a>
					<a href="#">会员中心</a>
					<a href="#">收藏</a>
					<a href="#">消息</a>
				</span>
				<span>
					<img src="../../img/test1-5/chuangzuo.jpg">
				</span>
			</div>
		</div>
	</div>

	<div class="content">
		<div class="space"></div>
		<div class="main">
			<div class="contentleft">
				<h2>CAP 定理</h2>
				<p>"1998 年，布鲁尔提出 CAP 定理。CAP 定理是指一个分布式系统不可能同时满足以下三点：一致性（Consistency）、可用性（Availability）和分区容错性（Partition tolerance）。CAP 定理一开始由布鲁尔以猜想的形式提出，又被称作布鲁尔定理。"</p>
			</div>
			<div class="contentright">
				<div class="bd">
					<span style="border-bottom-color: orange;"><a href="#">账号密码登录</a></span>
					<span><a href="#">手机免密登录</a></span>
					<input type="text" placeholder="手机号/邮箱/用户名">
					<input type="password" placeholder="密码">
					<p>忘记密码</p>
					<input type="button" value="登录" class="btu">
				</div>
				<div class="bf">
					<span>
						<a href="#">微信注册登录</a>|<a href="#">CSDN App扫码</a>|<img src="../../img/test1-5/icons.png">
					</span>
				</div>
				<p class="ppp">未注册手机验证后自动登录，注册即代表同意《服务条款》</p>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="fh">
			<ul>
				<li>关于我们</li>
				<li>招贤纳士</li>
				<li>广告服务</li>
				<li>开发助手</li>
				<li>开发助手</li>
				<li>400-660-0108</li>
				<li>kefu@csdn.net</li>
				<li>在线客服</li>
				<li>工作时间 8:30-22:00 </li>
			</ul>
		</div>
		<div class="fm">
			<ul>
				<li>京ICP备19004658号</li>
				<li>京网文〔2020〕1039-165号</li>
				<li>经营性网站备案信息</li>
				<li>北京互联网违法和不良信息举报中心</li>
				<li>网络110报警服务</li>
				<li>中国互联网举报中心</li>
				<li>家长监护</li>
				<li>Chrome商店下载</li>
				<li>©1999-2021北京创新乐知网络技术有限公司</li>
				<li>公安备案号11010502030143</li>
				<li>版权与免责声明</li>
				<li>版权申诉</li>
				<li>出版物许可证</li>
				<li>营业执照</li>
			</ul>
		</div>
	</div>
</body>
</html>

 - css代码

*{
	margin: 0;
	padding: 0;
	border:0;
	background: none;
	text-decoration: none;
}
.header .inner{
	height: 50px;
	width: 100%;
	background-color: white;
	display: inline-block;
	padding:0 50px;
}
.header .inner .innerleft img{
	float: left;
}
.header .inner .innerleft a,.header .inner .innerright a{
	line-height: 50px;
	float: left;
	height: 50px;
	padding-left: 20px;
	color: black;
}
.header .inner .innercenter{
	height: 30px;
	width: 400px;
	float: left;
	border: 1px solid white;	
	border-radius: 10px;
	background-color: #f5f6f7;	
	margin:10px 30px;	
}
.header .inner .innercenter input{
	margin: 5px;
	margin-left: 10px;
	color: #d2c4c5;
}
.header .inner .innercenter img{
	height: 30px;
	float: right;
}
.header .inner .innerright img{
	height: 30px;
	float: left;
	margin:10px 30px;
}

.content{
	width:100%;
	height: 600px;
	background-image:url("../../img/test1-5/bg.jpg") ;
	background-size: 100% 600px;
	margin: auto;
}
.content .space{
	width: 100%;
	height: 70px;
	background-color: transparent;

}
.content .main{
	height:500px;
	width: 780px;
	margin: 0 auto;
}
.content .main .contentleft{
	width: 250px;
	height: 300px;
	color: white;
	background-color: rgba(0,0,0,0.5);
	padding: 80px 30px;
	line-height: 35px;
	float: left;

}
.content .main .contentright{
	width: 460px;
	height: 460px;
	background-color: white;
	float: left;
}
.content .main .contentright .bd{
	width: 400px;
	height: 300px;
	margin: 35px 75px;
}
.content .main .contentright .bd span{
	display: inline-block;
	width: 100px;
	height: 20px;
	border-bottom: 2px solid #f7f7f7;
	float: left;
	margin: 30px 0px;
	padding:0 20px;
	
}
.content .main .contentright .bd a{
	color: #634d7f;
}
.content .main .contentright .bd input{
	height: 30px;
	width: 230px;
	border: 1px solid #634d7f;
	border-radius: 8px;
	margin: 10px 20px;
	padding: 2px 10px;
}
.content .main .contentright .bd p{
	margin-left: 200px;
}

.content .main .contentright .bd .btu{
	width: 250px;
	background-color: #f5f5f5;
}
.content .main .contentright .bf{
	width: 380px;
	height: 35px;
	margin: auto;
	color: #6cd5ff;
}
.content .main .contentright .bf a{
	color: #6cd5ff;
	line-height: 35px;
	display: inline-block;

}
.content .main .contentright .bf img{
	width: 160px;
	height: 30px;
	vertical-align: middle; 
}
.content .main .contentright .ppp{
	font-size: 13px;
	color: #c7c7cf;
	float: right;
	margin-top: 15px;
}


.footer{
	width: 100%;
	height: 120px;
	text-align: center;
}
.footer .fh{
	width: 80%;
	margin: 20px auto;
	color: grey;
}
.footer .fm{
	width: 90%;
	margin: 20px auto;
	color: grey;
}
.footer .fh li{
	display: inline;
	margin-left: 20px;
	font-size: 15px;
	list-style: none;
}
.footer .fm li{
	display: inline;
	margin-left: 20px;
	font-size: 10px;
	list-style: none;
}

知识拓展:

1. 设置图片居中

  • vertical-align 是针对行内元素来设置的，对于块级元素是没有用的
    vertical-align：middle
  • 如果相对块级元素有用，同时还要需要添加dispaly：table-cell
    正常情况下，图片和文字是底边对齐显示的，img标签可以直接设置宽度和高度，只设置一个会等比例缩放。

2. li标签的横向排列

  • 使用float:left
  • 使用display:inline
    list-style:none,这个属性可以直接去掉li前面的圆点，可以自己进行设置其他美观的样式或者列表显示的样式。

3. 实现背景透明，文字不透明

  • 为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。

  • 使用CSS3新属性rgba。

     css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性，例如：filter : Alpha(opacity=50)。
 css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如background-color : rgba(255,255,255,0.5)。
weixin_46137837
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Linux - 计划任务
qq_48391148的博客
01-27 7135
目录 为什么需要计划任务： linux里的计划任务： 停止crond服务： 开启crond服务： 重启crond服务： 计划任务的格式： 练习： 添加计划任务： 同一时间可以做多个任务吗？ 怎么终止计划任务？ 怎么知道计划任务是否执行 笔试题目： 每个用户都有自己的计划任务 这个用户没有登录是否计划任务也会执行？ root用户是否可以去管理其他用户的计划任务？ 如何排查你的机器里是否有黑客添加的计划任务？ （笔试题） 计划任务： 按照计划准时准点去执行任务 --》 计划.
01-项目性能优化环境搭建
weixin_47772925的博客
01-15 1207
JDBC驱动可以在mysql的官网下载，具体地址是：https://dev.mysql.com/downloads/file/?JMeter是Java语言开发，实际是运行在JVM中的，GUI模式运行需要耗费较多的系统资源，一般来说，GUI模式要占用10%-25%的系统资源。如果我们修改过表名，也就是在jmeter的Backend Listener的measurement配置(默认为jmeter)，这个时候就需要去设置中进行修改，我这里使用的就是默认的，所以无需修改。注意：用完记得释放资源，免得一直计费！
分布式任务调度平台XXL-JOB
trusause的博客
12-04 936
分布式任务调度平台XXL-JOB》      一、简介 1.1 概述 XXL-JOB是一个轻量级分布式任务调度框架，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。 1.2 特性 1、简单：支持通过Web页面对任务进行CRUD操作，操作简单，一分钟上手；2、动态：支持动态修改任务状态、暂停/恢复任务，以及终止
《分布式任务调度平台XXL-JOB》
谭青海
07-19 9919
一、简介 1.1 概述 XXL-JOB是一个轻量级分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。 1.2 特性 1、简单：支持通过Web页面对任务进行CRUD操作，操作简单，一分钟上手； 2、动态：支持动态修改任务状态、暂停/恢复任务，以及终止运行中任务，即时生效； 3、调度中心HA（中心式）：调度采用中心式设...
深度学习关于分布式任务调度平台XXL-JOB框架详解
热门推荐
程序员超哥
05-11 1万+
首先说明一下，为什么写这篇博客，最近公司就定时器任务项目进行升级，我负责了这个项目，发现xxl-job的性能还有架构设计非常好，对于集成spring项目，springboot项目有很好的扩展应用。 就现在而言，关于定时任务有各种各样的架构，java 定时器类，spring定时器类，quartz分布式定时器类，xxl-job分布式任务调度平台。xxl-job是一款轻量级定时任务可以分布式部...
一、分布式任务调度 —— XXL-JOB
清风明月独相伴
04-25 1741
一、简介1.1 概述XXL-JOB是一个轻量级分布式任务调度框架，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。1.2 特性1、简单：支持通过Web页面对任务进行CRUD操作，操作简单，一分钟上手；2、动态：支持动态修改任务状态、暂停/恢复任务，以及终止运行中任务，即时生效；3、调度中心HA（中心式）：调度采用中心式设计，“调度中心”基于集群...
单体项目-瑞吉外卖
adadapter的博客
07-13 1095
黑马教程-瑞吉外卖项目笔记
单片机 -> RTOS -> Linux
strongerHuang
10-13 1533
关注+星标公众号，不错过精彩内容编排|入门小站素材来源 | 掘金参考地址：https://juejin.cn/post/6938385978004340744对于嵌入式而言，大部分人的进阶路线：单片机 -> RTOS -> Linux。下面，针对有单片机、RTOS基础的同学，分享一份入门 Linux 的基础内容。Linux 基础操作系统操作系统Operating System简...
Java Web应用小案例 - 实现用户登录功能
howard2005的专栏
12-08 4241
多种方式实现用户登录功能
转载《分布式任务调度平台XXL-JOB》
Vincent1111112的博客
01-16 882
《分布式任务调度平台XXL-JOB》 博文转自 https://www.cnblogs.com/xuxueli/p/5021979.html 一、简介 1.1 概述 XXL-JOB是一个轻量级分布式任务调度框架，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。 1.2 特性 1、简单：支持通过Web页面对...
css学习
polarisya的博客
08-07 212
【代码】css学习。
tailwindcss @apply 和 @layer 有什么区别
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-08 406
apply用于将 Tailwind 的工具类应用到自定义的 CSS 类中，简化和复用样式。@layer用于将自定义样式归类到 Tailwind 的特定层中，确保样式的声明顺序和组织性。通过结合使用这两个指令，你可以在 Tailwind CSS 项目中更高效地管理和复用样式。
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 192
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 524
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 647
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
css实现两个字和三个字的两端对齐
qq_59625204的博客
08-08 150
【代码】css实现两个字和三个字的两端对齐。
24.在 CSS 中定义系统字体栈 & 实现全屏
最新发布
粉丝们务必加入微信粉丝群
08-10 129
在 CSS 中定义系统字体栈使用字体栈是指在 CSS 规则的 font-family 属性中定义字体列表的做法。浏览器会按顺序查找每个字体,如果可能的话首选第一个字体,如果找不到字体(在系统上或在 CSS 中定义),则回退到下一个字体。系统字体栈是一个字体列表,用于接近原生应用的感觉。它使用操作系统的原生字体来渲染文本,这是让你的 Web 应用感觉更原生的好方法。使用 system-uisyste...
CSS实现hover时文本上下出现线条
p_s_p的博客
08-07 231
【代码】CSS实现hover时文本上下出现线条。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1252
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
XXL-JOB任务调度框架深度解析与实践分享
6. Web管理界面：提供友好的Web界面，方便任务管理和运维操作。 7. 异常处理：支持重试、失败通知、分布式补偿等策略，提高任务健壮性。 在使用XXL-JOB时，需要注意以下事项： 1. 配置管理：正确配置调度中心和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值