简单介绍一下html中div布局及其图片的链接
工具/原料
电脑
inbuilder
方法/步骤
1、打开软件，新建html文件，如图，分析图片的构成部分，是由五张图片，五行字组成。建立五个div布局，每个div包含一张图片一段字。字和图片都有超链接
2、建立一个div包含五张图片，设置属性margin：0auto；上下边界为0，左右相等。建立div5个，放置图片和字。*{padding:0;margin:0;} .news{width:1080px;height:200px;margin:0auto;}
3、.left_1{width:200px;height:150px;float:left;padding:10px;} .left_2{width:200px;height:150px;float:left;margin-top:10px;} .center{width:200px;height:150px;float:left;padding:10px;} .right_1{width:200px;height:150px;float:left;margin-top:10px;} .right_2{width:200px;height:150px;float:left;padding:10px;}
4、给图片添加超链接<divclass=&quo隋茚粟胫t;left_1"> <ahref="http多唉捋胝://news.baidu.com/"target="_blank"><imgsrc="../img/a.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="left_2"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/a1.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="center"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/a3.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="right_1"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/day02.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="right_2"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/qiu.gif"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div>
5、图片和字都加超链接。运行看一下效果。
6、<!DOCTYPEhtml><html> <挢旗扦渌;head> <metac茑霁酌绡harset="utf-8"/> <title></title> <style> *{padding:0;margin:0;} .news{width:1080px;height:200px;margin:0auto;} .left_1{width:200px;height:150px;float:left;padding:10px;} .left_2{width:200px;height:150px;float:left;margin-top:10px;} .center{width:200px;height:150px;float:left;padding:10px;} .right_1{width:200px;height:150px;float:left;margin-top:10px;} .right_2{width:200px;height:150px;float:left;padding:10px;} a{display:block;text-align:center;} a:hover{color:#00FF00;text-decoration:underline;} </style> </head> <body> <divclass="news"> <divclass="left_1"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/a.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="left_2"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/a1.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="center"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/a3.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="right_1"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/day02.jpg"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> <divclass="right_2"> <ahref="http://news.baidu.com/"target="_blank"><imgsrc="../img/qiu.gif"height="150"width="200"/></a> <ahref="baidu.com"target="_blank">图片链接</a> </div> </div> </body></html>所有代码，细节自行添加