HTML+CSS小实战案例
HTML+CSS小实战案例
登录界面的美化，综合最近所学进行练习
网页设计先布局，搭建好大框架，然后进行填充，完成页面布局
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>实验</title>
<style type="text/css">
*{margin:0;padding:0;}/*去掉页面样式*/
body{color:white;}
.content{
background-color:pink;
position:absolute;/*绝对定位*/
top:50%;
left:0;
width:100%;
height:400px;
margin-top:-200px;
overflow:hidden;/*隐藏滚动条*/
}
.main{
text-align:center;/*文本居中*/
max-width:600px;
height:400px;
padding:100px 0px;/*上下80px,左右为0*/
/*background:yellow;*//*验证div的位置*/
margin:0 auto;/*设置上右下左,居中显示*/
}
.main h1{
font-family:"楷体";/*设置字体*/
font-size:70px;/*设置字体大小*/
font-weight:2px;/*调整字体粗细*/
}
form{
padding:20px 0;
}
form input{
border:1px solid white;
display:block;
margin:0px auto 10px auto;/*上 右 下 左*/
padding:10px;
width:220px;
border-radius:30px;/*H5设置圆角边框*/
font-size:18px;
font-weight:300;
text-align:center;
}
form input:hover{
background-color:pink;
}
form button{
background-color:yellow;
border-radius:10px;
border:0;
height:30px;
width:50px;
padding:5px 10px;
}
form button:hover{
background-color:red;
}
</style>
</head>
<body>
<div class="content">
<div class="main">
<h1>Welcome</h1>
<form>
<input type="text" name="useid" placeholder="请输入账号"/>
<input type="password" name="pw" placeholder="请输入密码">
<button type="submit">登 录</button>
</form>
</div>
</div> </body>
</html>
登录界面实战运行结果如下
自己动手丰衣足食
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>柠檬学院</title>
<style type="text/css">
*{margin:0;padding:0;}
.content{
background-color:yellow;/*设置背景颜色*/
position:absolute;/*设置绝对定位*/
width:100%;/*设置div的宽度*/
height:400px;/*设置div的高度*/
top:50%;/*距离上面的距离是一半*/
margin-top:-200px;/*向上距顶端的距离减200像素*/
overflow:hidden;/*隐藏滚动条*/
}
.container{
/*background-color:pink;*//*背景颜色*/
text-align:center;/*文字居中*/
padding:80px 0px;/*设置上下和左右*/
max-width:600px;/*设置最大宽度*/
height:400px;/*设置div的高度*/
margin:-10 auto 0 auto;/*上 右 下 左*/
}
.container h1{
background-color:pink;
font-size:80px;
border-radius:30px;
color:blue;
height:80px;
width:600px;
text-align:center;
font-family:"楷体";
}
form input{
font-size:30px;
display:block;
border-radius:30px;
padding:10px 5px;/*上下 左右*/
text-align:center;
margin:25 auto 15 auto;/*上 右 下 左*/
font-weight:300px;
}
form input:hover{
background-color:gold;
}
form button{
background-color:grad;
height:50px;
width:100px;
border-radius:20px;
font-family:"楷体";
font-size:30px;
}
form button:hover{
background-color:pink;
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<h1>柠檬学院</h1>
<form>
<input type="text" name="useid" placeholder="请输入账号"/>
<input type="password" name="pw" placeholder="请输入密码"/>
<button type="submit">登录</button>
<button type="submit">注册</button>
</form>
</div>
</div>
</body>
</html>
先布局，后填充，网页设计的规范格式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>柠檬学院</title>
<style type="text/css">
*{
margin:0px;
padding:0px;/*设置距顶点的距离设置为0*/
}
.header{
background-color:pink;
color:blue;
height:80px;
width:100%;
text-align:center;
font-size:60px;
}
.main{
margin:0 auto 0 auto;
background-color:yellow;
text-align:center;
font-size:60px;
width:80%;
height:600px;
}
.foot{
background-color:gray;
width:80%;
margin:0 auto 0 auto;
height:200px;
text-align:center;
font-size:60px;
}
</style>
</head>
<body>
<div class="header">
页面头部信息
</div>
<div class="main">
页面的主要内容
</div>
<div class="foot">
页面的版权信息
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>柠檬学院</title>
<style type="text/css">
*{
margin:0px;
padding:0px;/*设置距顶点的距离设置为0*/
text-align:center;
}
.header{
background-color:yellow;
height:100px;
width:100%;
font-size:80px;
font-family:"楷体"; }
.main{
width:80%;
margin:0 auto 0 auto;
}
.left{
background-color:brown;
float:left;/*改变位置*/
height:200px;
width:20%;
font-size:60px;
color:yellow;
}
.right{
background-color:peachpuff;
height:200px;
width:80%;
float:right;
font-size:60px;
color:blue;
}
.main1{
margin:0 auto 0 auto;
background-color:yellow;
text-align:center;
font-size:60px;
width:80%;
height:600px;
}
.foot{
background-color:gray;
width:80%;
margin:0 auto 0 auto;
height:200px;
text-align:center;
font-size:60px;
}
</style>
</head>
<body>
<div>
<div class="header">
页面头部信息
</div>
<div class="main">
<div class="left">
LOGO
</div>
<div class="right">
页面导航
</div>
</div>
<div class="main1">
页面的主要内容
</div>
<div class="foot">
页面的版权信息
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>柠檬学院</title>
<style type="text/css">
*{
margin:0px;
padding:0px;/*设置距顶点的距离设置为0*/
text-align:center;
}
.header{
background-color:yellow;
height:100px;
width:100%;
font-size:80px;
font-family:"楷体"; }
.main{
width:80%;
margin:0 auto 0 auto;
height:200px;
}
.left{
background-color:brown;
float:left;/*改变位置*/
height:200px;
width:20%;
font-size:60px;
color:yellow;
}
.right{
background-color:peachpuff;
height:200px;
width:80%;
float:right;
font-size:60px;
color:blue;
}
ad{
height:480px;
width:100%;
margin:auto 0 0 auto;
}
.ad1{
width:10%;
height:550px;
margin:0 auto auto auto;
background-color:blue;
float:left;
font-size:60px;
}
.main1{
margin:0 auto 0 auto;
background-color:yellow;
text-align:center;
font-size:60px;
width:80%;
height:480px;
float:left;
}
.ad2{
width:10%;
height:550px;
margin:0 auto auto auto;
background-color:blue;
float:right;
font-size:60px;
}
.foot{
background-color:gray;
width:80%;
margin:0 auto 0 auto;
height:200px;
text-align:center;
font-size:60px;
}
</style>
</head>
<body>
<div>
<div class="header">
页面头部信息
</div>
<div class="main">
<div class="left">
LOGO
</div>
<div class="right">
页面导航
</div>
</div>
<div class="ad">
<div class="ad1">
广告投放
</div>
<div class="main1">
页面的主要内容
</div>
<div class="ad2">
广告投放
</div>
</div>
<div class="foot">
页面的版权信息
</div>
</div>
</body>
</html>
HTML+CSS小实战案例的更多相关文章
- CSS基础 实战案例 模拟小米官方导航栏
效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li> ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- HTML+CSS提升小实战
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...
- 第二百五十四节，Bootstrap项目实战--案例
Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
- Salesforce学习之路-developer篇（五）一文读懂Aura原理及实战案例分析
1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...
- Vue2.0史上最全入坑教程（下）—— 实战案例
书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...
- python实战案例--银行系统
stay hungry, stay foolish.求知若饥,虚心若愚. 今天和大家分享一个python的实战案例,很多人在学习过程中都希望通过一些案例来试一下,也给自己一点动力.那么下面介绍一下这次 ...
- 基于SpringCloud的Microservices架构实战案例-架构拆解
自第一篇< 基于SpringCloud的Microservices架构实战案例-序篇>发表出来后,差不多有半年时间了,一直也没有接着拆分完,有如读本书一样,也是需要契机的,还是要把未完成的 ...
- 暗黑战神！ Unity3D网游ARPG实战案例
前面开发了几个单机小游戏,该是时候挑战一下网络游戏方面的开发了! 3D网游ARPG实战案例(第二季),使用Unity2017.3版本制作 内容包括 服务端部分 1.网络通信编码,协议及传输 2.数据驱 ...
随机推荐
- hdu 1348 Wall (凸包)
Wall Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- VC++6.0 Debug单步调试
相信大家对谭浩强童鞋都不陌生,想当年,是他 引领我们步入了C的殿堂,我们从他那里学会了如何写代码,他却没有教我们如何Debug,而我们伟大的老师,也对此只字不提.相信很少有人可以一次性写出 完全正确的 ...
- mysql学习-windows下绿色版mysql安装问题解决办法
1.下载绿色版mysql 从该地址http://dev.mysql.com/downloads/mysql/ 中选择windows的版本,选择下载. 2.将下载的压缩包解压. 3.将根目录下的my-d ...
- Linux ps命令详解与示例说明
ps:要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程,而ps命令就是最基本同时也是非常强大的进程查看命令.使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结 ...
- 解决AndroidADT自带Eclipse编辑器不能自动代码提示的问题
今天发现,我下载的AndroidADT开发套装中自带的Eclipse没有自动代码提示功能.通过参考http://blog.csdn.net/coolszy/article/details/724195 ...
- struts2获得请求参数的方式
1.用Action的属性接收参数 2.用DomainModel(域模型)接收参数 3.用ModelDriven接收参数 使用这种方式接受参数需要实现ModelDriven接口,
- js 获取时间差
写这片博客 ,下面代码虽然简单,但却很实用...默默留下来... var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;v ...
- Map：containsKey、containsValue 获取Map集合的键值的 值
get(Object key) 返回与指定键关联的值: containsKey(Object key) 如果Map包含指定键的隐射,则返回true: containsValue(Object valu ...
- C/C++字符串函数之复制函数
突然发现对字符串函数缺乏系统的了解,所以花了一点时间专门整理下,在此记录之,以方便自己及有需要的人使用. C/C++字符串函数的头文件:string.h 复制函数主要有4个,如下: 1.char * ...
- 开不了的窗_____window.open
window.open()是原来常用的新开窗口的方式,但是呢,现在会被大多数浏览器阻止掉,默认为是非用户意愿的打开窗口,即广告之类的. 但是通过a链接的事件来open是可以的,因为这样会认为是用户主观 ...