到现在还不知道为什么我设置的背景图片为什么没有效果,明明是按照网上的教程来的,但。。。。。。。。。。。好气哦,,,,,,,,,嗯哼嗯哼嗯哼

说实话:自己写的网页真丑   。。。。。真丑

index.html

  1. <!doctype html>
  2. <!DOCTYPE html>
  3. <span style="font-size:24px;">
  4. <html>
  5. <head>
  6. <meta charset="utf-8">
  7. <title>Book Sharing</title>
  8. <link rel="stylesheet" type="text/css" href="css.css">
  9. </head>
  10. <body >
  11. <div id="backtop"></div>
  12. <ul>
  13.  
  14. <li><a href="#" target="_blank">首页</a></li>
  15. <li><a href="register.html" target="_blank">注册</a></li>
  16. <li><a href="logIn.html"target="_blank">登陆</a></li>
  17. <li><a href="#" target="_blank">馆藏资源</a></li>
  18. <li><a href="#" target="_blank">读者指南</a></li>
  19. <li ><a id="id1" href="register.html" target="_blank">馆长信箱</a></li>
  20. </ul>
  21. <br>
  22.  
  23. <form>
  24. <input type="text" id="input1" placeholder="书籍名称或/作者">
  25. </form>
  26.  
  27. <div class="grid-container">
  28. <div class="item5">
  29. <p>书巢是一个闲置纸质书的在线漂流平台,亦是一座去中心存储的社会化图书馆。书巢的所有藏书均来自会员捐赠,同时寄存在每个会员处,并且所有会员都可以随时借阅。在书巢你可以捐赠已看过的闲书供他人借阅,还可以借阅他人捐赠的书籍,这一切都是免费的。
  30. </p>
  31. </div>
  32. <div class="item6">
  33. <p>TA在等你来读</p>
  34. </div>
  35. <br>
  36. <br>
  37. <div class="item1">
  38. <a href="#" target="_blank">
  39. <img src="01.jpg" alt="图书" width="220px" />
  40. </a>
  41. <p >一句话卖点:
  42. 美国著名认知心理学家加洛蒂代表作,涵盖了有关人类思维的所有基本问题
  43. 主要卖点:美国著名认知心理学家加洛蒂代表作涵盖了有关人类思维的所有基本问题与日常生活结合最紧密的认知心理学教材全面展现认知心理学对我们现实生活的重大意义多学科背景女性心理学家独特视角下的认知心理学<a href="#"target="_blank"> +MROE</a></p>
  44. </div>
  45. <div class="item2">
  46. <a href="#" target="_blank">
  47. <img src="02.jpg" alt="图书" width="200px" /></a>
  48. <p>编辑推荐
  49. 迈尔斯的《社会心理学》持续畅销30余年,连续再版10次,版版优秀,越出越精。全球销量超过300万册,有800多万名读者利用它学习社会心理学。中文版重印了50余次,销量逾50万册。迈尔斯的《社会心理学》是中国乃至世界非常具有影响力、权威性的经典之作,可读性很强,既有科学的严谨性,又有人文的形象性,读者能在快乐阅读的同时轻松掌握社会心理学的知识。<a href="#"target="_blank"> +MROE</a></p></div>
  50. <div class="item3">
  51. <a href="#" target="_blank">
  52. <img src="03.jpg" alt="图书" width="200px" /></a>
  53. <p>
  54. 本书作者是法国著名社会心理学家,自1894年始,写下一系列社会心理学著作,以本书最为著名;在社会心理学领域已有的著作中,最有影响的,也是这本并不很厚的《乌合之众》。作者论述在传统社会因素毁灭、工业时代巨变的基础上,“群体的时代”已经到来。书中极为精致地描述了集体心态,对人们理解集体行为的作用以及对社会心理学的思考发挥了巨大影响。《乌合之众--大众心理研究》在西方已印至第29版,其观点新颖,语言生动,是群体行为的研究者不可不读的佳作。
  55. <a href="#"target="_blank"> +MROE</a>
  56. </p></div>
  57. <div class="item4">
  58. <a href="#" target="_blank">
  59. <img src="04.jpg" alt="图书" width="200px" /></a>
  60. <p>
  61. 编辑推荐:
  62. 《自控力》一书以凯利·麦格尼格尔博士在斯坦福大学继续教育项目开“意志力科学”为基础,吸收了心理学、神经学和经济学等学科的最新洞见,参与过这门课程的人称其能够“改变一生”。本书为读者提供了清晰的框架,讲述了什么是自控力,自控力如何发生作用,以及为何自控力如此重要。作为一名健康心理学家,凯利·麦格尼格尔博士的工作就是帮助人们管理压力,并在生活中做出积极的改变。多年来,通过观察学生们是如何控制选择的,她意识到,人们关于自控的很多看法实际上妨碍了我们取得成功。<a href="#"target="_blank"> +MROE</a>
  63. </p>
  64. </div>
  65.  
  66. </div>
  67. <a href="#"target="_blank"> +更多精彩</a>
  68. <div id="idid"><a href="#" >Top</a></div>
  69.  
  70. </body>
  71. </html>

