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.数据驱 ...
随机推荐
- 读取当前键值，并赋值给LED
/********************************* 代码功能:读取当前键值,并赋值给LED 使用函数: digitalRead(数字输入端口号); 创作时间:2016*10*07 作 ...
- 初识ASP.NET CORE：三、Middleware
Middleware are simpler than HTTP modules and handlers:Modules, handlers, Global.asax.cs, Web.config ...
- Selenium2+python自动化14-iframe
前言 有很多小伙伴在拿163作为登录案例的时候,发现不管怎么定位都无法定位到,到底是什么鬼呢,本篇详细介绍iframe相关的切换 以http://mail.163.com/登录页面10为案例,详细介绍 ...
- linux开机启动
开机过程指的是从打开计算机电源直到LINUX显示用户登录画面的全过程.分析LINUX开机过程也是深入了解LINUX核心工作原理的一个很好的途径. 启动第一步--加载BIOS 当你打开计算机电源,计算机 ...
- const in C++
const关键字是C++中常用的类型修饰符,用法非常灵活,使用const将大大改善程序的健壮性. const的作用 1. 定义const常量: 比如: const int Max = 100; 2. ...
- Android之ImageView 设置宽高
方案一: 设置布局参数 imageView.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newWidth));
- 【erlang】erlang几种生成随机数的方法
erlang有三个生产随机数的办法 random:uniform(). 这个函数是erlang库random模块提供的.一般都采用这个. 1> random:uniform(). 0.44358 ...
- 第一个python程序hello.py
使用vim编辑代码: #!/usr/bin/python2.7 #-*-coding:utf-8-*- name = raw_input('请输入你的名字:') print 'Hello,',name ...
- Linux搭建SVN服务器(centos)
http://wenku.baidu.com/link?url=0SnbE5pQG8K-RKnPlKcdesMWxS5YC64glkk5sCyxHorR37nX-qa4w0ViWLp55oDnRpTn ...
- Modifiers: virtual, override, new, abstract, sealed, internal
internal 声明类.类成员.接口或接口成员具有内部可见性. internal 修饰符使类.接口或成员仅在当前包中可见. 当前包之外的代码不能访问 internal 成员.只有在同一程序集的文件中 ...