資訊專欄INFORMATION COLUMN
摘要：恢復內容開始一效果圖二知識點頭部顏色變換樣式，只是顯示樣式，不是實際內容，使用偽類使用谷歌內核顏色漸變屬性，新屬性只適用于谷歌內核縮進文本提示請輸入用戶名文本提示密碼框提交框三源碼關鍵詞描述登陸框
---恢復內容開始---
一.效果圖
二、知識點.
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
---恢復內容結束---
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3785·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
