酷炫登录页面和css样式,HTML5酷炫登录页面

css样式表怎么用啊

CSS的调用，按照CSS出现在页面的不同位置，可以分为3种方法：

元素中直接使用；

从页面头部调用；

采用链接的形式调用。

不同的调用方法有不同的写法和优先级。下面分别做一下介绍。

一、元素中直接使用

这种调用方式的写法如下：

元素名称 style="属性:属性值;"/元素名称

在样式中直接使用CSS，语法是使用style标签，在双引号中，样式的语法结构和独立样式表中完全相同。例如：

div style="width:240px;height:80px;background-color:#cccccc;text-align:center;font-size:14px"

示例：元素中直接调用。/div

该样式中定义了元素宽、高为360、80像素，背景色为灰色，字体大小为14像素。其应用到页面中的显示如图1。

二、从页面头部调用

从页面头部调用CSS是将CSS写在页面的head元素中，然后在页面中调用。其语法结构如下：

style

选择符{属性:属性值;}

/style

页面上的所有样式都可以写在style和/style中。使用这种方式调用CSS，在页面中必须有相应的调用代码。

其中，类选择符的调用代码如下：

元素名称 class="类选择符名称"/元素名称

ID选择符的调用代码如下：

元素名称 id="id 类选择符名称"/元素名称

下面我们来用一个示例演示一下。

head

titleCSS调用方法/title

style

.content{

background-color: #cccccc;

font-size: 14px;

width: 240px;

height: 80px;

color: Blue;

text-align: center;

}

/style

/head

body

div class="content"示例：从页面头部调用。/div

/body

该样式应用到页面的效果如图2所示。

三、采用链接的形式调用

采用链接的形式调用CSS通常有两种方法：

使用link元素

使用link元素调用CSS的语法如下：

link rel="stylesheet" href="css文件路径" type="text/css"/

其中rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。

使用@import

使用@import调用和使用link元素调用的区别在于，使用@import的调用方法只能使用在样式文件中，即只能在调用的样式文件，或style元素中才能正常使用

相关问答

Q1: 如何自定义WordPress的登录页面

一、将下面代码加到主题functions.php模版文件的最后。

?php

function custom_login() {

echo 'link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/custom_login/custom_login.css" /'; }

add_action('login_head', 'custom_login');

?

二、在所用主题中新建一个名称为：custom_login 的文件夹，并在其中新建：custom_login.css及制作好的网站LOGO： logo.png也放进去。

三、将下面代码添加到custom_login.css中。

/** 背景及字体 **/ 

html,body.login{

background:#f2f2f2;

font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif;

}

/** 去掉链接下划线 **/ 

html a{

text-decoration: none;

}

/** 登录DIV **/ 

#login {

background:#fff;

border: 1px solid #ccc;

width:400px;

margin: 40px auto 0;

padding: 10px 10px 20px 10px;

border-radius:5px;

box-shadow:0 4px 10px -1px rgba(200, 200, 200, 0.7);

}

/** 替换logo **/ 

.login h1 a{

background: #fff url(logo.png) no-repeat center;

width:400px;

}

/** 提示 **/ 

.updated, .login .message {

background:#fff;

border: none;

text-align: center;

}

/** 表单 **/ 

.login form {

box-shadow:none;

border: none;

}

#loginform, #registerform, #lostpasswordform{

background:transparent;

border:none;

}

/** 按钮 **/ 

.button-primary,.submit .button-primary,#login form .submit input {

width:83px;

height:25px;

font-weight: bold;

border:none;

}

上面只罗列了登录界面几个基本要素的样式修改。可以使用火狐扩展Firebug查看各部分DIV选择器名称进行详细修改。最终效果如图：

同时还可参考登录页面默认样式文件：wordpress\wp-admin\css目录的wp-admin.min.css，进一步个性化登录页面，就看自己的创意了！另外，也可以将下面代码添加到主题functions.php模版文件中，直接将样式写在其中。

function new_custom_login_logo() {

echo 'style type="text/css"

//YOUR CSS Code Here

/style';

}

注：HotNews主题早期版本集成了该功能，后来添加前台登录功能后就将其删除了。

Q2: 求一个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"操作员号：/td

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

td width="75" rowspan="2"input name="Submit" type="button" onclick="submit_onclick(this.form)" value="" class="dl_but" tabindex="3"//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

你可以自己换一下背景颜色或者背景图片 其他的都挺好 这是一个给银行操作员登录的界面 你看看吧

Q3: css样式是什么

CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

它的作用可以达到：

（1）在几乎所有的浏览器上都可以使用。

（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

（4）你可以轻松地控制页面的布局 。

（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，代码非常烦琐。

很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。

说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。

CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。

式样单放在页面中，通过浏览器的解释执行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。生殖对一些非常老的浏览器，页不会产生页面混乱的现象。

Q4: 在网页中如何添加CSS样式表?

1.首先打开EditPlus软件，新建一个样式表文件，写入一些样式，如下图所示。

2.接下来我们在建立一个样式表文件，在这个样式表文件中通过import属性导入上一个样式表，如下图所示。

3.然后在html中我们用link标签导入上面声明的样式文件，如下图所示。

4.接下来我们运行HTML文件，我们可以看到虽然只导入了一个样式文件，但是两个样式表的样式都加载进来了，如下图所示。

5.另外在运用import的时候一定不要放在样式下面，如下图所示，这样是不生效的。

6.最后运用import导入样式也不要忘了分号，如下图所示，忘了分号也是不生效的。