利用css實(shí)現(xiàn)qq郵箱登錄案例

CSS（層疊樣式表）

創(chuàng)新互聯(lián)是專業(yè)的通遼網(wǎng)站建設(shè)公司，通遼接單;提供成都網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行通遼網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。

CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫法，針對(duì)各類人群，有較強(qiáng)的易讀性。

注：?jiǎn)为?dú)使用CSS是無法實(shí)現(xiàn)QQ郵箱登錄實(shí)例（CSS為樣式代碼）。

實(shí)例

可以使用iframe代碼實(shí)現(xiàn)QQ郵箱登錄實(shí)例。

代碼如下：

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""

html?xmlns=""

head

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/

titleqq郵箱登錄實(shí)例/title

/head

body

p?align="center"?style="margin-top:0px;margin-left:0"

iframe?width="1000"?height="500"?src=""?class="t-iframe"?scrolling="no"?frameborder="no"?border="0"?marginwidth="0"?marginheight="0"?scrolling="no"/iframe?

/p

/body

/html

代碼解釋：

url是你要調(diào)用的網(wǎng)址，p?align="center"?style="margin-top:?-109;margin-left:?-109"是網(wǎng)頁布局、其中margin-top:?0表示頂部縮進(jìn)，margin-left:?0表示左邊縮進(jìn)。至于右邊和底部縮進(jìn)，很簡(jiǎn)單，修改iframe的寬度和高度就可以了。

網(wǎng)站用戶注冊(cè)登錄模板css樣式上傳到那個(gè)文件夾？

這個(gè)要看引用文件的路徑了。

比如在用戶登錄html中，引用的reg.css和login.css標(biāo)簽如下：

?。?）link?href='reg.css'?type='text/css'?rel='stylesheet'?/

（2）link?href='css/login.css'?type='text/css'?rel='stylesheet'?/

reg.css的路徑前沒有什么文件夾，說明reg.css的路徑是與html文件存放在同一個(gè)文件夾下的，而login.css?前面多了'css/'，這說明，login.css是存放在與html同一文件夾中的一個(gè)css文件夾中,舉例說明如下：

　A文件夾中有：（1）html登錄注冊(cè).html?（2）reg.css（3）css文件夾【即是B文件夾】

而B文件夾中：（1）login.css

而UserAjax.rar是一個(gè)壓縮文件吧？解壓后，看你把文件放哪了，就在script標(biāo)簽中的src中設(shè)置好路徑就行了，跟上面link標(biāo)簽中的href屬性一樣。

求大神寫一個(gè)HTML的登錄界面,連帶css樣式

這個(gè)可以參考一下：

!doctype html

html

head

meta charset="utf-8"

link href="main.css" type="text/css" rel="stylesheet"

title登陸界面/title

/head

body

div class="login_ico"

img src="images/login_ico.png"

/div

div class="login_putin"

ul

liinput type="text" /li

liinput type="password" /li

/ul

/div

div class="login_btn"

input type="submit" value="登陸"

/div

/body

/html

樣式 ：

*{

margin:0;

padding:0;}

li{

list-style-type:none;

margin:0;

padding:0;}

