操作方法
先写好html代码，把图片引入网页。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>cssstyle</title> </head> <body> <div class='div1'> <ul class="faceul"> <li><img src="mv.jpg" /></li> </ul> </div> </body> </html>
运行网页程序，可以看到图片显示了。现在通过css来将图片设定固定的宽度高度，并使图片有边框。
我们先写好css代码： .div{ width:500px; height:300px; border:1px solid red; } .faceul{ background:pink; width:300px; height:200px; border:1px solid blue; } .faceul img{ width:60px; margin:10px 20px; border:1px solid black; } .faceul li{ list-style-type:none; }
这时我们引入css文件，在html文件<head></head>标记对加入如下代码： <link rel="stylesheet" type="text/css" href="a.css"> 我们这里把css代码命名为a.css
这时会发现图片位置、边框、背景等都有了，如图：
至此，控制页面中图片位置及大小实现了，有需要的伙伴可以了解下。