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

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

index.html

<!doctype html>

<!DOCTYPE html>

<span style="font-size:24px;">

<html>

<head>

    <meta charset="utf-8">

    <title>Book Sharing</title>

    <link rel="stylesheet" type="text/css" href="css.css">

</head>

<body >

    <div id="backtop"></div>

    <ul>

    <li><a href="#" target="_blank">首页</a></li>

    <li><a href="register.html" target="_blank">注册</a></li>

    <li><a href="logIn.html"target="_blank">登陆</a></li>

    <li><a href="#" target="_blank">馆藏资源</a></li>

    <li><a href="#" target="_blank">读者指南</a></li>

    <li ><a id="id1" href="register.html" target="_blank">馆长信箱</a></li>

    </ul>

    <br>

    <form>

        <input type="text" id="input1" placeholder="书籍名称或/作者">

    </form>

    <div class="grid-container">

    <div class="item5">

    <p>书巢是一个闲置纸质书的在线漂流平台，亦是一座去中心存储的社会化图书馆。书巢的所有藏书均来自会员捐赠，同时寄存在每个会员处，并且所有会员都可以随时借阅。在书巢你可以捐赠已看过的闲书供他人借阅，还可以借阅他人捐赠的书籍，这一切都是免费的。

    </p>

    </div>

    <div class="item6">

    <p>TA在等你来读</p>

    </div>

    <br>

    <br>

    <div class="item1">

    <a href="#" target="_blank">

    <img src="01.jpg" alt="图书" width="220px"  />

    </a>

    <p >一句话卖点：

美国著名认知心理学家加洛蒂代表作,涵盖了有关人类思维的所有基本问题

主要卖点：美国著名认知心理学家加洛蒂代表作涵盖了有关人类思维的所有基本问题与日常生活结合最紧密的认知心理学教材全面展现认知心理学对我们现实生活的重大意义多学科背景女性心理学家独特视角下的认知心理学<a href="#"target="_blank"> +MROE</a></p>

</div>

    <div class="item2">

    <a href="#" target="_blank">

    <img src="02.jpg" alt="图书" width="200px" /></a>

    <p>编辑推荐

迈尔斯的《社会心理学》持续畅销30余年，连续再版10次，版版优秀，越出越精。全球销量超过300万册，有800多万名读者利用它学习社会心理学。中文版重印了50余次，销量逾50万册。迈尔斯的《社会心理学》是中国乃至世界非常具有影响力、权威性的经典之作，可读性很强，既有科学的严谨性，又有人文的形象性，读者能在快乐阅读的同时轻松掌握社会心理学的知识。<a href="#"target="_blank"> +MROE</a></p></div>

    <div class="item3">

    <a href="#" target="_blank">

    <img src="03.jpg" alt="图书" width="200px" /></a>

    <p>

        本书作者是法国著名社会心理学家，自1894年始，写下一系列社会心理学著作，以本书最为著名；在社会心理学领域已有的著作中，最有影响的，也是这本并不很厚的《乌合之众》。作者论述在传统社会因素毁灭、工业时代巨变的基础上，“群体的时代”已经到来。书中极为精致地描述了集体心态，对人们理解集体行为的作用以及对社会心理学的思考发挥了巨大影响。《乌合之众--大众心理研究》在西方已印至第29版，其观点新颖，语言生动，是群体行为的研究者不可不读的佳作。

    <a href="#"target="_blank"> +MROE</a>

    </p></div>

    <div class="item4">

    <a href="#" target="_blank">

    <img src="04.jpg" alt="图书" width="200px" /></a>

    <p>

        编辑推荐：

