使用HTML5搭建京東登入介面（二）
在我們html檔案中，引入了2個css檔案，分別為reset.css和login.css。下面我們就來看一下這2個css檔案是如何實現佈局的。
先來看一下reset.css，這裡是對於整個html檔案共同的元素需要統一設定的樣式，
程式碼如下：
login.css是針對性的設定各個佈局的樣式
程式碼如下：
/*header*/
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
header{
width:100%;
height: 80px;
}
header .header-content{
box-sizing: border-box;
width: 990px;
height: 80px;
margin: 0 auto;
/*background-color: red;*/
}
header .header-content .logo{
float: left;
width: 160px;
height: 60px;
background: url("../image/icon.png") no-repeat 0 15px;
}
header .header-content span{
float: left;
font-size: 24px;
padding-left: 30px;
margin-top: 20px;
}
header .header-content .login{
float: right;
font-size: 12px;
margin-top: 55px;
padding-bottom: 5px;
font-family: Arial,Verdana,"\5b8b\4f53";
}
header .header-content .login i{
display: inline-block;
width: 18px;
height: 16px;
margin: 0 5px;
background: url("../image/msg-icon.png") no-repeat ;
}
header .header-content .login a{
color: #999;
position: relative;
top: -5px;
}
header .header-content .login a:hover {
color: #E4393C;
text-decoration: underline;
}
main{
width:100%;
height: 475px;
background-color: #E8C99A;
position: relative;
}
main section{
width: 990px;
height:100%;
margin: 0 auto;
background: url("../image/loginBg.jpg")no-repeat 0 0 ;
}
main section .login-content{
width: 346px;
height: 346px;
padding: 20px;
float: right;
top: 40px; ;
background: #fff;
position: relative;
color: #666;
}
main section .login-content-top{
width:100%;
height: 55px;
border-bottom: 1px solid #f4f4f4;
position: absolute;
top: 0;
left:0;
}
main section .login-content-top a:hover,main section .login-content-top a:nth-child(2) {
font-weight: bold;
color: #e4393c;
}
main section .login-content-top a{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 50%;
height: 100%;
padding: 0 20px;
text-align: center;
line-height: 55px;
color: #666;
font-size: 18px;
}
main section .login-content-notice{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 23px;
position: relative;
background: #fef4e5;
color: #666;
margin: 40px auto 5px;
padding-left: 40px;
border: 1px solid #f6c090;
font-size: 12px;
line-height: 23px;
}
main section .login-content-notice i{
display: inline-block;
width: 16px;
height: 17px;
position: absolute;
left: 10px;
top: 3px;
background: url("../image/pwd-icons.png")no-repeat -104px -24px;
}
main section form{
width: 100%;
}
main section form .form-item{
border: 1px solid #bdbdbd;
height: 38px;
width: 100%;
margin-bottom: 20px;
position: relative;
}
main section form .form-item label{
position: absolute;
top: 0;
left: 0px;
width: 38px;
height: 36px;
border-right: 1px solid #bdbdbd;
}
main section form .form-item input{
height: 100%;
width:100%;
padding-left: 45px;
color: #666;
border: none;
}
main section form .form-item:nth-child(1) label{
background: url("../image/pwd-icons.png") no-repeat ;
}
main section form .form-item:nth-child(2) label{
background: url("../image/pwd-icons.png") no-repeat -48px 0;
}
main section form .form-check{
font-size: 12px;
}
main section form .form-check label{
margin-left: 5px;
vertical-align: top;
}
main section form .form-check a{
float: right;
color: #666;
}
main section form .form-check a:hover{
color: #E4393C;
text-decoration: underline;
}
main section form input[type = submit]{
width:100%;
height: 31px;
background: #e4393c;
color: #ffffff;
font-size: 18px;
word-spacing: 1em;
border: 1px solid #e85356;
margin-top: 15px;
}
main section .login-content-bottom{
width:100%;
position: absolute;
bottom:0;
left: 0;
padding: 0 18px;
line-height: 50px;
border-top: 1px solid #f4f4f4;
background-color: #fcfcfc;
}
main section .login-content-bottom a{
font-size: 12px;
}
main section .login-content-bottom span{
padding-left: 1px;
margin: 0 5px;
font-size: 10px;
background-color: #999;
}
main section .login-content-bottom a i{
width: 19px;
height: 18px;
display: inline-block;
position: relative;
top: 5px;
}
main section .login-content-bottom a:nth-child(1) i{
margin-right: 5px;
background: url("../image/QQ-weixin.png") no-repeat;
}
main section .login-content-bottom a:nth-child(3) i{
margin-right: 5px;
background: url("../image/QQ-weixin.png") no-repeat -20px 0;
}
main section .login-content-bottom a:nth-child(6){
float: right;
}
main section .login-content-bottom a:nth-child(6) i{
margin-right: 5px;
background: url("../image/pwd-icons.png")-104px -75px no-repeat;;
}
main section .login-content-bottom a:hover {
color: #e4393c;
text-decoration: underline;
}
/*footer*/
footer{
font-size: 12px;
text-align: center;
border-top: solid 1px #e6e6e6;
color: #999;
padding-bottom: 30px;
}
footer p a{
font-size: 12px;
text-align: center;
color: #999;
}
footer p:nth-child(1){
padding-top: 30px;
padding-bottom: 15px;
}
footer p span{
padding-left: 1px;
margin: 0 10px;
font-size: 10px;
background-color: #999;
}
相關推薦
使用HTML5搭建京東登入介面（二）
在我們html檔案中，引入了2個css檔案，分別為reset.css和login.css。下面我們就來看一下這2個css檔案是如何實現佈局的。 先來看一下reset.css，這裡是對於整個html檔案共同的元素需要統一設定的樣式， 程式碼如下： login.css是針對性
使用HTML5搭建京東登入介面（一）
先來看一下最終的效果： HTML部分的程式碼如下： <body> <header> <div class="header-content"> <a href="index.html"
node.js搭建介面（二）：Node-連線MongoDB資料庫
首先，在伺服器資料夾目錄下安裝mongoose npm install mongoose 然後在入口檔案中引入mongoose。 const mongoose = require("mongoose"); 接下來直接 使用mongoose物件來連結mong
搭建LNMP架構論壇（二）
ges images conf all file blog 組件 規則 tex 配置nginx（1）關閉防火墻，並保存規則（2）cd到/usr/local/src目錄下（3）解壓xzvf pcre-8.35.tar.gz文件（4）cd到pcre-8.35編譯生成安裝組件.
Java抽象類和介面（二）
***************************介面********************************* 一.why 需求一直不變的時候可以不使用介面, 需求經常發生改變推薦使用介面... 軟體產品中需求會經常改變,所以一般都要使用介面... 體現了可維護、可擴充套件的優點 二.
網頁註冊登入資料庫（二）
註冊頁面 <%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%> <html> <head>
spring+springmvc+mybatis環境搭建報錯問題（二）
1.啟動程式報錯： org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()Ljava/lang/Integer;
函式計算搭建 Serverless Web 應用（二）- 自定義域名
摘要： 繫結自定義域名可以允許使用者通過自定義域名訪問 FC 的函式，配合 HTTP 觸發器使用，為使用函式計算搭建 Web 應用提供便利。 簡介阿里雲 函式計算(Function Compute) 是事件驅動的全託管計算服務，是阿里雲的 Serverless 計算平臺。基於函式計算構建應用，您無需管理伺服
ServletConfig介面（二）
研究javax.servlet.ServletConfig介面: 1、javax.servlet.ServletConfig是介面 2、Apache Tomcat伺服器實現了Servlet規範，Tomcat伺服器專門寫了一個ServletCon
gitlab 服務器的搭建與使用全過程（二）
緩存 back mac tro 改密 nbsp 創建 網上 代碼 《gitlab操作手冊 1.0 》 此手冊適用於 Mac 計算機 第一步：根據從管理員得到的用戶名和初始密碼登陸並修改密碼。新密碼不得少於8個字符 第二步：在自己的電腦上創
Java——Set集合(介面)（二）___TreeSet用法
Set(介面)集合: TreeSet類(底層是二叉樹)，能保證有序,用來對元素進行排序，能保證元素的唯一 使用方式： 1.自然順序：TreeSet類的add()方法中會把存入的物件提升為Comparable型別
HTML5 簡單歸納 -- 前端知識 （二）
HTML5 全屏事件 全屏事件：requestFullScreen 關閉全屏：cancelFullScreen 判斷是否全屏：fullScreenElement 注意：現各大主流瀏覽器中由於核心不同的原因，會出現不相容的問題，為了讓自己的程式碼能在各大主流瀏覽器中都能正常執行，所以我們在
umi搭建react+antd專案（二）路由
1.我們在src下新增index2.js： export default function () { return ( <div>index2</div> );
京東技術架構（二）構建需求響應式億級商品詳情頁
該文章是根據velocity 2015技術大會的演講《京東網站單品頁618實戰》細化而來，希望對大家有用。 商品詳情頁是什麼 商品詳情頁是展示商品詳細資訊的一個頁面，承載在網站的大部分流量和訂單的入口。京東商城目前有通用版、全球購、閃購、易車、惠買車、服裝、拼購、今日抄底等許多套模板。各套模板的元資料是一樣
Tensorflow object detection API 搭建物體識別模型（二）
二、資料準備 1）下載圖片 圖片來源於ImageNet中的鯉魚分類，下載地址：https://pan.baidu.com/s/1Ry0ywIXVInGxeHi3uu608g 提取碼: wib3 在桌面新建資料夾目標檢測，把下載好的壓縮檔案n01440764.tar放到其中，
基於WinForms（C#）的使用者登入介面（VisualStudio2013）
1.介面設計 其中包含驗證碼、找回密碼、註冊賬號、登陸系統等基本功能 使用者登陸介面程式碼如下： using System; using System.Collections.Generic; using System.ComponentModel; using Syst
python 使用tornadio書寫介面（二）-非同步呼叫介面
最近看了一下tornadio非同步呼叫的功能，做一個小總結，ps：有一些很好的文章我會把連結放到最後，供大家參考。 簡單說一下我理解的同步和非同步的概念，同步和非同步指的呼叫方而言就是http請求中對應request。 同步：是我呼叫一個介面，服務端要做處理，處理完成後給
Hive使用者介面（二）—使用Hive JDBC驅動連線Hive操作例項
問題導讀： 1、Hive提供了哪三種使用者訪問方式？ 2、使用HiveServer時候，需要首先啟動哪個服務？ 3、HiveServer的啟動命令是？ 4、HiveServer是通過哪個服務來提供遠端JDBC訪
flask搭建個人部落格（二）——骨架、資料庫
編寫骨架程式： manage.py config.py app/main/__init__.py app/auth/__init__.py app/email.py app/models.py 設計資料庫models： 簡單的建立四個table：roles，users，c
Python selenium自動化識別驗證碼模擬登入操作（二）
首先故意輸入錯誤的賬號登陸，很快就會出現需要驗證碼了。 這裡可以看到圖片所在的標籤 和id，同時還有一個驗證碼地址，如下。該地址每次隨機生成一張圖片。 https://passport.baidu.com/cgi-bin/genimage?njGcb06e212fe