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

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

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. npm run build 打包后（直接打包白屏），如何运行在本地查看效果（Apache服务）

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

  2. binlog2sql之MySQL数据闪回实践

    DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除错误sql后的binlog来恢复数据.此法费时费力,甚至需要停机维护 ...

  3. 论文阅读笔记二十三：Learning to Segment Instances in Videos with Spatial Propagation Network（CVPR2017）

    论文源址:https://arxiv.org/abs/1709.04609 摘要 该文提出了基于深度学习的实例分割框架,主要分为三步,(1)训练一个基于ResNet-101的通用模型,用于分割图像中的 ...

  4. cnetos 7 mariadb 集群报错分析解答

    1.故障1:通过查看/var/log/message 发现报错 2017-04-14 14:44:10 139845276428544 [ERROR] WSREP: It may not be saf ...

  5. C# Enum,Int,String的互相转换 [转]

    C# Enum,Int,String的互相转换 Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名 ...

  6. Introduction to boundary integral equations in BEM

    Boundary element method (BEM) is an effective tool compared to finite element method (FEM) for resol ...

  7. WPF中datagrid不显示滚动条问题

    WPF中DataGrid是自带滚动条的,当内容显示不下时可以使用滚动条显示.但是,开发中遇到了DataGrid一直不显示滚动条.之前也曾遇到过同类问题,再次经过查找,发现是StackPanel的原因, ...

  8. ubuntu系统更新源

    问题引入:在ubuntu上安装libmysqlclient-dev一直提示Connecting to mirrirs.cqu.edu.cn

  9. JMeter中BeanShell的实际应用

    使用Jmeter的BeanShell断言,把响应数据中的JSON跟数据库中的记录对比 很多时候我们需要把Response Data取到的 Json 字符串跟数据库里的对比,来验证接口的正确性,使用Be ...

  10. 搜狐JS查ip

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...