摘要：恢复内容开始一效果图二知识点头部颜色变换样式，只是显示样式，不是实际内容，使用伪类使用谷歌内核颜色渐变属性，新属性只适用于谷歌内核缩进文本提示请输入用户名文本提示密码框提交框三源码关键词描述登陆框
---恢复内容开始---
一.效果图
二、知识点.
1、 /*头部颜色变换样式，只是显示样式，不是实际内容，使用伪类*/
2、background-image: -webkit-linear-gradient(left,#390 0%,#390 20%,#60f 20%,#60f 40%,#3cf 40%,#3cf 60%,#f30 60%,#f30 80%,#fc3 80%,#fc3 100%);
/*-webkit: 使用谷歌内核 -linear-gradient：颜色渐变属性，css3新属性只适用于谷歌内核 */
3、text-indent: 20px;/* 缩进 */
4、placeholder 文本提示
5、
type=password 密码框 type=submit 提交框
三、源码
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<title>登陆框title>
<title>Documenttitle>
<style>
body{
margin: 0;
padding: 0;
}
#login{
margin: 100px auto;
width: 300px;
height: 300px;
background-color: #66ffff;
border-radius: 10px;
text-align: center;
}
#login:before{/*头部颜色变换样式，只是显示样式，不是实际内容，使用伪类*/
content: ;/*激活伪类*/
display: block;/*变为块级元素，才能显示出来*/
width: 100%;
height: 10px;
background-image: -webkit-linear-gradient(left,#390 0%,#390 20%,#60f 20%,#60f 40%,#3cf 40%,#3cf 60%,#f30 60%,#f30 80%,#fc3 80%,#fc3 100%);/* -webkit: 使用谷歌内核 -linear-gradient：颜色渐变属性，css3新属性只适用于谷歌内核 */
border-radius: 10px 10px 0 0;
}
#login h1{
color: #096;
}
#login input{
width: 240px;
height: 40px;
margin-bottom: 30px;
border-radius: 5px;
}
.text{
border: 1px solid #333;
text-indent: 20px;/* 缩进 */
}
.submit{
border: none;/*清除边框样式*/
background-color: #2290de;
}
style>
head>
<body>
<div id="login">
<h1>Loginh1>
<input type="text" class="text" placeholder="请输入用户名">
<input type="password" class="text" placeholder="请输入密码">
<input type="submit" class="submit">
div>
body>
html>
View Code
---恢复内容结束---
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1273.html
摘要：模板语法使用了基于的模版语法，允许开发者声明式地将绑定至底层实例的数据。的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进的系统。指令用于在表达式的值改变时，将某些行为应用到上。 Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数...
摘要：登录视图登陆失败用户名或密码不能为空弹出提示框成功是点击登录按钮后调用的函数，这里的功能比较简单。通过把发出去密码登录声明组件需要整个中的哪一部分数据作为自己的将和组件联系在一起编写是负责生成的，所以在大项目中还会用到合并。 本猪说 本猪猪刚学react,也刚看RN,就叫写这个，苦不堪言，搭环境就搭了好久。看网上教程也是改了好多小地方才写完了。本着雷锋精神手把手教你写（假的）。 sho...
摘要：所做的最重要的事情，就是对成千上万的网页进行排序，所以它存在的意义是基于网页的。确实有很多非常成功的产品，比如，，，但是它们其实都是收购来的。为什么呢因为要做到极简主义，需要深刻思考用户需求以及产品价值。 摘要： Chrome改变世界。 《JavaScript深入浅出》系列： JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼？ JavaScript深入浅出第2课：...
摘要：图标解决了，程序代码编写好了，接下来就是最最重要的软件打包环节了。在此，我们用打包，这是一个用于打包软件的第三方库。 新建一个data.txt文件。存用户名和密码 #!/usr/bin/env python# -*- coding: utf-8 -*-# @Author : Benjam...
阅读 446·2023-04-25 19:43
阅读 3644·2021-11-30 14:52
阅读 3432·2021-11-30 14:52
阅读 3537·2021-11-29 11:00
阅读 3502·2021-11-29 11:00
阅读 3534·2021-11-29 11:00
阅读 3271·2021-11-29 11:00
阅读 5467·2021-11-29 11:00
