
1、构思:一张大图片、一张小图片要形成什么意境,要事先构思好。
2、获取图片地址:如果自己上传,完成后点显示源代码,复制图片地址备用。如果是网上现有图片,右击点“属性”,复制图片地址备用。注意记住图片的宽和高。
3、进入编辑:进入自己的网站或博客后台,并使编辑器处于代码编辑状态。贴入代码:
<TABLE width=650 background=大图地址 height=488>
<TBODY>
<TR>
<TD>
<P><IMG style="MARGIN: 0px 0px 300px 300px" src="小图地址">
</P></TR></TBODY></TABLE>
4、修改代码:将第二步中获取的图片地址分别添加到本文第三步相应位置,并修改宽(width)和高(height)。
5、调整小图片位置:这是制作的关键代码:MARGIN: 0px 0px 300px 300px调整上边的值,就可实现定位。
6、修饰:还可对整体进行修饰。例如加边框,会有立体感。加入代码“border=10”即可(10可以调整)。
需要准备的材料分别有:电脑、chrome浏览器、html编辑器。
1、首先,打开html编辑器,新建一个html文件,例如:index.html,填充问题基础代码。
2、在index.html中的<img>标签,输入html代码:style="margin: 15px 20px 25px 30px"。
3、浏览器运行index.html页面,此时图片被成功移动了位置到距离左侧30像素,上方15像素。
方法如下:
1、首先 新建a.html文件,并准备一张小标,如下:
2、使用浏览器打开a.html,可以看到默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐,如下:
3、再次编辑a.html,加入以下css代码:.hlong *{display:inline-blockvertical-align:middle}保存
4、再次使用浏览器访问a.html页面,效果如图。是不是很简单呢?
扩展资料
HTML是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)