Adjust the spaces between the images and the text to achieve
more presentable layout of the web page.
htmlè°æ´æ·»å çå¾çä¸ææ¬ä¹é´çè·ç¦»æ¹æ³ï¼
å·¥å ·/åæ
Dreamweaver
æ¹æ³/æ¥éª¤
1ãæå¼Dreamweaverï¼ä¹åï¼æ°å»ºä¸ä¸ªhtmlææ¡£ï¼ç¶åå¨çé¢çä¸æ¹æ¾å°æå ¥å¾ççæé®ï¼ç¹å»å®ï¼æå ¥å¾çã
2ãæå ¥å¾çä¹åï¼ååä¸æåï¼æåå¨å¾çä¸æ¹ï¼åå¾ççè·ç¦»æ¯è¾è¿ï¼è¿æ¯é»è®¤çè·ç¦»ï¼ä¸ä¼è°çè¯ï¼æä¹è°é½æ¯è¿ä¹å®½çã
3ãåæ¢å°ä»£ç 模å¼ï¼æè æå模å¼ï¼æå模å¼ç好å¤å°±æ¯å¯ä»¥åæ¶çå°ä»£ç åå®é ææã
4ãå°å¾çåæå对åºçææPçæé½å é¤ï¼å æ¬<p>å</p>ï¼è¿äºæ ç¾æ¯æ®µè½æ ç¾ï¼dwé»è®¤æ®µé´è·å¤ªå®½ï¼æ以æ们就æ¢ä¸ç§æ®µè½æ¹å¼ã
5ãå æäºpæ ç¾ä¹åï¼å¨æåçå端åä¸<br>,ç¶åçä¸ä¸ææï¼å¾çåæåçè·ç¦»ç¼©å°äºï¼ææå¦å¾æ示ã
6ã对äºå¾çæåç¯ç»ææï¼æ¯å¨æåæ¯è¾å¤çæ¶åæä¼ç¨å°ï¼ç±äºæ°çdwçå±æ§é¢æ¿æ²¡æå¾çç¯ç»æ¹å¼çé项ï¼åªè½ä»å ¶å®éå¾æ¥ä¿®æ¹äºã
7ãé¦å å³å»å¾çï¼ç¶åéæ©å¯¹é½ï¼è¿éæå¾å¤ç§å¯¹é½æ¹å¼ï¼å¸¸ç¨çæ左对é½åå³å¯¹é½ï¼å·¦å¯¹é½å°±æ¯å¾çå¨å·¦è¾¹ï¼æåå¨å³è¾¹ï¼å³å¯¹é½å°±æ¯æåå¨å·¦è¾¹ï¼å¾çå¨å³è¾¹ãè¿ä¸¤ç§é½æ¯å¾çåæåçç¯ç»ææã
8ãå°±éæ©çæ¯å·¦å¯¹é½ï¼ææå¦å¾ä¸æ示ãæ¯ä¸æ¯ç¯ç»çå¾æ´é½ï¼å¨ç½é¡µæçæåæ¶ç»å¸¸éè¦ç¨å°ã
html调整添加的图片与文本之间的距离方法:
方法/步骤
1、打开Dreamweaver,新建一个html文档,然后在界面的上方找到插入图片的按钮,点击插入图片。
2、插入图片后写上文字,文字在图片下方,和图片的距离比较远,这是默认的距离。
3、切换到代码模式,或者拆分模式,拆分模式的好处就是可以同时看到代码和实际效果。
4、将图片和文字对应的所有P版权都删除,包括<p>和</p>,这些标签是段落标签,dw默认段间距太宽,所以就换一种段落方式。
5、删掉了p标签之后,在文字的前端写上<br>,然后看一下效果,图片和文字的距离缩小了,
6、对于图片文字环绕效果,是在文字比较多的时候才会用到,由于新版dw的属性面板没有图片环绕方式的选项,只能从其它途径来修改了。
7、右击图片,然后选择对齐,这里有很多种对齐方式,常用的有左对齐和右对齐,左对齐就是图片在左边,文字在右边,右对齐就是文字在左边,图片在右边。这两种都是图片和文字的环绕效果。
8、选择的是左对齐,效果如图中所示。
HTML标记语言是 标准通用标记语言下的一个应用,也是一种规范,一种标准。它通过标记符号来标记要显示的网页中的各个部分。网页 文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉 浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。 浏览器按顺序阅读网页 文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的 浏览器,对同一标记符可能会有不完全 相 同的解释,因而可能会有不同的显示效果。其主要特点如下:
简易性:超级文本标记语言 版本升级采用 超集方式,从而更加灵活方便。
可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加 等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
平台无关性:虽然 大行其道,但使用 MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是 ( WWW)盛行的另一个原因。
通用性:另外, HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
img {
margin-top: 5px;
margin-bottom: 5px;
}
参考资料:
本回答被提问者和网友采纳