《自控力》一书以凯利·麦格尼格尔博士在斯坦福大学继续教育项目开“意志力科学”为基础，吸收了心理学、神经学和经济学等学科的最新洞见，参与过这门课程的人称其能够“改变一生”。本书为读者提供了清晰的框架，讲述了什么是自控力，自控力如何发生作用，以及为何自控力如此重要。作为一名健康心理学家，凯利·麦格尼格尔博士的工作就是帮助人们管理压力，并在生活中做出积极的改变。多年来，通过观察学生们是如何控制选择的，她意识到，人们关于自控的很多看法实际上妨碍了我们取得成功。<a href="#"target="_blank"> +MROE</a>

    </p>

    </div>

    </div>

    <a href="#"target="_blank"> +更多精彩</a>

    <div id="idid"><a href="#" >Top</a></div>

</body>

</html>

logIn.html

<!doctype html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Log In</title>

    <link rel="stylesheet" type="text/css" href="logIn.css">

</head>

<body>

    <div class="login_box">

    <div class="content">

    <form method="post"  action="save.php">

    账户：

    <input type="text" name="myname"/></br>

    密码：

    <input type="password" name="pass"/></br>

    <input type="submit" value="登录"/>

    </form></div></div>

</body>

</html>

register.html

<!DOCTYPE HTML>

<HTML lang="en">

<head>

    <meta charset="    UTF-8"/>

    <title>Register</title>

</head>

<body text="green" bgcolor="rgb(13,13,13)">

    <br>

    <br>

    <p>

        <center>Book Sharing Registration</center>

    </p>

    <hr color="red">

    <center>

    <br>

    <br>

    <form action="" mathod="post">

    <label for="Email">邮箱:</label>

    <input type="Email" placeholder="请输入邮箱地址" tabindex="1" required>

    <br>

    <br>

    <label for="userName"> 用户名:</label>

    <input maxlength="12" placeholder="不超过12个字符" required>

    <br>

    <br>

    <label for="password">密码：</label>

    <input type="password" required>

    <div>

    <br>

    再次输入密码：

    <input type="password" maxlenth="16"/>

    </div>

    <br>

    性别：

    <input type="radio" name="Gender" required>男

    <input type="radio" name="Gender" required>女

    <br>

    <br>

    <label for="Tel">Tel:</label>

    <input type="Tel" required>

    <br>

    <br>

    <input type="Submit" value="提交">

    <input type="Reset" value="重置">

    </form>

</center>

</body>

</HTML>

css.css

body {

    font-size: 20px;

    background-color: #F0F8FF;

}

/*body{

      background-image:url(

http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);

      background-color：#FFFF00；

    } */

#input1{

        font-size: 33px;

        padding: 10px;

        line-height: normal;

    }

ul {

    list-style-type: none;

    margin:;

    padding:;

    overflow: hidden;

    background-color: #333;

    position: -webkit-sticky; /* Safari */

    position: sticky;

    top:;

}

li {

    float: left;

}

li:last-child {

    float: right;

}

li a {

    display: block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

li a:hover {

    background-color: #111;

}

.active {

    background-color: #4CAF50;

}

.grid-container {

  display: grid;

  grid-template-columns: auto auto auto;

  grid-gap: 10px;

  padding: 10px;

}

.grid-container p{

  font-size: 20px;

}

.grid-container > div {

  text-align: left;

  padding: 20px 0;

  font-size: 30px;

}

.item5  {

  grid-column: 1 / 4;

}

.item6  {

  grid-column: 1 / 3;

}

/*@media only screen and (max-width: 500px) {

  .item1 { grid-area: 1 / span 3 / 2 / 4; }

  .item2 { grid-area: 3 / 3 / 3 / 4; }

  .item3 { grid-area: 2 / 1 / 2 / 2; }

  .item4 { grid-area: 2 / 2 / span 2 / 3; }

}*/

#idid a { /* back to top button */

    position: fixed;

    bottom: 0px; /* 小按钮到浏览器底边的距离 */

    right: 50px; /* 小按钮到浏览器右边框的距离 */

    color: #333; /* 小按钮中文字的颜色 */

    z-index:;

    background: #cfcfcf; /* 小按钮底色 */

    padding: 10px; /* 小按钮中文字到按钮边缘的距离 */

    border-radius: 4px; /* 小按钮圆角的弯曲程度（半径）*/

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    font-weight: normal; /* 小按钮中文字的粗细 */

    text-decoration: none !important;

}

