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

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

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. SSM框架接收处理安卓端的json数据

    最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...

  2. 使用powerdesigner导入sql脚本，生成物理模型

    有些时候我们的powerdesigner以jdbc的形式链接本地数据库可能会失败,这时候我觉得从sql文件中生成物理模型是个很不错的方法 1.打开powerdesigner,文件->->r ...

  3. ActiveSync中的http内容组织

    1. POST Request 数据格式 Request-line Request-headers CR/LF Request Body Request-line POST <URI> H ...

  4. SHELL打印两个日期之间的日期

    SHELL打印两个日期之间的日期 [root@umout shell]# cat date_to_date.sh THIS_PATH=$(cd `dirname $0`;) cd $THIS_PATH ...

  5. cPanel中添加设置附加域(Addon domain)

    本文介绍cPanel设置附加域(addon domain)来实现一个空间做多个网站的方法. 附加域(addon domain) 作用:通过它可以实现添加 新的顶级域名绑定到主机,从而创建新的站点.例如 ...

  6. vue.js学习：1.0到2.0的变化（区别）

    一.生命周期 1.1.0的生命周期: 周期 解释 init 组件刚刚被创建,但Data.method等属性还没被计算出来 created 组件创建已经完成,但DOM还没被生成出来 beforeComp ...

  7. Android设备一对多录屏直播--(UDP组播连接,Tcp传输)

    原文:https://blog.csdn.net/sunmmer123/article/details/82734245 近期需要学习流媒体知识,做一个Android设备相互投屏Demo,因此找到了这 ...

  8. Centos7编译安装GCC7.2

    通常编译的时候可能需要新版本的gcc,本文就说明下基于低版本的gcc升级为gcc7.2 wget 'http://mirrors-usa.go-parts.com/gcc/releases/gcc-7 ...

  9. （2）.NET CORE微服务 Micro-Service ---- .NetCore启动配置 和 .NetCoreWebApi

    什么是.Net Core?.Net Core是微软开发的另外一个可以跨Linux.Windows.mac等平台的.Net.Net Core相关知识看文章地步dotnet dllname.dll 运行P ...

  10. Factorial Trailing Zeroes Add to List

    https://leetcode.com/problems/factorial-trailing-zeroes/#/description 想到了要找2x5:也想到了只要找5,剩下的2 管够.也想到了 ...