Html+CSS 学习第二天

趁着这两天,将html和CSS基本上学了一遍，大家如果想学习的话，可以百度w3cSchool,进行学习。

基础我就不说了,直接将我做的一个登陆页面放上去。刚学完CSS,写个漂亮的登录界面恶心死我了，感觉真是没啥艺术气息。

我先展示html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>登录</title>

<link rel="stylesheet" href="login.css"/>

</head>

<body>

<form action="www.baidu.com" method="post">

<!-- 在整幅画面中选取950px-->

<div class="main">

<!-- 然后将整幅图进行分块-->

<ul>

    <li class="top1"></li>

    <li class="top2"></li>

    <li class="topleft1"></li>

    <li class="topleft2">

    <span>

        <img src="../images/hack.jpg" width="282" height="140"/>

    </span>

    </li>

    <li class="topleft3">

        <ul class="login">

            <li>

            <label for="username">

                <span class="loginleft">用户名:</span>

                    <span class="loginleft">

                        <input  class="logintxt" type="text" id="username"/>

                    </span>

                </label>

            </li>

            <li>

            <label for="pass">

                <span class="loginleft">密码:</span>

                    <span class="loginleft">

                        <input  class="logintxt" type="text" id="pass"/>

                    </span>

                </label>       

            </li>

            <li>

                <label for="txtcode">

                <span  class="loginleft">验证码:</span>

                </label>

                <span style="left">

                    <input type="text" class="logintxtCode" id="txtcode" />

                </span>

                <span style="left" >

                <img  src="http://zyzfw.xidian.edu.cn/include/function/chekcode.php?43?nowtime=1457444176127" height="22"/>

                </span>

            </li>

            <li>

                <span class="loginleft">记住我:</span>

                <input  type="checkbox" />

            </li>

        </ul>

    </li>

    <li class="topleft4"></li>

    <li class="bottom1"></li>

    <li class="bottom2"></li>

    <li class="bottom3">

        <span>

            <img src="../images/login/btnlogin.gif" class="btn"/>

        </span>

    </li>

    <li class="bottom4"></li>

    <li class="bottom5"></li>

</ul>

</div>

</form>

    <div class="bottom">

        <p>

            版权所有 ©  七夜博客 。 保留一切权利。

        </p>

    </div>

</div>

</body>

</html>

再将CSS展示一下:

/* CSS Document */

body

{

margin:;

padding:;

font-size: 12px;

background: #214D90 url(../images/login/bg.gif) repeat-x;

color: #999999;

font-family: Tahoma,Verdana;    

}

ul

{

    list-style: none;

    margin:;

    padding:;

}

.main{

    width:950px;

    margin: 0 auto;

}

.top1

{

    height: 75px;

    background: url(../images/login/login_01.gif) no-repeat;

}

.top2

{

    height: 94px;

    background: url(../images/login/login_02.gif) no-repeat;

}

.topleft1

{

    width: 155px;

    height: 140px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_03.gif) no-repeat;

}

.topleft2

{

    width: 282px;

    height: 140px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_04.gif) no-repeat;

}

.topleft3

{

    width: 345px;

    height: 140px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_06.gif) no-repeat;

}

.login

{

}

.login li

{

    line-height: 35px;

    height:35px;

    overflow:hidden;

}

.loginleft

{   line-height: 35px;

    vertical-align: middle;

    width: 50px;

    height:34px;

    text-align: right;

    display: -moz-inline-box;

    display: inline-block;

    padding-bottom:3px;

}

.logintxt

{

    width: 215px;

    height: 30px;

    line-height: 30px;

    overflow: hidden;

    border: 0px;

    padding-left: 3px;

    color: #999999;

    background: url(../images/login/txt.gif) no-repeat left center;

}

.logintxtCode

{

    line-height: 30px;

    width: 93px;

    height: 30px;

    overflow: hidden;

    border: 0px;

    padding-left: 3px;

        color: #999999;

    background: url(../images/login/code.gif) no-repeat left center;

}

.topleft4

{

    width: 158px;

    height: 140px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_07.gif) no-repeat;

}

.bottom1

{

    width: 155px;

    height: 94px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_08.gif) no-repeat;

}

.bottom2

{

    width: 309px;

    height: 94px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_09.gif) no-repeat;

}

