一个登入效果简易图：（色彩搭配有点乱，嘻嘻，可以在代码处改成自己喜欢的颜色）

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做的一个登入小界面（图片瀑布流）的更多相关文章

  1. 用原生javascript做的一个打地鼠的小游戏

    学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

  2. php的字符转换 & php登入注册界面设计以及源码 & 分离公共部分

    我们在编写的时候总是会出现乱码 https://www.cnblogs.com/mafeng/p/5827215.html php登入注册界面设计以及源码 https://blog.csdn.net/ ...

  3. 最近做的一个Spring Boot小项目，欢迎大家访问 http://39.97.115.152/

    最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...

  4. 今天用css做了一个QQ登录页面

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 纯CSS做的一个Silder

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 为了考PMP，我做了一个刷题小程序

    一.背景 1.我是一名软件工程师,技术出身,担任开发组长,对项目管理不是很熟,所以决定系统学习下项目管理. 2.全球最适合的项目管理学习课程就是PMP,每年有4次PMP考试,证书还是很有含金量的. 3 ...

  7. vue——做了一个幼稚的小页面

    我的小花花没有转起来,不开心 ￣へ￣

  8. 基于html + css 实现图片瀑布流

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. Ajax基础与登入

    Ajax 是 Asynchronous JavaScript and XML的缩写. Ajax的优点: 优点:减轻服务器的负担,按需取数据,最大程度的减少冗余请求 局部刷新页面,减少用户心理和实际的等 ...

随机推荐

  1. 为什么Nhibernate中属性和方法必须Virtual的

    如果你曾经用过NHibernate 2.0或者更高的版本,那您一定碰到过下面的错误:NHibernate.InvalidProxyTypeException: The following types ...

  2. OA请假流程 -- 编码

    OA请假流程 -- 编码 凡是内容不会发生变化的,都要写在xml配置文件中.需要定义如下内容: <process>标签 id英文命名 和 name 中文命名,然后只要与该流程相关的资源均以 ...

  3. 制作手机浏览器显示格式的HTML页面

    最近要推出手机支持访问的HTML页面效果,而这在制作手机页面的过程中状况连连. 主要一下就我制作的工程中所遇的问题说明一下: 1. 改掉HTML页面声明:(以往大部分页面都是HTML4.0的声明) 还 ...

  4. 51Testing招聘软件测试课程研发人员

    最近有些两三年测试工作经验的小伙伴对自己的下一个工作有些迷茫,感觉很难有技术的突破,毕竟公司不是学校,不会允许员工海阔天空的去尝试各种新的技术.现在我就送给这些好学上进的小伙伴一个礼物,51Testi ...

  5. 《Linear Algebra and Its Applications》-chaper6-正交性和最小二乘法-最小二乘问题

    最小二乘问题: 结合之前给出向量空间中的正交.子空间W.正交投影.正交分解定理.最佳逼近原理,这里就可以比较圆满的解决最小二乘问题了. 首先我们得说明一下问题本身,就是在生产实践过程中,对于巨型线性方 ...

  6. UCloud EIP 你真的懂得如何使用么？ - SegmentFault

    UCloud EIP 你真的懂得如何使用么? - SegmentFault UCloud EIP 你真的懂得如何使用么?

  7. Cows - POJ 3348(凸包求面积)

    题目大意:利用n棵树当木桩修建牛圈,知道每头牛需要50平的生存空间,求最多能放养多少头牛. 分析:赤裸裸的求凸包然后计算凸包的面积. 代码如下: --------------------------- ...

  8. list的三种遍历方法

    1.最简单的for循环遍历 for(int i = 0; i < list.size(); i++){        list.get(i);        } 2.最方便的foreach循环遍 ...

  9. android_小总结_方法过时的兼容处理

    随着android系统的升级,有些过时的方法已经不再使用,但是又要兼容老的版本,所以这个时候可以使用反射来处理下 举个列子pull_to_refresh 中有个方法找不到==initializeScr ...

  10. Windows、Ubuntu双系统重装windows系统后grub引导的修复及默认启动项的修改

    今天帮童鞋重装系统,他的电脑是Windows.Ubuntu双系统,需要重装的系统是windows,据说是因为很多游戏都只支持64位,要给换成64位的 = =...      于是我就帮他装了个wind ...