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定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
随机推荐
- 33、springboot整合springcloud
Spring Cloud Spring Cloud是一个分布式的整体解决方案.Spring Cloud 为开发者提供了在分布式系统 (配置管理,服务发现,熔断,路由,微代理,控制总线,一次性token ...
- 通讯协议（三）Protocol Buffers协议
Protocol Buffers是Google开发一种数据描述语言,能够将结构化数据序列化,可用于数据存储.通信协议等方面. 不了解Protocol Buffers的同学可以把它理解为更快.更简单.更 ...
- 关于Oracle 数据库死锁 转
转自 https://zhidao.baidu.com/question/200422068111653165.html 一.数据库死锁的现象程序在执行的过程中,点击确定或保存按钮,程序没有响应,也没 ...
- Reading Fast Packet Processing A Survey
COMST 2018 主要内容 这是一篇有关快速包转发的综述,先介绍了包转发的有关基础知识和背景,具体介绍了包转发的主流方法,对这些方法进行了细致详尽的比较,最后介绍了最新的方法和未来的研究方向. 包 ...
- 当面试官问你sql优化的时候。。。
当面试官问你有关sql优化的问题时,直接拿笔写给他: 8-select 9-distinct<column_list> 1-from left_table 3-<join_type& ...
- 【js】 Uncaught RangeError: Invalid string length
今天项目比较催的比较着急,浏览器总是崩溃,后来报了一个Uncaught RangeError: Invalid string length(字符串长度无效) 的错误. 在ajax请求后得到的json数 ...
- jquery中的编程范式，即jquery的牛逼之处
转自:http://www.iteye.com/topic/1119283 对jquery理解比较深,积累一下,整理了一下格式,就当练习一下 markdown 语法. 本文将结合jQuery源码的实现 ...
- 我的 Delphi 学习之路 —— Delphi 的认识
标题:我的 Delphi 学习之路 -- Delphi 的认识 作者:断桥烟雨旧人伤 1. 什么是 Delphi Delphi 是 Windows 平台下著名的快速应用程序开发工具(Rapid App ...
- Mac下Anaconda的安装和使用
前提 在刚接触python的时候我想大多数人都会面临一个问题,我到底是选择2还是3,因为现在网上好多的资料和视频项目中都还是用的2,我们跟着学习的时候肯定也是首先从2开始学的,但是我们心里肯定也担心学 ...
- 在AI人工智能中如何巧妙学习大数据编程，成为五十万年薪的佼佼者
编辑 ai狗年 大数据和人工智能的关系,首先要说什么是大数据.这些年来,大数据先是被神化,继而又被妖魔化,到了今天,其实谁也不知道别人所谓的大数据指的是什么.我大数据从业者,建了一个大数据资源共享群1 ...