请问老师,图中按钮要怎么设置才能达到作业图中的效果呢?
<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 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程




恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星