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

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

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. Java和C冒泡排序

    Java 示例代码: public class test { public static void main(String[] args) { String str = "321dca5&q ...

  2. vue用webpack打包时引入es2015插件

    1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...

  3. 论文阅读笔记十五：Pyramid Scene Parsing Network（CVPR2016）

    论文源址:https://arxiv.org/pdf/1612.01105.pdf tensorflow代码:https://github.com/hellochick/PSPNet-tensorfl ...

  4. JAVA 数据类型数组

    普通int: public class Array { //成员变量 private int[] data; private int size; //构造函数,传入数组的容量capacity构造Arr ...

  5. Oracle亿级数据查询处理（数据库分表、分区实战）

    大数据量的查询,不仅查询速度非常慢,而且还会导致数据库经常宕机(刚接到这个项目时候,数据库经常宕机o(╯□╰)o). 那么,如何处理上亿级的数据量呢?如何从数据库经常宕机到上亿数据秒查?仅以此篇文章作 ...

  6. jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

    jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuery MiniUI学习网址:http:// ...

  7. WPF多屏最大化

    如果计算机存在多个显示器,这时设置wpf窗口为最大化,窗口只能在主显示器中实现最大化,如果想要实现窗口拉伸至多屏,需要获取所有显示器分辨率之和.这时用到了System.Windows.SystemPa ...

  8. angular 2+ 变化检测系列一(基础概念)

    什么是变化检测? 变化检测的基本功能就是获取应用程序的内部状态(state),并且是将这种状态对用户界面保持可见.状态可以是javascript中的任何的数据结构,比如对象,数组,(数字,布尔,字符串 ...

  9. elemnt UI点击事件失效，得到tab的序号

    在用element 的tab的时候发现  事件绑定没有作用 看了官网才知到内置有回掉函数 绑定的地方是 <el-tabs></el-tabs> <template> ...

  10. Spring Boot配置文件放在jar外部

    Spring Boot程序默认从application.properties或者application.yaml读取配置,如何将配置信息外置,方便配置呢? 查询官网,可以得到下面的几种方案: 通过命令 ...