【CSS】【6】CSS学习的一些前提

一、前提：

   个人认为CSS学习是有前提条件的：兴趣、美感和创造能力；从技术角度上来讲需要了解HTML、JS等基本知识。可惜这些条件本人也不具备，但毛主席教导我们：实践出真知。

二、登录界面：

1、效果图：

2、来源：

  这是2011年为项目组做的图书馆登录界面，从网上找了一个图片进行了剪切。

三、div初步认识

  简单来讲div就是一个块，上面登录界面就划分为三个div，如下：

四、制作过程：

1、把下面的图片放置到pwm\style\red\images路径下：

  login_bg.gif      

  login_img.gif    

2、在\pwm\style\red\css下创建logincss.css文件：

body
{
    background-image:url(../images/login_bg.gif);
 font-family:"宋体";
 font-size:12px;
}

/*
* 定义登录页面图像和按钮的背景
*/
.loginBox
{
    background-color:#993333;
 height:396px;
 width:602px;
 margin:150px auto;    
}

/*
* 定义登录页面图像的位置
*/
.loginImgBox
{
    border:0px;
 margin:2px 2px 2px 2px;
 position:relative;
 padding-top:2px;  
}

3、在pwm\pub下创建login.htm文件：

（1）在head标记中增加<link href="../style/red/css/logincss.css" rel="stylesheet" type="text/css" />

（2）在body标记中增加如下内容：

<div class="loginBox">
    <div class="loginImgBox">
         <img src=\'#\'" /style/red/images/login_img.gif" />    
    </div>

    <div>
         <form name="loginForm">
              <span>用户：<input name = "username" type="text" size="16" /></span>
              <span>密码：<input name = "password" type="password" size="16" /></span>
              <span>皮肤：
                    <select name="skin" size="1">
                          <option value="1" selected>红色</option>
                          <option value="2">蓝色</option>
                          <option value="3">绿色</option>          
                    </select>
              </span>
              <span>登录</span>
              <span>重置</span>
         </form>
    </div>
</div>