请问老师,图中按钮要怎么设置才能达到作业图中的效果呢?
<div class="ab-bottom"> <table> <tr> <td> <img src="images/b1.jpg"/> </td> <td class="introduction"><h3>Library</h3> <span>Lorem lpsum is simply dumimy text of the printing and typesetting indtustry</span> Lorem lpsum has been the incustry slstancdard dummy text ever since the 1500s wthen an unknown prirter topk a galley of type and scrambied it to nke ygpe specimen book. <input type="button" name="button" value="EXPLORE" /> </td> <td> <img src="images/b2.jpg"/> </td> <td class="introduction"><h3>Computer</h3><span>Lab Lorem Ipsum is simply dummy text of the printing and typesetting industry</span> Lorem lpsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. <input type="button" name="button" value="EXPLORE" /> </td> </tr> <tr> <td class="introduction"><h3>Conference</h3><span> Hall Lorem lpsum is simply dummy text of the printing and typesetting industry</span> Lorem lpsum has been he industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. <input type="button" name="button" value="EXPLORE" /> </td> <td> <img src="images/b3.jpg"/> </td> <td class="introduction"><h3>Play Ground</h3><span> lorem lpsum is simply dummy text of the printing and typesetting industry </span>fpum has been the ndustry's standard dummy text ever sdncethe 1500s when an unknown printer fookeostey of type and scrambledit to make a type peelmen book <input type="button" name="button" value="EXPLORE" /> </td> <td> <img src="images/b4.jpg"/> </td> </tr> </table> </div>
0
收起
正在回答
4回答
可以把input的默认样式去掉,然后设置就可以了,参考:
自己测试下,这只是针对于name为button的input标签,自己可以结合css样式修改下,祝学习愉快~~
爱学习的小若若
2018-07-31 17:38:26
*{margin:0;padding: 0; font-family: "微软雅黑";} .header{ width:100%; height:100px; background-color: #07CBC9;} .header .logo{ width:180px; height:80px; margin-top: 10px; margin-left: 10%; float: left; } .header ul li{ float: right; margin-right: 3%; list-style: none; line-height: 100px; color: white; } .header ul li:hover{ background-color: black; } .banner{ width:100%; height:600px;} .banner .ban-pic{ width: 100%; height: 600px; } .banner .ban-pic img{ width: 100%; height: 600px; } .banner .toplayer{ width: 100%; height: 600px; position: absolute; top: 100px; left: 0; background-color: black; opacity: 0.1; } .banner .message{ width: 400px; height: 400px; position: absolute; top: 200px; left: 50%; margin-left: -200px; } .banner .message form input{ display: block; margin: 30px auto; width: 400px; height: 40px; line-height: 40px; border: 2px white solid; background-color: black; opacity: 0.5; color: white; font-weight: bolder; padding-left: 10px; font-size: 16px; } .banner .message form input:hover{ border-color: #07CBC9; } .banner .message form .special{ height: 100px; } .banner .message form .button{ width: 200px; } .banner .message form .button:hover{ background-color: #13E1D0; } .line{ width: 20px; height: 2px; background-color: #07CBC9; margin: 0 auto 10px auto; } .main{ width: 100%; height: 1900px; position: absolute; top: 700px; } .main .about{ width: 100%; height: 500px; } .main .about .ab-top{ width: 100%; height: 160px; text-align: center; font-size: 12px; } .main .about .ab-top h1{ height: 60px; line-height: 60px; } .main .about .ab-middle{ width: 800px; margin: 0 auto; } .main .about .ab-middle .left{ width: 130px; } .main .about .ab-middle .middle{ width: 460px; } .main .about .ab-middle .right{ width: 210px; } .left,.middle,.right{ float: left; min-height: 400px; } .clear{clear:both;} .left h4{ text-align: center; margin-top: 5px; } .middle img{ width: 460px; } .right .border{ width: 150px; height: 100px; border: 2px #C3F3F2 solid; margin-left: 10px; margin-bottom: 12px; } .right .border h5{ text-align: center; margin-bottom: 20px; margin-top: 15px; font-size: 16px; } .right .border p{ text-align: center; } .main .about .toplayer{ width: 230px; height: 200px; position: absolute; top: 230px; left: 370px; border: 1px gray solid; padding: 5px 10px; } input{ margin-top: 20px; background-color: black; color: white; width: 80px; height: 30px; margin-left: 40%; } .submit{ margin-left: 1%; } input:hover{ border: 2px black solid; background-color: #07CBC9; } .main .about .ab-bottom{ width: 100%; height: 608px; background-color:#07CBC9; } .main .about .ab-bottom table{ width: 100%; height: 600px; color: white; } .main .about .ab-bottom table tr .introduction{ padding: 0 10px 10px 5px; line-height: 20px; font-size: 15px; } .main .about .ab-bottom table img{ width: 100%; height: 300px; } .main .about .ab-bottom table span{ font-size: 20px; line-height: 30px; } .main .gallery{ width: 100%; height: 1000px; position: absolute; top: 1160px; } .main .gallery .ga-top{ width: 100%; height: 160px; text-align: center; font-size: 12px; } .main .gallery .ga-top h1{ height: 60px; line-height: 60px; } .main .gallery .ga-bottom{ width: 100%; height: 580px; } .main .gallery .ga-bottom table{ width: 960px; height: 560px; margin: 0 auto; } .main .gallery .ga-bottom table img{ width: 300px; height: 220px; } .main .gallery .ga-bottom table .word{ background-color: black; color: white; height: 40px; width:280px; line-height: 40px; padding-left: 20px; margin-top: -4px; } .footer{ width: 100%; height: 100px; line-height: 100px; text-align: center; background-color: #07CBC9; position: absolute; top: 2600px; color: white; }
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星