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

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. 14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小

    14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小 改变 InnoDB ...

  2. BZOJ1135: [POI2009]Lyz

    1135: [POI2009]Lyz Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 264  Solved: 106[Submit][Status] ...

  3. bzoj 3156 防御准备（斜率DP）

    3156: 防御准备 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 837  Solved: 395[Submit][Status][Discuss] ...

  4. YUV像素和ycbcr

    一幅彩色图像的基本要素是什么? 说白了,一幅图像包括的基本东西就是二进制数据,其容量大小实质即为二进制数据的多少.一幅1920x1080像素的YUV422的图像,大小是1920X1080X2=4147 ...

  5. EasyWebServer编写CGI程序的环境变量

    示例: SERVER_SOFTWARE=EasyWebServer/1.9 SERVER_PROTOCOL=HTTP/1.1 SERVER_PORT= SERVER_NAME=aozima-noteb ...

  6. mysql 引擎区分

    MySQL常用的存储引擎为MyISAM.InnoDB.MEMORY.MERGE,其中InnoDB提供事务安全表,其他存储引擎都是非事务安全表. MyISAM是MySQL的默认存储引擎.MyISAM不支 ...

  7. Xcode7.1与iOS9之坑

    一.更改http为https 两种方案: 公司后台服务器更改; 作为开发者,可在Xcode暂时退回到http协议.  开发者更改方法如下: 在Info.plist中添加App Transport Se ...

  8. windows系统下搭建linux

    1.先装虚拟机VMware Workstation(步骤参照度娘) 2.在虚拟机上装CentOS6.5Linux系统(步骤参照度娘)   3.安装SecureCRT终端仿真程序,用来登录Linux服务 ...

  9. 【转】CPU调度

    转自:http://blog.csdn.net/xiazdong/article/details/6280345 CPU调度   用于多道程序 以下先讨论对于单CPU的调度问题. 回顾多道程序,同时把 ...

  10. 如何仿写thinkphp的C方法？

    config.php代码如下: <?php return array( 'db_user'=>'root', 'db_pass'=>'root', 'db_name'=>'te ...