到现在还不知道为什么我设置的背景图片为什么没有效果，明明是按照网上的教程来的，但。。。。。。。。。。。好气哦，，，，，，，，，嗯哼嗯哼嗯哼
说实话：自己写的网页真丑 。。。。。真丑
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: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } 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- 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: 1000; 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; }