a{

text-decoration:none;

color:#000;}

/*---------------------按鈕-----------------------------*/

.login_putin ul li input{

margin: 0;

width:70%;

padding: 1em 2em 1em 5.4em;

-webkit-border-radius:.3em;

-moz-border-radius: .3em;

border: 1px solid #999;

}

.login_btn{

width:300px;

margin:40px auto 0 auto;

}

.login_btn input{

width:100%;

margin:0;

padding:.5em 0;

-webkit-border-radius:.3em;

-moz-border-radius: .3em;

border:#1263be solid 1px;

background:#1b85fd;

color:#FFF;

font-size:17px;

font-weight:bolder;

letter-spacing:1em;

}

.login_btn input:hover{

background:#1263be;

}

求一個(gè)JSP界面的CSS登陸樣式

style type="text/css"

body{ background:#fff;padding:0; margin:0;font-size:12px;}

img{ border:0; padding:0; margin:0;}

ul{list-style:none;}

.login_bg{ background:url(%=path%financemanage/images/login_new/login_bg.gif) repeat-x; height:591px;}

.dl_bg{ background:url(%=path%financemanage/images/login_new/dlbg.jpg) no-repeat center top;}

.diwen{ background:url(%=path%financemanage/images/login_new/diwen.gif) repeat-x;}

.usename{ font-size:14px; color:#0e3c00;}

.dl_text{ width:145px; height:17px; background:url(%=path%financemanage/images/login_new/text.gif) repeat-x center; border:1px solid #1c5302;}

.dl_but{ width:75px; height:50px; background:url(%=path%financemanage/images/login_new/dlbut.gif) no-repeat; border:0 none; cursor:pointer;}

/style

script language="javascript" type="text/javascript"

var count = 0;

function submit_onclick(obj){

if (count == 0) {

//alert("MAC:" + document.forms[0].MACAddr.value);

obj.submit();

count ++;

}

}

function submit2() {

if (count != 0) {

return false;

}

if (event.keyCode==13) {

document.forms[0].submit();

}

}

/script

!-- script FOR="foo" EVENT="OnObjectReady(objObject,objAsyncContext)" LANGUAGE="JScript"

if(objObject.IPEnabled != null objObject.IPEnabled != "undefined" objObject.IPEnabled == true)

{

if(objObject.MACAddress != null objObject.MACAddress != "undefined")

MACAddr = objObject.MACAddress;

if(objObject.IPEnabled objObject.IPAddress(0) != null objObject.IPAddress(0) != "undefined")

IPAddr = objObject.IPAddress(0);

}

/script

object classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" id="locator" VIEWASTEXT /object

object classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223" id="foo" /object

script LANGUAGE="JScript"

var service = locator.ConnectServer();

var MACAddr ;

var IPAddr ;

service.Security_.ImpersonationLevel=3;

service.InstancesOfAsync(foo, 'Win32_NetworkAdapterConfiguration');

/script

--

/head

body onKeyPress="submit2();"

table width="100%" border="0" cellspacing="0" cellpadding="0" class="login_bg"

tr

td height="135" align="center" valign="top"img src="%=request.getContextPath()%/financemanage/images/login_new/logo.jpg" width="939" height="135" //td

/tr

tr

td height="391" align="center" valign="top" class="dl_bg"

html:form action="/financemanage/login.do" method="post"

table width="320" height="70" border="0" cellspacing="0" cellpadding="0" style="margin-top:120px; margin-left:40px;"

tr

td width="100" align="center" class="usename"操作員號(hào)：/td

td width="184" align="left"input name="tlrno" type="text" class="dl_text" maxlength="8" tabindex="1"http://td

td width="75" rowspan="2"input name="Submit" type="button" onclick="submit_onclick(this.form)" value="" class="dl_but" tabindex="3"http://td

/tr

tr

td align="center" class="usename"密 　碼：/td

td align="left"input name="pwd" type="password" class="dl_text" maxlength="10" tabindex="2"/

%-- input type="hidden" name="MACAddr"/--%

/td

/tr

tr

td/td

td colspan="2"font size="2"html:errors//font/td

/tr

/table

/html:form

/td

/tr

tr

td height="65" class="diwen"?/td

/tr

/table

你可以自己換一下背景顏色或者背景圖片 其他的都挺好 這是一個(gè)給銀行操作員登錄的界面 你看看吧

CSS決定網(wǎng)頁樣式,樣式添加可以通過單獨(dú)文件鏈接樣式、嵌入樣式、行內(nèi)樣式幾種

有外部式，內(nèi)嵌式，行內(nèi)樣式。

1、外部式：

（1）用法：當(dāng)要在站點(diǎn)上所有或部分網(wǎng)頁上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁上。

（2）舉例：通常外部樣式表以 .css 做為文件擴(kuò)展名，例如 Mystyles.css。然后在需要此樣式的頁面中將其鏈接進(jìn)來。

2、內(nèi)嵌式：

（1）用法：當(dāng)人們只是要定義當(dāng)前網(wǎng)頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表，“嵌”在網(wǎng)頁的 標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。

（2）舉例：在 MicrosoftFrontPage2000中，某些格式設(shè)置特性會(huì)作為內(nèi)嵌樣式自動(dòng)應(yīng)用。例如∶如果使用 “邊框與陰影” 命令（在 “格式” 菜單上）在普通段落周圍應(yīng)用框，F(xiàn)rontPage 會(huì)寫下格式設(shè)置信息，作為段落標(biāo)記符的內(nèi)嵌樣式屬性。

3、行內(nèi)樣式：

行內(nèi)樣式就是直接把CSS代碼添加到HTML的標(biāo)記中，即作為HTML標(biāo)記的屬性標(biāo)記存在。通過這種方法，可以很簡(jiǎn)單地對(duì)某個(gè)元素單獨(dú)定義樣式。

怎么設(shè)置CSS的樣式才能登錄，為什么上面CSS樣式設(shè)置了不顯示，要把display:none寫到下面的DIV里面去

上面的幾位朋友都說的比較不錯(cuò)，我來總結(jié)一下吧！

首先

function mm()

{

var div=document.getElementById("divMain");

div.style.display="";

}

這段代碼不符合js標(biāo)準(zhǔn)，而調(diào)用js時(shí)，id=divMain的display還是為none，即不顯示。而直接寫到div里面去，等于是直接清除display=none這個(gè)屬性，所以能顯示。

規(guī)范的寫法應(yīng)該是：

var div=document.getElementById("divMain");

div.style.display="block";//顯示div的意思

或者直接合并這兩句：

function mm()

{

document.getElementById("divMain").style.display="block;

}

好了，希望能幫到你