資訊專欄INFORMATION COLUMN
摘要：恢復(fù)內(nèi)容開始一效果圖二知識(shí)點(diǎn)頭部顏色變換樣式，只是顯示樣式，不是實(shí)際內(nèi)容，使用偽類使用谷歌內(nèi)核顏色漸變屬性，新屬性只適用于谷歌內(nèi)核縮進(jìn)文本提示請(qǐng)輸入用戶名文本提示密碼框提交框三源碼關(guān)鍵詞描述登陸框
---恢復(fù)內(nèi)容開始---
一.效果圖
二、知識(shí)點(diǎn).
1、 /*頭部顏色變換樣式，只是顯示樣式，不是實(shí)際內(nèi)容，使用偽類*/
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: 使用谷歌內(nèi)核 -linear-gradient：顏色漸變屬性，css3新屬性只適用于谷歌內(nèi)核 */
3、text-indent: 20px;/* 縮進(jìn) */
4、placeholder 文本提示
5、
type=password 密碼框 type=submit 提交框
三、源碼
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="關(guān)鍵詞">
<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{/*頭部顏色變換樣式，只是顯示樣式，不是實(shí)際內(nèi)容，使用偽類*/
content: ;/*激活偽類*/
display: block;/*變?yōu)閴K級(jí)元素，才能顯示出來*/
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: 使用谷歌內(nèi)核 -linear-gradient：顏色漸變屬性，css3新屬性只適用于谷歌內(nèi)核 */
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;/* 縮進(jìn) */
}
.submit{
border: none;/*清除邊框樣式*/
background-color: #2290de;
}
style>
head>
<body>
<div id="login">
<h1>Loginh1>
<input type="text" class="text" placeholder="請(qǐng)輸入用戶名">
<input type="password" class="text" placeholder="請(qǐng)輸入密碼">
<input type="submit" class="submit">
div>
body>
html>
View Code
---恢復(fù)內(nèi)容結(jié)束---
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1273.html
摘要：模板語法使用了基于的模版語法，允許開發(fā)者聲明式地將綁定至底層實(shí)例的數(shù)據(jù)。的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn)的系統(tǒng)。指令用于在表達(dá)式的值改變時(shí)，將某些行為應(yīng)用到上。 Vue.js 模板語法 Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。 Vue.js 的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)...
摘要：登錄視圖登陸失敗用戶名或密碼不能為空彈出提示框成功是點(diǎn)擊登錄按鈕后調(diào)用的函數(shù)，這里的功能比較簡單。通過把發(fā)出去密碼登錄聲明組件需要整個(gè)中的哪一部分?jǐn)?shù)據(jù)作為自己的將和組件聯(lián)系在一起編寫是負(fù)責(zé)生成的，所以在大項(xiàng)目中還會(huì)用到合并。 本豬說 本豬豬剛學(xué)react,也剛看RN,就叫寫這個(gè)，苦不堪言，搭環(huán)境就搭了好久?？淳W(wǎng)上教程也是改了好多小地方才寫完了。本著雷鋒精神手把手教你寫（假的）。 sho...
摘要：所做的最重要的事情，就是對(duì)成千上萬的網(wǎng)頁進(jìn)行排序，所以它存在的意義是基于網(wǎng)頁的。確實(shí)有很多非常成功的產(chǎn)品，比如，，，但是它們其實(shí)都是收購來的。為什么呢因?yàn)橐龅綐O簡主義，需要深刻思考用戶需求以及產(chǎn)品價(jià)值。 摘要： Chrome改變世界。 《JavaScript深入淺出》系列： JavaScript深入淺出第1課：箭頭函數(shù)中的this究竟是什么鬼？ JavaScript深入淺出第2課：...
摘要：圖標(biāo)解決了，程序代碼編寫好了，接下來就是最最重要的軟件打包環(huán)節(jié)了。在此，我們用打包，這是一個(gè)用于打包軟件的第三方庫。 新建一個(gè)data.txt文件。存用戶名和密碼 #!/usr/bin/env python# -*- coding: utf-8 -*-# @Author : Benjam...
閱讀 847·2023-04-25 19:43
閱讀 4118·2021-11-30 14:52
閱讀 3930·2021-11-30 14:52
閱讀 4027·2021-11-29 11:00
閱讀 3922·2021-11-29 11:00
閱讀 4039·2021-11-29 11:00
閱讀 3770·2021-11-29 11:00
閱讀 6608·2021-11-29 11:00
