目录

①首先实现整体的框架，为左右结构所以考虑用span标签

②图片放在左边用align或者style的float

③超链接用href链接

  1. <span>
  2. <a href="https://baike.so.com/doc/5352504-5587962.html" target="_blank"> 
  3. <img src = "E:\前端\9.27网页设计作业1\咖啡.jpg"style = "float:left;" width="430" heigth="200" /></a>
  4. </span>

其中target是用来打开新网页时可以不覆盖上一个网页，图片的宽度跟高度自己设定，怎么好看怎么来

①我看了作业要求的效果图，图片与文字之间有一小段距离，如果单纯用空格隔开或者用缩进的方法隔开，代码会太长，我就想到了使用浮动框架进行移动来使代码量减少

②其中文字字还要实现颜色，大小，斜体，粗体的改变

<1>首先实现浮动框架，这里用了css的id选择器，来将浮动框架向右边移动到对应位置

  1. <span>
  2. <iframe src="文字浮动框架.html" name="main" width="800" height="500" frameborder="0px" scrolling="auto" id="box"></iframe>
  3. </span>

<2>单独将文字的排版内容放入另一个html文件中，这里用了css的类选择器的知识，使主文件的代码看起来没有这么多

  1. <h1 class="brown">Web前端开发工程师</h1>
  3. <p class="blue">技术要求:</p>
  5. <p class="p1">了解常用的一些JS框架,如jQuery,YUI等;掌握最基本的JavaScript计算方法编写;对目前互联网流行的网</p>
  6. 页制作方法(Web2.0)HTML+CSS以及各大浏览器兼容性有较多的了解;基本掌握前沿技术(HTML5+CSS3).
  7. <p><font class="p2">Web前端技术</font>你究竟掌握了多少...</p>
  9. <p class="blue">更新时间:2015年05月19日20点(已有<font class="p3">323</font>人点赞)</p>
  11. <hr/>
  13. <p class="p4">相关技术文章<font class="p5">8</font>篇</p>

以上代码均为本人原创，严禁抄袭，仅供参考。

因为作业还没到交的时间，以上的代码我给了大致的思路，，放在css文件里面的代码我就先不放出来了，如果有什么建议或者问题的话可以在留言区给我留言，大家一起进步，体验敲代码的乐趣吧

版权声明：本文为tiantianlike原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/tiantianlike/p/13746361.html