网站登录界面(div+css实现)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>叮咚网登录</title>
<style type="text/css">
.main{
width:100%;
height:920px;
border:1px solid #000;
text-decoration: none;
}
.top{
width:100%;
height:52px;
border:1px solid #000;
}
.downMenu{
width:100%;
height:30px;
font:normal normal 20px "宋体";
color:#fff;
background-color: #000000;
}
#search{
margin-left:520px;
}
a{
text-decoration: none;
}
#img1{
margin-left:330px;
}
#logo{
font:normal normal 20px "宋体";
padding-bottom: 5px;
}
#d{
padding-bottom:30px;
margin-left:290px;
}
a:link{
font-size: 20px;
color:aquamarine;
}
a:visited{
color:darkgray;
}
a:hover{
color:#FFFFFF;
}
a:active{
color:cadetblue;
}
.bottom{
text-align: center;
}
#img5{
width:100%;
height:80px;
}
#dengL{
width:100%;
height:600px;
background:#000000 url(img/loginbg.jpg) no-repeat top center;
background-size:1400px 700px;
padding-top:100px;

        }
        #dengLu{
            border:1px solid #5F9EA0;
            width:400px;
            height:300px;
            background-color:#fffff;
            margin-left:800px;
            /*margin-top:100px;*/
            background-color:#FFFFFF;
            font:normal normal "黑体";
            padding-top:10px;
            padding-left:20px;
        }
        .uersname{
            padding-left:100px;
            padding-top: 50px;
            padding-bottom: 10px;
        }
        .password{
            padding-left:100px;
        }
        .verify{
            padding-left:100px;
            padding-bottom:10px;
        }
        .login{
            padding-left:100px;
        }
    </style>

</head>
<body>
    <div class="main">
        <div class="top">
            <div id="logo">
                <img src="img/logo.gif" title="叮咚网logo" alt="logo"></img>
                <img src="img/header.png" title="img1"   alt="img1" id="img1"></img>
                <a href="登录.html" target="_blank" id="d"><font color="darkcyan">登录</font></a>&nbsp;&nbsp;
                <a href="注册.html" target="_blank"><font color="darkcyan">注册</font></a>&nbsp;&nbsp;
                <a href="购物车.html" target="_blank"><font color="darkcyan">购物车</font></a>
            </div>
        </div>
        <div class="downMenu">
                <a href="#" target="_blank">首页</a>&nbsp;&nbsp;
                <a href="#" target="_blank">手机数码</a>&nbsp;&nbsp;
                <a href="#" target="_blank">电脑办公</a>&nbsp;&nbsp;
                <a href="#" target="_blank">学习用品</a>&nbsp;&nbsp;
                <a href="#" target="_blank">家具电器</a>
                <input  id="search" type="text" name="search" value="search">
                <input type="submit" name="submit" value="submit">
        </div>
        <div id="dengL">
          <div id="dengLu">
            <font color="darkgray" size="5px">会员登录&nbsp;&nbsp;USER&nbsp;LOGIN</font>
            <div class="uersname">
                用户:<input type="text" name="username">
            </div>
            <div class="password">
                密码:<input type="password" name="password">
            </div>
            <div class="verify">
                验证码:<input type="text" name="verify">&nbsp;&nbsp;<img src="img/captcha.jhtml.jpg">              </div>
            <div class="login">
                <input type="checkbox" name="zddl" value="自动登录">自动登录&nbsp;&nbsp;&nbsp;
                <input type="checkbox" name="wjmm" value="忘记密码">忘记密码<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" name="submit" value="提交">
            </div>
          </div>
        </div>

        <div class="img5">
            <img src="img/footer.jpg" id="img5">
        </div>
        <div class="bottom">
            <a href="#" target="_blank"><font color="dodgerblue" size="3px"> 关于我们</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">联系我们</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">招贤纳士</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">法律声明</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">友情链接</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">支付方式</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">配送方式</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">服务声明</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">广告声明</font></a>
        </div>
        <div class="bottom">
            <font size="2px">Copyright&copy;2015-2016西部开源&nbsp;版权所有</font>
        </div>
    </div>
</body>

</html>

原文地址:http://blog.51cto.com/13678728/2092387

时间: 2024-07-29 05:22:50

网站登录界面(div+css实现)的相关文章

网站注册界面(div+css实现)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚网登录</title><style type="text/css">.main{width:100%;height:920px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52p

网站购物车界面(div+css实现)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚网购物车</title><style type="text/css">.main{width:100%;height:590px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52

用jsp实现网站登录界面的制作,并连接数据库

这里介绍一下怎样连接数据库,并用jsp制作一个简单的登录界面 1.首先需要搭建好环境,有Tomcat,eslipse,jdk等,并配置好环境变量,并安装好数据库,这里我使用的数据库是mysql数据库,并下载了一个MySQL的图形界面的软件,当上面的准备工作完成后就可以开始做了. 2.(1)首先应该连接好数据库 这是数据库的图形显示界面, (2)打开后首先创建一个mysql新连接. (3)然后在这个界面设置好这个连接点的名字,还有密码,密码需要记住,在以后打开mysql后连接数据库的的时候需要输入

网站登录界面包数据库异常

在系统的登录界面包数据库异常的解决方法: 1.可能是oracle客户端和服务器端版本限制要求(重新安装oracle32位客户端). 2.数据库中的数据被修改(重新导入该系统的数据).

使用Div+CSS布局设计网站的优点

网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样.      <DIV>Very excellent webmaster club www.qpsh.com </DIV>      如果单独使用 DIV

DIV+CSS的好处和意义

DIV+CSS的好处和意义 http://www.ijavascript.cn/jiaocheng/div-css-sense-435.html 业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样. 如果单独使用 DIV 而不

DIV+CSS简介

传统页面数据和布局都混合在一起,如下图: 而DIV+CSS存在下述优势: 1.符合W3C标准.微软等公司均为W3C支持者.这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰. 2.支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容. 3.搜索引擎更加友好.相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好. 4.样式的调整更加方便.内容和样式的分离,使页面和样式的调整变得更加方便. 现在YAHOO

DIV+CSS的好处

业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样. 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 是一样的. DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 C

div+css的优势

什么是div+css:在介绍div+css优势之前先来介绍一下什么是div+css.div+css是当下网页设计中最流行的词汇之一,它是一种网页布局方式.在XHtml标准中,不再使用table定位方式,而是通过CSS控制div来实现我们所需要的定位,即div+css布局.此种布局方式已经超越表格布局方式,成为当下最为流行的方式,当前主流的大型网站甚至中小企业网站都已div+css布局方式,可见它的优越性所在.div+css的优势:div+css网页布局相对于table布局方式具有以下几个主要的优