用html/css做的一个登入小界面(图片瀑布流)
一个登入效果简易图:(色彩搭配有点乱,嘻嘻,可以在代码处改成自己喜欢的颜色)
css样式的代码:
style.css:
@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
}
body{
background-color:#FCC;
}
.wrapper{
width:80%;
height:2000px;
background-color:#FC9;
margin:0px auto;}
.heading{
margin:0px;
width:100%;
height:90px;
background-color: #FCC;
margin:0px auto;
}
.heading-nav{
padding-top:30px;
padding-bottom:30px;
height:30px;
width:100%;
position:relative;}
.heading-title{
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:30px;
color:#FF0;}
.heading-navbar ul{
margin-left:40px;
float:left;
list-style-type:none;
padding-top:6px;
padding-bottom:6px;
}
.heading-navbar li{
display:inline;
padding-left:10px;}
a:link,a:visited{
font-weight:bold;
color:#F69;
text-align:center;
padding:6px;
text-decoration:none;
}
a:hover,a:active{
color:#666;
}
.heading-img img{
border-radius:30px;
height:26px;
width:26px;
box-shadow:1px 1px 1px #f9c;
float:right;
}
.heading-soplight form{
float:right;
width:100px;
height:30px;
position:relative;
margin-right:70px;
}
.heading-soplight input{
height:26px;
border-radius:26px;
}
.footing{
font-family:Tahoma, Geneva, sans-serif;
padding-top:15px;
padding-bottom:10px;
text-align:center;
font-size:px;
color:#999;
}
.body-title h3{
padding-top:20px;
text-indent:2em;
font-size:30px;
color:#F69;
font-family:"Arial Black", Gadget, sans-serif;}
.body-title p{
color: #000;
margin-top:20px;
font-size:bold;
text-indent:3em;
padding-right:20px;
margin-bottom:20px;
}
hr{
margin-bottom:20px;}
.body-img{
margin:10px;
border:1px solid #999;
width:auto;
height:auto;
float:left;
text-align:center;
}
img{
margin:5px;}
html代码:
Untitled-2.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" /> | |
<link rel="stylesheet" href="style.css" type="text/css" /> | |
<title>我的世界</title> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="wrapper"> | |
<div class="heading"> | |
<div class="heading-nav"> | |
<div class="heading-title">舍“进”求“媛”吧~</div> | |
<div class="heading-navbar"> | |
<ul> | |
<li><a href="#">首页</a></li> | |
<li><a href="#">进“静”</a></li> | |
<li><a href="#">媛“缘”</a></li> | |
<li><a href="#">VIP选项</a></li> | |
</ul> | |
</div> | |
<div class="heading-img"><img src="图片/img-03ee5763330b575e86fadef0269f5a5c.jpg"></div> | |
<div class="heading-soplight"> | |
<form> | |
<input type="text"> | |
</form> | |
</div> | |
</div> | |
</div> | |
<div class="body"> | |
<div class="body-title"> | |
<h3>生活缩影&&生活继续</h3> | |
<p>你好吗?天气好吗?如果快乐太难的话,那祝你平安。</p> | |
</div> | |
<hr/> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-49b3aec9745d8d7e725421ddb173207d.jpg" width="200px" height="200px"/> | |
</a><br/><h6>嘟嘟熊</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/IMG_20160718_161944.jpg" width="200px" height="200px"/> | |
</a><br/><h6>girl</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-48595e3aec3abfa7452a85f3b3fe2099.jpg" width="200px" height="200px"/> | |
</a><br/><h6>小馒头</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-703fa08f5cbcc824355f275d07e1d2a6.jpg" width="200px" height="200px"/> | |
</a><br/><h6>喵喵</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-1ee9bac848fc3631a520491c302ab672.jpg" width="200px" height="200px"/> | |
</a><br/><h6>小新</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-0ce66d19d9883db7d699a5e8b5594446.jpg" width="200px" height="200px"/> | |
</a><br/><h6>阳光</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-873f577e7e329dc7e9311bb045b2335b.jpg" width="200px" height="200px"/> | |
</a><br/><h6>睡觉</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-34a1cb4f88131f8183deee76d69c85d6.jpg" width="200px" height="200px"/> | |
</a><br/><h6>嘟嘟猫</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-c4556d1fcee91017979948ca91b5e01a.jpg" width="200px" height="200px"/> | |
</a><br/><h6>龟龟</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-9ffa8ff9b1f3b3d409857d0914475933.jpg" width="200px" height="200px"/> | |
</a><br/><h6>白雪公主</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-6548ebbe56a4dfbd724c1fc91f3e33c5.jpg" width="200px" height="200px"/> | |
</a><br/><h6>秃秃树</h6> | |
</div> | |
<div class="body-img"> | |
<a href="#" target="_self"> | |
<img src="图片/img-89ea89c2f255b8a885058c1bd3053369.jpg" width="200px" height="200px"/> | |
</a><br/><h6>风</h6> | |
</div> | |
</div> | |
<div class="footing">@颜double媛</div> | |
</div> | |
</body> | |
</html> | |
用html/css做的一个登入小界面(图片瀑布流)的更多相关文章
- 用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
- php的字符转换 & php登入注册界面设计以及源码 & 分离公共部分
我们在编写的时候总是会出现乱码 https://www.cnblogs.com/mafeng/p/5827215.html php登入注册界面设计以及源码 https://blog.csdn.net/ ...
- 最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/
最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...
- 今天用css做了一个QQ登录页面
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯CSS做的一个Silder
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 为了考PMP,我做了一个刷题小程序
一.背景 1.我是一名软件工程师,技术出身,担任开发组长,对项目管理不是很熟,所以决定系统学习下项目管理. 2.全球最适合的项目管理学习课程就是PMP,每年有4次PMP考试,证书还是很有含金量的. 3 ...
- vue——做了一个幼稚的小页面
我的小花花没有转起来,不开心  ̄へ ̄
- 基于html + css 实现图片瀑布流
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Ajax基础与登入
Ajax 是 Asynchronous JavaScript and XML的缩写. Ajax的优点: 优点:减轻服务器的负担,按需取数据,最大程度的减少冗余请求 局部刷新页面,减少用户心理和实际的等 ...
随机推荐
- 许令波老师的java的IO机制分析文章
深入分析 Java I/O 的工作机制 I/O 问题可以说是当今互联网 Web 应用中所面临的主要问题之一,因为当前在这个海量数据时代,数据在网络中随处流动.这个流动的过程中都涉及到 I/O 问题,可 ...
- 任意轴算法 ( Arbitrary Axis Algorithm )
已知三维空间中任意单位向量,求以该向量为Z轴的local正交坐标系: 如上图,每个模型都有自己local 坐标系,已知其中一个朝向求另外两个方向. 在autodesk中采用的是Arbitrary Ax ...
- poj 3710 Christmas Game(树上的删边游戏)
Christmas Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1967 Accepted: 613 Des ...
- 《算法问题实战策略》——chaper9——动态规划法技巧
Q1: 数字游戏: 两个人(A.B)用n个整数排成的一排棋盘玩游戏,游戏从A开始,每个人有如下操作: (1) 拿走棋盘最右侧或者最左侧的棋子,被拿走的数字从棋盘中抹掉. (2) 棋盘中还剩 ...
- Install Asterisk 11 on Ubuntu 12.04 LTS
http://blogs.digium.com/2012/11/14/how-to-install-asterisk-11-on-ubuntu-12-4-lts/ Last week I put up ...
- Little shop of flowers - SGU 104 (DP)
题目大意:把 M 朵花插入 N 个花瓶中,每个花插入不同的花瓶都有一个价值A[Mi][Nj],要使所有的花都插入花瓶,求出来最大的总价值(花瓶为空时价值是0). 分析:dp[i][j]表示前i朵花插入 ...
- Maven浅析-1
Maven的配置 1.首先从http://maven.apache.org/download.cgi下载当前最新版本的maven. 如果不想自己安装maven的话,建议直接下binary zip文件, ...
- flipsnap--手机屏幕水平滑动框架
在很多手机应用中,大家都会见过这样一种效果:当手指横向滑动屏幕时,屏幕上的页面会向左或向右滑动. 下面介绍一下当用HTML5+CSS3开发手机应用时解决这类效果的一款js框架:flipsnap. fl ...
- JSON 和 JSONP
本文转载:http://www.cnblogs.com/shanyou/archive/2009/12/13/1623163.html JSON 和 JSONP 浏览器安全模型规定,XMLHttpR ...
- Matrix的set,pre,post调用顺序
Matrix调用一系列set,pre,post方法时,可视为将这些方法插入到一个队列.当然,按照队列中从头至尾的顺序调用执行.其中pre表示在队头插入一个方法,post表示在队尾插入一个方法.而set ...