logIn.html

  1. <!doctype html>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Log In</title>
  7. <link rel="stylesheet" type="text/css" href="logIn.css">
  8. </head>
  9. <body>
  10. <div class="login_box">
  11. <div class="content">
  12. <form method="post" action="save.php">
  13. 账户:
  14. <input type="text" name="myname"/></br>
  15. 密码:
  16. <input type="password" name="pass"/></br>
  17. <input type="submit" value="登录"/>
  18. </form></div></div>
  19. </body>
  20. </html>

register.html

  1. <!DOCTYPE HTML>
  2. <HTML lang="en">
  3. <head>
  4. <meta charset=" UTF-8"/>
  5. <title>Register</title>
  6.  
  7. </head>
  8. <body text="green" bgcolor="rgb(13,13,13)">
  9. <br>
  10. <br>
  11. <p>
  12. <center>Book Sharing Registration</center>
  13. </p>
  14. <hr color="red">
  15. <center>
  16. <br>
  17. <br>
  18. <form action="" mathod="post">
  19. <label for="Email">邮箱:</label>
  20. <input type="Email" placeholder="请输入邮箱地址" tabindex="1" required>
  21. <br>
  22. <br>
  23. <label for="userName"> 用户名:</label>
  24. <input maxlength="12" placeholder="不超过12个字符" required>
  25. <br>
  26. <br>
  27. <label for="password">密码:</label>
  28. <input type="password" required>
  29. <div>
  30. <br>
  31. 再次输入密码:
  32. <input type="password" maxlenth="16"/>
  33. </div>
  34. <br>
  35. 性别:
  36. <input type="radio" name="Gender" required>
  37. <input type="radio" name="Gender" required>
  38. <br>
  39. <br>
  40. <label for="Tel">Tel:</label>
  41. <input type="Tel" required>
  42. <br>
  43. <br>
  44. <input type="Submit" value="提交">
  45. <input type="Reset" value="重置">
  46. </form>
  47. </center>
  48. </body>
  49. </HTML>

css.css

  1. body {
  2. font-size: 20px;
  3. background-color: #F0F8FF;
  4. }
  5. /*body{
  6. background-image:url(
  7. http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
  8. background-color:#FFFF00;
  9. } */
  10. #input1{
  11. font-size: 33px;
  12. padding: 10px;
  13. line-height: normal;
  14. }
  15. ul {
  16. list-style-type: none;
  17. margin:;
  18. padding:;
  19. overflow: hidden;
  20. background-color: #333;
  21. position: -webkit-sticky; /* Safari */
  22. position: sticky;
  23. top:;
  24. }
  25. li {
  26. float: left;
  27.  
  28. }
  29. li:last-child {
  30. float: right;
  31. }
  32. li a {
  33. display: block;
  34. color: white;
  35. text-align: center;
  36. padding: 14px 16px;
  37. text-decoration: none;
  38. }
  39.  
  40. li a:hover {
  41. background-color: #111;
  42. }
  43.  
  44. .active {
  45. background-color: #4CAF50;
  46. }
  47.  
  48. .grid-container {
  49. display: grid;
  50. grid-template-columns: auto auto auto;
  51. grid-gap: 10px;
  52. padding: 10px;
  53.  
  54. }
  55. .grid-container p{
  56. font-size: 20px;
  57. }
  58. .grid-container > div {
  59. text-align: left;
  60. padding: 20px 0;
  61. font-size: 30px;
  62. }
  63. .item5 {
  64. grid-column: 1 / 4;
  65. }
  66. .item6 {
  67. grid-column: 1 / 3;
  68. }
  69. /*@media only screen and (max-width: 500px) {
  70. .item1 { grid-area: 1 / span 3 / 2 / 4; }
  71. .item2 { grid-area: 3 / 3 / 3 / 4; }
  72. .item3 { grid-area: 2 / 1 / 2 / 2; }
  73. .item4 { grid-area: 2 / 2 / span 2 / 3; }
  74. }*/
  75.  
  76. #idid a { /* back to top button */
  77. position: fixed;
  78. bottom: 0px; /* 小按钮到浏览器底边的距离 */
  79. right: 50px; /* 小按钮到浏览器右边框的距离 */
  80. color: #333; /* 小按钮中文字的颜色 */
  81. z-index:;
  82. background: #cfcfcf; /* 小按钮底色 */
  83. padding: 10px; /* 小按钮中文字到按钮边缘的距离 */
  84. border-radius: 4px; /* 小按钮圆角的弯曲程度(半径)*/
  85. -moz-border-radius: 4px;
  86. -webkit-border-radius: 4px;
  87. font-weight: normal; /* 小按钮中文字的粗细 */
  88. text-decoration: none !important;
  89. }
  90. #idid a:hover { /* 小按钮上有鼠标悬停时 */
  91. background: #333; /* 小按钮的底色 */
  92. color: #fff; /* 文字颜色 */
  93. }