.bottom3

{

    width: 318px;

    height: 94px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_10.gif) no-repeat;

}

.bottom4

{

    width: 158px;

    height: 94px;

    float: left;

    overflow: hidden;

    background: url(../images/login/login_11.gif) no-repeat;

}

.bottom5

{

    height: 72px;

    clear: both;

    overflow: hidden;

    background: url(../images/login/login_12.gif) no-repeat;

}

.btn

{

    margin-left:60px;

}

.bottom{

    position:fixed;

    width: 100%;

    margin: 0 ;

    text-align: center;

    bottom:;

    padding-bottom: 20px;

    background: #434343;

    color: #989898;

    }

图我就不贴了

Html+CSS 学习第二天的更多相关文章

css学习の第二弹—文字格式化排版
1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{ ...
CSS 学习第二天
超链接的样式: 1.颜色变化:未访问时的样式a:link:鼠标点击后的样式a:visited;鼠标放上去的样式a:hover;鼠标点击时的样式a:active 2.鼠标变小手:cursor:point ...
css学习归纳总结（三）转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法行内样式行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
css学习归纳总结（二）转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
css学习归纳总结（一）转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器如:p, body, img, div{} 2.兄弟选择器如:p + p { color:#f00; } 3.属性 ...
Head First Html and CSS学习笔记之HTML
初学前端开发,记录下自己的学习笔记. 第一章认识HTML 1:关于HTML HTML是超文本标记语言(HyperText Markup Language)的缩写,用来建立网页的结构. 它只会根据标记 ...
css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器如:p, body, img, div{} 2.兄弟选择器如:p + p { color:#f00 ...
HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
CSS学习摘要-定位实例
CSS学习摘要-定位实例注:全文摘自MDN-CSS定位实例列表消息盒子我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

随机推荐

淡说Linux 的发展史
♦ 1 Linux的简单介绍 Linux与Windows一样都是一套OS(操作系统),Windows界面美观 ,普通用户很容易上手,点点鼠标就能搞定许多操作,而Linux生下来就是为程序员的,故精通 ...
Python--BeautifulSoup库安装
1.BeautifulSoup简介 BeautifulSoup库通过解析文档可以获取网页文档中所需的数据,方便用户从HTML或XHTML文档中提取数据,作为python的一个辅助工作,也是爬虫实践中的 ...
全球参考系统（WRS）概述及常用工具汇总
1.全球参考系统(WRS)简介 WRS(Worldwide Reference System)是Landsat卫星采用的全球参考系统,也是国际上非常具有代表意义的全球参考系统之一.WRS是依据卫星地面 ...
[转]DbHelper通用数据库访问帮助类
之前我一直都是在博客园中查看各位高手的博文,确实学到了不少知识,不过比较少写博客,现在就把我自己在项目实施过程中使用到比较好的技术框架写出来,希望能让更多的人了解和学习. 通常我们在开发使用数据库访问 ...
PAT——1037. 在霍格沃茨找零钱
如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.”现在,给定 ...
使用Fiddler监控来自手机客户端的请求
环境配置组成: 1 手机 2 安装Fiddler的PC 设置要点: 1 手机和PC应在同一个局域网内我的做法是:PC安装WIFI热点,手机连接热点上网 PC的IP是192.168.95.1 手机的 ...
Maven 高级应用
Maven 的高级应用主要体现在 ==依赖==,==聚合==,==继承== * 依赖就是在当前项目的pom.xml 总引入依赖的坐标最最经常用到的 <dependencies> < ...
字体在mac win 系统如何优雅的展示
我们知道,不同的操作系统,不同的浏览器,页面字体的显示和渲染存在差异. 那么如何设置font-family,能够使字体在不同的环境下,也拥有好的展示效果? 1.操作系统中字体默认的字体 windows ...
jQuery实现列表的增加和删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Linux下Tomcat性能优化--文件句柄数增大
今天在对项目进行性能压力测试时,设置并发量为1000,发现Tomcat控制报错: java.IOException:打开的文件过多经搜索,发现是由于Linux默认设置的句柄数为1024,当并发量过大 ...

Html+CSS 学习第二天

Html+CSS 学习第二天的更多相关文章

随机推荐

热门专题