zoukankan      html  css  js  c++  java
  • web前端笔记 -- 使用图片

    根据千峰教育学习视频所练习的笔记 | 学习一段时间,我也有写一点东西的必要了···

    1. 使用img标签在网页上添加图片

    1.1. 我电脑上有这样几张图片,我打算把它放在images文件夹下,以便后续使用

    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006220213010-283885287.png)
     <div align=center><img src="images/img1.png"/></div>
    

    可以在网页上看到效果:

    1.2. 同样的方法把图片都添加进去

    <body>
    	<img src="images/img1.png"/>
    	<img src="images/img2.png"/>
    	<img src="images/img3.png"/>
    	<img src="images/img4.png"/>
    	</body>
    

    这里可以看到第4张图片放不进第一行了,只能被换行显示:

    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006220447550-663989111.png)
    **我们可以得到一个规律:** **图片在网页上的显示顺序是:从左到右依次排放,并且图片默认以底部对齐;当该行所余空间不足够摆放下一张图,那张图片就会被换到下一行。** ## 2. 调整图片大小 ### 2.1. 为图片设置width和height属性值,呈现出下图的效果:
    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006220554071-1702048153.png)
    ```html ``` ## 3. 小练习:利用图片制作一个网页 ### 3.1. 相关图片放在images文件夹里,并在img标签里添加图片
    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006220616947-274876071.png)
    ```html ``` ### 3.2. 我们运行以后,会发现图片大小不一致:
    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006220656692-1772355980.png)
    ### 3.3. 修改一下呗: ```html





  • 相关阅读:
    Josephu问题的解决方案
    2019年9月16日动手动脑
    2019年9月23日课堂随机出题
    开学JAVA第一次测试
    2019年8月19日~8月25日 第八周JAVA学习总结
    2019年7月29日~8月4日 第五周学习记录
    2019年9月16日课堂随机出题
    2019年8月5日~8月11日 第六周JAVA学习总结
    2019年8月12日~8月18日 第七周JAVA学习总结
    两个数值型变量交换值的方法总结
  • 原文地址:https://www.cnblogs.com/hefeifei/p/11628715.html
Copyright © 2011-2022 走看看