一款css3很美的iphone登錄檔單樣式
1 <!DOCTYPE html> 2 <html lang=""> 3 <head> 4 <title>Animated Checkboxes using CSS3</title> 5 <meta charset="utf-8"> 6 <meta name="description" content="UI checkboxes using CSS3" /> 7 <meta name="keywords" content="CSS3, checkboxes" />8 <meta name="robots" content="" /> 9 10 <style type="text/css"> 11 12 html, body, h1, form, fieldset, legend, ol, li { 13 margin: 0; 14 padding: 0; 15 } 16 body { 17 background: #ffffff; 18 color: #111111; 19 font-family: Helvetica; 20 padding: 20px; 21 font-size: 12px 22 } 23 24 input:not([type=checkbox]), textarea { 25 width: 250px; 26 padding: 5px; 27 border: 1px solid #ccc; 28 -moz-border-radius: 5px; 29 -webkit-border-radius: 5px; 30 } 31 32 33 form { 34 width: 500px; 35 margin: 0 auto 0 auto; 36 37 38 } 39 40 form fieldset { 41 padding: 26px; 42 border: 1px solid #b4b4b4; 43 -moz-border-radius: 10px; 44 -webkit-border-radius: 10px; 45 } 46 47 form legend { 48 padding: 5px 20px 5px 20px; 49 color: #030303; 50 -moz-border-radius: 6px; 51 -webkit-border-radius: 6px; 52 border: 1px solid #b4b4b4; 53 } 54 55 form ol { 56 list-style: none; 57 margin-bottom: 20px; 58 border: 1px solid #b4b4b4; 59 -moz-border-radius: 10px; 60 -webkit-border-radius: 10px; 61 padding: 10px; 62 } 63 64 form ol, form legend, form fieldset { 65 background-image: -moz-linear-gradient(top, #f7f7f7, #e5e5e5); /* FF3.6 */ 66 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #f7f7f7)); /* Saf4+, Chrome */ 67 } 68 69 form ol.buttons { 70 overflow: auto; 71 } 72 73 form ol li label { 74 float: left; 75 width: 160px; 76 font-weight: bold; 77 78 } 79 80 /* 81 form ol.radio-buttons li { 82 float:left; 83 margin-bottom:0; 84 width:8px; 85 } 86 87 form ol.radio-buttons li label { 88 line-height:20px; 89 padding-right:20px; 90 width:80px; 91 } 92 93 form ol.radio-buttons li input { 94 padding:0; 95 width:20px; 96 } 97 http://www.cnblogs.com/roucheng/ 98 */ 99 100 .settings { 101 /* width: 400px; */ 102 list-style: none; 103 position: relative; 104 } 105 106 .settings p { 107 display: block; 108 margin-bottom: 20px; 109 background: -moz-linear-gradient(50% 50% 180deg,#C91A1A, #DB2E2E, #0C990C 0%); 110 background: -webkit-gradient(linear, 50% 50%, 0% 50%, from(#C90202), to(#009C05), color-stop(0,#00AB00)); 111 border-radius: 8px; 112 -moz-border-radius: 6px; 113 border: 1px solid #555555; 114 width: 36px; 115 position: relative; 116 height: 15px; 117 } 118 119 /* 120 .settings p:before { 121 content: "ON"; 122 padding-left: 9px; 123 line-height: 15px; 124 color: #fff; 125 font-size: 14px; 126 text-shadow: #093B5C 0px -1px 1px; 127 128 } 129 130 .settings p:after { 131 content: "OFF"; 132 padding-left: 12px; 133 line-height: 15px; 134 color: #fff; 135 font-size: 14px; 136 text-shadow: #093B5C 0px -1px 1px; 137 } 138 */ 139 140 .check { 141 display: block; 142 width: 20px; 143 height: 13px; 144 border-radius: 8px; 145 -moz-border-radius: 6px; 146 background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1); 147 background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF)); 148 border: 1px solid #e5e5e5; 149 position: absolute; 150 top: 0px; 151 left: 0px; 152 } 153 154 155 156 input[type=checkbox] { 157 display: none; 158 } 159 160 @-webkit-keyframes labelON { 161 0% { 162 top: 0px; 163 left: 0px; 164 } 165 166 100% { 167 top: 0px; 168 left: 14px; 169 } 170 } 171 172 input[type=checkbox]:checked + label.check { 173 top: 0px; 174 left: 14px; 175 -webkit-animation-name: labelON; 176 -webkit-animation-duration: .2s; 177 -webkit-animation-iteration-count: 1; 178 -webkit-animation-timing-function: ease-in; 179 -webkit-box-shadow: #244766 -1px 0px 3px; 180 -moz-box-shadow: #244766 -1px 0px 3px; 181 } 182 183 @-webkit-keyframes labelOFF { 184 0% { 185 top: 0px; 186 left: 16px; 187 } 188 189 100% { 190 top: 0px; 191 left: 0px; 192 } 193 } 194 195 input[type=checkbox] + label.check { 196 top: 0px; 197 left: 0px; 198 -webkit-animation-name: labelOFF; 199 -webkit-animation-duration: .2s; 200 -webkit-animation-iteration-count: 1; 201 -webkit-animation-timing-function: ease-in; 202 -webkit-box-shadow: #244766 1px 0px 3px; 203 -moz-box-shadow: #244766 1px 0px 3px; 204 } 205 206 label.info { 207 position: absolute; 208 color: #000; 209 top:0px; 210 left: 50px; 211 line-height: 15px; 212 width: 200px; 213 } 214 215 216 form ol.buttons li { 217 float: left; 218 width: 100px; 219 } 220 221 input[type=submit] { 222 width: 80px; 223 color: #f3f3f3; 224 -moz-border-radius: 6px; 225 -webkit-border-radius: 6px; 226 background-image: -moz-linear-gradient(top, #0cb114, #07580b); /* FF3.6 */ 227 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #07580b),color-stop(1, #0cb114)); /* Saf4+, Chrome */ 228 -webkit-box-shadow: #4b4b4b 0px 2px 5px; 229 -moz-box-shadow: #4e4e4e 0px 2px 5px; 230 box-shadow: #e3e3e3 0px 2px 5px; 231 border: none; 232 } 233 input[type=reset] { 234 width: 80px; 235 color: #f3f3f3; 236 -moz-border-radius: 6px; 237 -webkit-border-radius: 6px; 238 background-image: -moz-linear-gradient(top, #d01111, #7e0c0c); /* FF3.6 */ 239 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7e0c0c),color-stop(1, #d01111)); /* Saf4+, Chrome */ 240 -webkit-box-shadow: #4b4b4b 0px 2px 5px; 241 -moz-box-shadow: #4e4e4e 0px 2px 5px; 242 box-shadow: #e3e3e3 0px 2px 5px; 243 border: none; 244 245 } 246 247 input[type=file] { 248 width: 80px; 249 } 250 251 252 </style> 253 254 255 </head> 256 257 <body> 258 259 <form id="form-1" action="" method="post"> 260 <fieldset> 261 <legend><b>請填寫您的資訊</b></legend> 262 <ol> 263 <li><label for="field1">個人賬號：</label></li> 264 <li><input type="text" id="field1" name="field1" required/></li> 265 </ol> 266 <ol> 267 268 <li><label for="field2">個人密碼：</label></li> 269 <li><input type="password" id="field2" name="field2" /></li> 270 </ol> 271 <div class="settings"> 272 <p> 273 <input type="checkbox" value="1" id="1" name="1" checked="checked"/> 274 <label class="check" for="1"></label> 275 <label class="info">允許被轉載</label> 276 277 </p> 278 <p> 279 <input type="checkbox" value="2" id="2" name="2" /> 280 <label class="check" for="2"></label> 281 <label class="info">允許被評論</label> 282 </p> 283 284 </div> 285 <ol class="buttons"> 286 <li><input type="submit" class="button" value="提交" /></li> 287 <li><input type="reset" class="button" value="重置" /></li> 288 </ol> 289 </相關推薦
一款css3很美的iphone登錄檔單樣式
1 <!DOCTYPE html> 2 <html lang=""> 3 <head> 4 <title>Animated Checkboxes using CSS3</title> 5 <meta char
問題：必須使用記錄或另一備份以恢復包含系統登錄檔
這是因你安裝的第三方軟體導致系統註冊出現錯亂有幾個解決方法:1,在命令列下輸入：secedit /configure /cfg %windir%\repair\secsetup.inf /db secsetup.sdb /areas REGKEYS 然後回車2,在Windo
HTML+CSS第四課：表單標籤的使用-製作登錄檔單
知識點：表單標籤、表單元素 表單在網頁中應用比較廣泛，如申請qq賬號、電子郵箱等，使用者需要首先填寫註冊資訊，然後才能提交；通俗講，表單就是一個將使用者資訊組織起來的容器，將使用者填寫的內容放置在表單容器中，當用戶單擊提交按鈕的時候，表單會將資料統一發送給伺服器！ 表單的作用
編寫一個僱員登錄檔單並進行驗證
Javaweb第二章課後習題 編寫一個僱員註冊的表單，要求輸入以下內容：僱員編號、僱員姓名、僱員工作、僱傭日期、基本工資和獎金。並對錶單進行JavaScript驗證，驗證要求如下： 1. 僱員編號：只能是數字； 2. 僱員姓名：不能為空； 3. 僱員工作：不能為空；
登錄檔單驗證 json格式傳參
1.加入json相關架包 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp
HTML+CSS實現的簡單登錄檔單
效果總覽： 具體程式碼實現 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>提交使用者資訊</t
jsp 製作一個登入登錄檔單
"><html> <head> <title>My JSP 'signin.jsp' starting page</title> </head> <body>
php使用者登錄檔單驗證
註冊介面 register.html <h1>使用者註冊</h1> <form method="post" action="register_verify.php"> <input type="te
登錄檔單是要左對齊還是右對齊
上一篇圍繞對齊和連續流這兩個設計原則，談了資訊設計中用到的幾種對齊方法以及和連續流的關聯，這一篇嘗試用這些原則分析登錄檔單選項該怎麼設計。 登錄檔單，也就是我們在註冊網路產品或者填寫信用卡申請表時的東西，目前主流的表單有兩種，一種是專案左對齊，另一種是專案靠著輸入框作右
JQuery 實現登錄檔單校驗
進行表單資料的驗證可謂是很有必要的，我們都會在網頁上先進行一下表單驗證，然後伺服器端再次進行驗證，來確保使用者提交資料的準確性,與減輕伺服器的壓力. 表單頁面： <body> <form action="index.h
css登錄檔單案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
Web前端 | 登錄檔單驗證
註冊格式要求：頁面中所有項均為必填項登入賬號：只能是數字或字母且以字母開頭密碼：大於8位且需要有字母和數字之外的字元姓名：格式為2-4個漢字出生年月日：格式為yyyy-mm-dd 【eg：1998-02-17】郵編：正確的6位數字郵編E-mail：基本格式Html程式程式碼如
手機wap端使用者登錄檔單（html+css）
實現效果： html程式碼： <div class="login"> <form action="*跳轉介面*" method="post" onsubmit="return checkForm()"> <
AngularJS 登錄檔單驗證
//email驗證 $(function(){ //input標籤獲取焦點/失去焦點時呼叫方法 $(":input[name='email']").blur(function(){ //獲取inp
javascript登錄檔單
html部分：<html> <head> <title>登錄檔單</title> <script language="JavaScript" src="check.js"></script> </
ASP簡單使用者登錄檔單
#index.aspx檔案內容 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits
捋一捋PHP第三方微信登錄
微信登錄 wechat login PC端掃二維碼登錄先說步驟吧： 微信網站登錄的文檔在https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&a
一個很low的登錄界面
.so 服務 .com eat soc mman 變量賦值 lag 類型 import tkinter as tk from tkinter import messagebox import socket def receive(name=None,passwor
一次gitlab無法使用ssh登錄的問題解決
auth epo disabled author location sta x11 api g模式 故障現象： [root@web-m data]# git clone ssh://[email protected]:22022/lxk/core.git Cl
COM在登錄檔中的相關鍵值及其意義(這個很詳細，必須轉)
轉自 http://www.cnblogs.com/developersupport/archive/2013/06/02/COM-registry.html COM在登錄檔中的相關鍵值及其意義 概要 當編寫好一個COM並將其在系統中註冊之後，這些登錄檔項到底位於Registe