#idid a:hover { /* 小按钮上有鼠标悬停时 */

    background: #333; /* 小按钮的底色 */

    color: #fff; /* 文字颜色 */

}

logIn.css

body{

            background-image:url(images/05.jpg);

            background-repeat: no-repeat;

            background-size:100%;

        }

        .login_box::before{

            content:"";

            /*-webkit-filter: opacity(50%);

            filter: opacity(50%); */

            background-image:url(images/love.jpg);

            opacity:0.5;/*//透明度设置*/

            z-index:-1;

            background-size:500px 300px;

            width:500px;

            height:300px;

            position:absolute;

            /*//一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层*/

            top:0px;

            left:0px;

            border-radius:40px;

        }

        .login_box{

            position:fixed;

            left:50%;

            top:200px;

            width:500px;

            height:300px;

            margin-left:-250px;

            border-radius:40px;

            box-shadow: 10px 10px 5px #888;

            border:1px solid #666;

            text-align:center;

        }

        form{

            display:inline-block;

            margin-top:100px;

        }

        input{

            display:block;

            width:250px;

            height:30px;

            background-color: #888;

            border:1px solid #fee;

            outline:none;

            border-radius:10px;

        }

        input[type="submit"]{

            width:100px;

            height:30x;

            margin-left: 70px;

            background-color: #ccc;

        }

        span{

            color:red;

            font-size:15px;

        }

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. linux安装siege

    siege安装笔记 本文介绍centos和ubuntu安装方法 centos安装 下载: [root@ siege-4.0.4]# wget http://download.joedog.org/si ...

  2. HTMLTestRunner 美化版本

    前言 ​最近小伙伴们在学玩python,,看着那HTMLTestRunner生成的测试报告,左右看不顺眼,终觉得太丑.搜索了一圈没有找到合适的美化报告,于是忍不住自已动手进行了修改,因习惯python ...

  3. C#本质论第四版-1，抄书才能看下去，不然两三眼就看完了，一摞书都成了摆设。抄下了记忆更深刻

    C#本质论第四版-1,抄书才能看下去,不然两三眼就看完了,一摞书都成了摆设.抄下了记忆更深刻 本书面向的读者 写作本书时,我面临的一个挑战是如何持续吸引高级开发人员眼球的同时,不因使用assembly ...

  4. NHibernate：no persister for 异常

    几种原因: 1.配置文件后缀名写错 mapping file 必须是.hbm.xml结尾 2.Web.config配置里面引用实体 <session-factory> .......... ...

  5. Dubbo 服务集群容错配置

    Dubbo集群容错是靠配置cluster属性来做 支持改属性的标签为<dubbo:service>,<dubbo:referece>,<dubbo:consumer> ...

  6. excel追加数据

    原本是想通过读取已存在的文件的行然后直接添加保存,发现结果会被覆盖. 后来查找方法发现需要复制原表. 函数参数: list:要添加的数据 filename:目标文件 sheet_index:默认表的第 ...

  7. 获取Form表单数据转化成JSON对象

    $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() ...

  8. Java中常见的排序方式-快速排序(升序)

    [基本思想] 快速排序在元素较多的情况下,排序效率是相当高的.其基本思想是这样: 假设数组为int[] arr = { 49, 38, 65, 97, 76, 13, 27, 22, 26, 41, ...

  9. Redis数据库 02事务| 持久化| 主从复制| 集群

    1. Redis事务 Redis不支持事务,此事务不是关系型数据库中的事务: Redis事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的 ...

  10. mysql 分区 1526错误

    mysql 分区 原文:http://fyzjhh.blog.163.com/blog/static/1694442262012544429953/ 参考:https://bugs.mysql.com ...