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

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

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. 将现有项目添加到TFS中

    假设在Projects文件夹中有一个名为WpfApplication1的项目需要添加到TFS. 我们可以这样做: 1.打开视图->团队资源管理器,点击管理连接,在弹出的窗口中选择服务器和团队项目 ...

  2. 一脸懵逼学习HBase的搭建（注意HBase的版本）

    1:Hdfs分布式文件系统存的文件,文件存储. 2:Hbase是存储的数据,海量数据存储,作用是缓存的数据,将缓存的数据满后写入到Hdfs中. 3:hbase集群中的角色: ().一个或者多个主节点, ...

  3. context日志

    class Program { static void Main(string[] args) { List<wolf_example> Listw; using (var ctx = n ...

  4. Git和Github入门教程

    一.常用命令 所有命令前都要加 git,如表中的init是指 git init.点击命令可直接跳转至本文第一次使用的地方.以下命令都在命令行里执行. 1.本地命令 行为 命令 备注 初始化 init ...

  5. [转] 前后端分手大师——MVVM 模式

    之前对 MVVM 模式一直只是模模糊糊的认识,正所谓没有实践就没有发言权,通过这两年对 Vue 框架的深入学习和项目实践,终于可以装B了有了拨开云雾见月明的感觉. Model–View–ViewMod ...

  6. javascript 相关小的知识点集合

    本文主要是列出一些javascript 相关的,不限于javascript的,容易记错或者遗忘的小知识,小技巧. 1.javascript中的false 在 JavaScript,常见的 false ...

  7. python全栈开发day101-认证组件、权限组件、频率组件

    1.Mixins类分析 这两个函数都在GenericAPIView下,这就是为什么必须搭配继承GenericAPIView的原因. 这两个主要是get_object()较为复杂. 2.认证组件源码分析 ...

  8. python 类、函数的引用

    类的引用 一.同级目录引用: from 文件名 import 类名     如果报错,原因基本上就是:pycharm不会将当前文件目录自动加入自己的sourse_path.     解决方法:     ...

  9. Codeforces 911F Tree Destruction

    Tree Destruction 先把直径扣出来, 然后每个点都和直径的其中一端组合, 这样可以保证是最优的. #include<bits/stdc++.h> #define LL lon ...

  10. HDU1507 Uncle Tom's Inherited Land* 二分图匹配 匈牙利算法 黑白染色

    原文链接http://www.cnblogs.com/zhouzhendong/p/8254062.html 题目传送门 - HDU1507 题意概括 有一个n*m的棋盘,有些点是废的. 现在让你用1 ...