CSS登陆框设计

html-css018

CSS登陆框设计,第1张

<div class="box" style="width:200pxoverflow:hiddenline-height:24pxfont-size:12pxtext-align:centerclear:both">

<input type="text" style="width:120pxheight:24pxborder:1px solid #ccccccfloat:leftmargin:4px 0" value="USER ID"/>

<!--type是设置input的类型,text,是单行文本,button是按钮,style,是设置input的属性依次为:宽度,高度,描边(线宽,模式,颜色),浮动(左边),跟周边距离(上下4px,左右0),框里默认字符-->

<input type="button" style="width:60pxheight:50pxmargin:4pxfloat:rightdisplay:inline" value="login" />

<input type="text" style="width:120pxheight:24pxborder:1px solid #ccccccfloat:left" value="PASSWORD" />

</div>

用dreamweaver建一个HTML文本,然后复制这段,到<body></body>里,这么详细,你不能不给我分!!

这个要看引用文件的路径了。

比如在用户登录html中,引用的reg.css和login.css标签如下:

 

 (1)<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文件存放在同一个文件夹下的,而login.css 前面多了'css/',这说明,login.css是存放在与html同一文件夹中的一个css文件夹中,举例说明如下:

 

 A文件夹中有:(1)html登录注册.html (2)reg.css(3)css文件夹【即是B文件夹】

而B文件夹中:(1)login.css

而UserAjax.rar是一个压缩文件吧?解压后,看你把文件放哪了,就在script标签中的src中设置好路径就行了,跟上面link标签中的href属性一样。

整条:

class="login

login-1"

这里包含两个类名,只是这是种简写形式而已(而且比较美观)

把上面的拆开后就可以写成:

class="login"

class="login-1"

这种形式的,你应该看得懂了吧

类选择器的使用诀窍

……?

也不没什么诀窍不诀窍的啦

像上面的写CSS时可以这样写:

.login.login-1{color:#f00}

注:两个之间是没有空格D~(在同一条标签上)

,不过我倒是不喜欢这样写选择器,因为觉得用

class="login

login-1"

这写法时,只是为了方便设置共有的属性而已,而不是为了写选择器而去这样写,如我会写成这样:

.login{width:100px}

.login-1{color:#f00}

而那个“#divLogin”,如果.login与.login-1没与其它选择器有冲突的话,那他们前面这个ID就不用加了,ID的话,我是用来设置这个区块的全局的。

PS:

ID选择器不能用上面的写法D~

=w=~