html登录页面设计

html 1 年前 0 9

本文介绍: 1.html：HTML 是一种标记语言，用于定义网页的结构和内容，包括段落、标题、列表、链接等等。它使用标签来标识不同的内容，并且这些标签可以用于嵌套2.CSS：CSS 是一种样式表语言，用于定义网页的样式和布局，例如字体、颜色、间距、位置等等。它可以控制页面的外观和感觉，使网页看起来更加美观和易于使用。与 HTML 不同，CSS 的作用是在网页上设置样式和布局，而不是定义内容关系：HTML 和 CSS 是互补的技术，它们必须一起使用才能构建出完整的网页。

html 登录 页面 设计 实训

html和CSS概述

1.html：

HTML 是一种标记语言，用于定义网页的结构和内容，包括段落、标题、列表、链接等等。它使用标签来标识不同的内容，并且这些标签可以用于嵌套

2.CSS：

CSS 是一种样式表语言，用于定义网页的样式和布局，例如字体、颜色、间距、位置等等。它可以控制页面的外观和感觉，使网页看起来更加美观和易于使用。与 HTML 不同，CSS 的作用是在网页上设置样式和布局，而不是定义内容

关系：

HTML 和 CSS 是互补的技术，它们必须一起使用才能构建出完整的网页。HTML 为网页提供了结构和内容，而 CSS 则提供了样式和布局。通过将 HTML 和 CSS 结合使用，开发人员可以创建出具有复杂布局和吸引人的外观的网页

一些重要的属性

1.margin:设置所有外边距属性可以用1道4个值(margin–bottom,margin–left,margin–right,margin–top)

2.padding:一个声明中设置所有填充属性可以有1到4个值(padding–bottom,padding–left,padding–right,padding–top)

3.border–radius:允许设置的外边框圆角最多可指定4个属性的复合元素

4.position:一个元素(静止的static，相对的relative，绝对的a bs olut e，固定的sticky)的定义方法的类型

ab s olute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位；

fixed：生成固定定位的元素，相对于浏览器窗口进行定位

rel a ti ve：生成相对定位的元素，相对于其正常位置进行定位

static：默认值没有定位，元素出现在正常的流中

sticky：粘性定位，该定位基于用户滚动的位置

in he r i t:规定应该从父元素继承 p osi t ion 属性的值

5.transform:用于元素的2D或3D转换这个属性允许你将元素旋转，缩放，移动，倾斜等

none:定义不进行转换

matrix(n,n,n,n,n,n):定义 2D 转换，使用六个值的矩阵

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):定义 3D 转换，使用 16 个值的 4x4 矩阵

translate(x,y):定义 2D 转换

translate3d(x,y,z):定义 3D 转换

…….

6.font:属性在一个声明中设置所有字体属性(font–style font–var i ant font–wei g ht font–size/line–height fon t–fa m ily)

7.display:设置元素是否被视为块或者内联元素以及用于子元素的布局如流式布局、网格布局或弹性布局

none:此元素不被显示

block：此元素为块级元素，前后会带有换行符

inline：此元素为内联元素，元素前后没有换行符

inline–block：行内块元素

……

8.outline:轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用可以设置的属性分别是（按顺序）outline–color, outline–s t yle, out line–width

9.text–transform 属性控制文本的大小写

none:默认定义带有小写字母和大写字母的标准的文本

capi t alize：文本中的每个单词以大写字母开头

up per case：定义仅有大写字母

lower case：定义无大写字母，仅有小写字母

第一个 实例

代码

&lt;!DOCTYPE html&gt;
<html&gt;
	<head&gt;
		<meta charset="utf-8"&gt;
		<title&gt;</title&gt;
		<style&gt;
			* {
			    margin: 0;
			    padding: 0;
			}
			html {
			    height: 100%;
			}
			body {
			    height: 100%;
			}
			.container {
			    height: 100%;
			    background-image: linear-gradient(to right, #fbc2e1, #a6c1e1);
			}
			.login-wrapper{
				background-color: #fff;
				width:358px;
				height:588px;
				border-radius: 15px;
				padding:0 50px;
				position:relative;
				left:50%;
				top:50%;
				transform:translate(-50%,-50%);
			}
			.header{
				font-size:38px;
				font-weight:bold;
				text-align:center;
				line-height:200px;
			}
			.input-item{
				display:block;
				width:100%;
				margin-bottom:20px;
				border:0;
				padding:10px;
				border-bottom:1px solid rgb(128,125,125);
				font-size:15px;
				outline:none;
			}
	
			.btn{
				padding:10px;
				text-align:center;
				margin-top:40px;
				background-image:linear-gradient(to right, #fbc2e1, #a6c1e1);
				color:#fff;
			}   
			.msg{
				text-align:center;
				line-align:88px;
			}
			a{
				text-decoration-line:none;
				color:#abc1ee;
			}
		</style>
	</head>
	<body>	
		<div class="container">
			<div class="login-wrapper">
				<div class="header">登录</div>
				<div class="form-wrapper">
					<input type="text" name="username" placeholder="用户名" class="input-item">
					<input type="password" name="password" placeholder="密码" class="input-item">
					<div class="btn">登录</div>
				</div>
				<div class="msg">
					无账号？
					<a href="#">注册</a>
			</div>
		</div>
	</body>
</html>

实现 结果

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

css html 网页

相关文章

【CSS422】Programming Language Design

【CSS422】Programming Language Design

css 1 年前 10

html,css,js速成

html 1 年前 4

蓝桥杯Web应用开发-CSS3 新特性【练习二：获得焦点验证】

蓝桥杯Web应用开发-CSS3 新特性【练习二：获得焦点验证】

css 1 年前 2

蓝桥杯Web应用开发-CSS3 新特性【练习一：属性有效性验证】

蓝桥杯Web应用开发-CSS3 新特性【练习一：属性有效性验证】

css 1 年前 5

HTML元素的操作

html 1 年前 4

Web课程学习笔记–CSS盒模型

Web课程学习笔记–CSS盒模型

css 1 年前 3

HTML+CSS：全景轮播

html 1 年前 5

HTML — 常用标签

html 1 年前 5

发表回复取消回复