logIn.css

  1. body{
  2. background-image:url(images/05.jpg);
  3. background-repeat: no-repeat;
  4. background-size:100%;
  5. }
  6. .login_box::before{
  7. content:"";
  8. /*-webkit-filter: opacity(50%);
  9. filter: opacity(50%); */
  10. background-image:url(images/love.jpg);
  11. opacity:0.5;/*//透明度设置*/
  12. z-index:-1;
  13. background-size:500px 300px;
  14. width:500px;
  15. height:300px;
  16. position:absolute;
  17. /*//一定要设置position:absolute,这样才能设置z-index,让背景处于内容的下一层*/
  18. top:0px;
  19. left:0px;
  20. border-radius:40px;
  21. }
  22. .login_box{
  23. position:fixed;
  24. left:50%;
  25. top:200px;
  26. width:500px;
  27. height:300px;
  28. margin-left:-250px;
  29. border-radius:40px;
  30. box-shadow: 10px 10px 5px #888;
  31. border:1px solid #666;
  32.  
  33. text-align:center;
  34. }
  35. form{
  36. display:inline-block;
  37. margin-top:100px;
  38. }
  39. input{
  40. display:block;
  41. width:250px;
  42. height:30px;
  43. background-color: #888;
  44. border:1px solid #fee;
  45. outline:none;
  46. border-radius:10px;
  47. }
  48. input[type="submit"]{
  49. width:100px;
  50. height:30x;
  51. margin-left: 70px;
  52. background-color: #ccc;
  53. }
  54. span{
  55. color:red;
  56. font-size:15px;
  57. }

Book Sharing的更多相关文章

  1. 伪共享(false sharing),并发编程无声的性能杀手

    在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能异步处理框架 Disruptor ...

  2. Salesforce的sharing Rule 不支持Lookup型字段解决方案

    Salesforce 中 sharing rule 并不支持Look up 字段 和 formula 字段.但在实际项目中,有时会需要在sharing rule中直接取Look up型字段的值,解决方 ...

  3. [Erlang 0127] Term sharing in Erlang/OTP 上篇

    之前,在 [Erlang 0126] 我们读过的Erlang论文 提到过下面这篇论文: On Preserving Term Sharing in the Erlang Virtual Machine ...

  4. 跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

    在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...

  5. 006_Salesforce Sharing 使用说明

    Salesforce Sharing 使用说明 背景说明:Salesforce共享实施记录和其它数据时,需要员工之间共享或多个用户在一个组织间的共享.然而,共享这些数据是有风险的,尤其是当它涉及到敏感 ...

  6. salesforce 零基础开发入门学习(十二)with sharing 、without sharing 、无声明区别

    在salesforce中,声明类大概可以分成三类:分别是可以声明为with sharing,without sharing,以及两者均不声明. public with sharing class A ...

  7. Cross-Origin Resource Sharing协议介绍

    传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚 ...

  8. [转]Stop Sharing Session State between Multiple Tabs of Browser

    本文转自:http://jinaldesai.net/stop-sharing-session-state-between-multiple-tabs-of-browser/ Scenario: By ...

  9. POJ - 1666 Candy Sharing Game

    这道题只要英语单词都认得,阅读没有问题,就做得出来. POJ - 1666 Candy Sharing Game Time Limit: 1000MS Memory Limit: 10000KB 64 ...

  10. Adding AirDrop File Sharing Feature to Your iOS Apps

    http://www.appcoda.com/ios7-airdrop-programming-tutorial/ Adding AirDrop File Sharing Feature to You ...

随机推荐

  1. Java基础之多线程框架

    一.进程与线程的区别 1.定义: 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比 ...

  2. mysql登录报错:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

    在MySQL登录时出现Access denied for user 'root'@'localhost' (using password: YES) 拒绝访问 对于出现拒绝访问root用户的解决方案错 ...

  3. 通过iostat来查看linux硬盘IO性能|实例分析

    iostat查看linux硬盘IO性能 rrqm/s: 每秒进行 merge 的读操作数目.即 delta(rmerge)/s wrqm/s: 每秒进行 merge 的写操作数目.即 delta(wm ...

  4. (转)CSS3之pointer-events(屏蔽鼠标事件)属性说明

    我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的. 但有时 ...

  5. animate方法使用总结

    <!DOCTYPE html><html lang="en" class="loading"><head> <meta ...

  6. MyBatis mysal 日报表,月,年报表的统计

    mysql 按日.周.月.年统计sql语句整理,实现报表统计可视化 原文地址:http://blog.csdn.net/u010543785/article/details/52354957 最近在做 ...

  7. 微信小程序--代码构成---WXSS 样式

    WXSS 样式 WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 新增了尺寸单位.在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一 ...

  8. python--使用双向队列结构检查回文

    这个简单,队列可两边进两边出. # coding = utf-8 # 双向进出队列 class Deque: def __init__(self): self.items = [] def is_em ...

  9. [转] Javascript 原型链

    1. 类 在C或者Java里,int a;定义了一个int类型的变量a.其中int是类型的名字,a是具体的变量. Javascript 模仿自 Java, 有一部分面向对象编程的部分.在面向对象的编程 ...

  10. HTML文本格式化与HTML 超链接

    文本格式化<b>加粗文本</b><i>斜体文本</i><code>电脑自动输出</code><sub> 下标< ...