php实验一
今天把php的第一个实验给做了，下面图片是我做出来的效果
源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>Fu治齐吖</title> <link type="text/css" rel="stylesheet" href="index.css"> </head> <body> <div class="wrapper" style="background-image: url(image/bgg.jpg);overflow: scroll;overflow-x: scroll;overflow-y: scroll" > <div class="first"> <img src="image/headlike.jpg" style="float: left"> <ul> <li><a href="https://www.cnblogs.com/zhiqi2625/" target="_blank"X>首页</a></li> <li><a href="#">班级</a></li> <li><a href="#">个人中心</a></li> <li><a href="#">帮助</a></li> <li><a href="#">设置</a></li> </ul> </div> <div class="parent"> <hr> <div class="left"> <br> <img src="image/fuzq.png"> </div> <div class="center"> <div class="one"> <div class="oneimg"> <a href="https://www.bilibili.com/video/BV1qv4y1o79t?spm_id_from=333.337.search-card.all.click" target="_blank" title="黑马程序员JavaWeb"><img src="image/javawen.webp" style="vertical-align: text-top"></a> </div> <div class="onetext"> <a href="https://www.bilibili.com/video/BV1qv4y1o79t?spm_id_from=333.337.search-card.all.click" style="text-overflow: ellipsis" target="_blank">黑马程序员JavaWeb全套基础教程，java web从入门到项目实战（IDEA版javaweb）</a> </div> </div> <div class="two"> <div class="twoimg"> <a href="https://www.bilibili.com/video/BV13g41157hK?p=2&spm_id_from=333.880.my_history.page.click" target="_blank" title="黑马程序员JavaWeb"><img src="image/suanfa.webp" style="vertical-align: text-top"></a> </div> <div class="twotext"> <a href="https://www.bilibili.com/video/BV13g41157hK?p=2&spm_id_from=333.880.my_history.page.click" style="text-overflow: ellipsis" target="_blank">一周刷爆LeetCode,算法大神左神（左程云）耗时100天打造算法与数据结构基础到高级全家桶教程</a> </div> </div> <div class="thr"> <div class="thrimg"> <a href="https://www.bilibili.com/video/BV1A7411k7mv?spm_id_from=333.880.my_history.page.click" target="_blank" title="黑马程序员JavaWeb"><img src="image/cpp.webp" style="vertical-align: text-top"></a> </div> <div class="thrtext"> <a href="https://www.bilibili.com/video/BV1A7411k7mv?spm_id_from=333.880.my_history.page.click" style="text-overflow: ellipsis" target="_blank">C++ Primer 高级（STL及算法）</a> </div> </div> <div class="four"> <div class="fourimg"> <a href="https://www.bilibili.com/video/BV1bE41187QF?spm_id_from=333.880.my_history.page.click" target="_blank" title="黑马程序员JavaWeb"><img src="image/nanyanyan.webp" style="vertical-align: text-top"></a> </div> <div class="fourtext"> <a href="https://www.bilibili.com/video/BV1bE41187QF?spm_id_from=333.880.my_history.page.click" style="text-overflow: ellipsis" target="_blank">【难言六战神】这次，我想做给自己看！挑战六战神全纪实！</a> </div> </div> </div> <div class="right">  <img src="image/dansha.png" height=620px class="c"> </div> </div> <hr> <hr> <div class="bottom"> <ul> <li><a href="#">线上帮助</a></li> <li><a href="#">语言文字</a></li> <li><a href="#">邮箱服务</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">关于我们</a></li> <br> </ul> </div> <div class="div_foot" style="font-size: 9px"> 齐垣文化有限公司©All Right Reserved. </div> </div> </body> </html>
css：
a{ text-decoration: none; } a:link{color: purple;} a:visited{color: purple;} a:hover{color: white;} a:active{color: yellow;} body{ } .wrapper{ position:fixed; top: 0; left: 0; width:100%; height:100%; z-index:-10; zoom: 1; background-color: #fff; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } div ul{ list-style: none; } .first li{ margin-top: 85px; margin-left: 80px; width:auto; font-size: 20px; float: left; font:bold; line-height: 24px; color: black; } .first{ width: 100%; height:150px; overflow: hidden; margin: 0 auto; } .first img{ margin-top: 50px; margin-left: 300px; width: 80px; height: 80px; border-radius: 50%; overflow: auto; } .left{ width: 25%; height: auto; float: left; } .center{ width: 55%; height: auto; float: left; } .right{ width: 20%; height: auto; float: right; } .parent { width: 100%; height: auto; } .one{ margin:0; border: 1px,solid; width: auto; height: 160px; background: rgba(255,255,255,0.3); } .oneimg{ width: 0px; margin-left:10px; display: inline-block; vertical-align: middle; float: left; } .onetext{ width:500px; margin-left: 290px; display: inline-block; float: left; overflow: hidden; } .two{ margin:0; border: 1px,solid; width: auto; height: 160px; background: rgba(255,255,255,0.3); } .twoimg{ width: 0px; margin-left:10px; display: inline-block; vertical-align: middle; float: left; } .twotext{ width:500px; margin-left: 290px; display: inline-block; float: left; } .thr{ margin:0; border: 1px,solid; width: auto; height: 160px; background: rgba(255,255,255,0.3); } .thrimg{ width: 0px; margin-left:10px; display: inline-block; vertical-align: middle; float: left; } .thrtext{ width:500px; margin-left: 290px; display: inline-block; float: left; } .four{ margin:0; border: 1px,solid; width: auto; height: 160px; background: rgba(255,255,255,0.3); } .fourimg{ width: 0px; margin-left:10px; display: inline-block; vertical-align: middle; float: left; } .fourtext{ width:500px; margin-left: 290px; display: inline-block; float: left; } .left img{ margin-left: 80px; margin-top: 20px; height:600px; } .c{ margin-left: 100px; margin-top: 20px; } .bottom{ width:100%; margin:auto; } .bottom ul{ display:table; margin:10px auto; } .bottom ul li{ text-align:center; float:left; *float:none; *display:inline; *zoom:1; margin-right:5px; } .div_foot { position: absolute; height: 10px; text-align: center; line-height: 10px; width: 100%; }
排版里还有好多的不和谐。。。
在这次实验之前，一直以为自己理解好了html和css，但是事实是理解的并不是很好，例如，div的嵌套，就没有想象中的容易，中途还要想好久，一个盒子套着一个盒子就把自己套乱了，当然，也认识到了自己的欠缺，经验的不足，好多想做的内容都是心有余而力不足，就像是页眉的位置，因为是刚开始弄得，一些bug一直影响着后面的内容，导致后面每进一步都异常困难，这期间查阅了大量的资料，同时感叹时代的力量，这放在以前的时候应该是很难得，也坚定了我继续学习下去的信心，当自己完全做完的时候，有快乐，也有遗憾！
版权声明：本文为付治齐吖原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。