如下图是本次的作业,看起来结构很简单:整体结构自上而下是一个二级标题<h2>加水平线<hr>再加一个段落<p>(不同段落内容用<br>实现换行)
下面两张图为编写后的界面和具体代码:
但我认为还有很多可以改进的地方,例如照片应该是简历的重要组成部分,于是我在网站上随意下载了一张证件照,并在标题标签后添加了如下代码:(<img src="../../Pictures/jpg.webp" align=right height=250px alt="证件照" hspace=50 title=高爱国>)用于放置图片。
但是打开浏览器预览后效果差强人意,个人认为字体可以改大一点,简历内容也可以适量添加,还可以通过水平线分隔内容让简历看起来更加的充实。
首先解决字体问题,我将二级标题更改为一级标题,并且将内容部分全部加粗并放大,更改后的效果如图:
虽然整体还是空荡荡的,但已经比初始版本有所进步了,更改后的代码如下图,只修改了标题级别,主要是在段落<p>部分适当增加了内容:
接下来就是适当增加内容,让简历看起来更加充实,于是在网上找了一张图片用于参考:
我在右上角添加了求职意向,让HR在看照片时就能看到我们的求职意向,根据参考简历,我发现将内容分段会让内容看上去更加充实,于是我也将内容分段展示,还将工作经历移出单独作为一块,并且在参考简历的基础上尽量添加内容,统一字体。然后效果如图:
代码如下(虽然看上去很多,其实后面的两大部分的内容都是在第一部分的代码基础上修改内容就行了):
最后我来添加水平线:我的策略是在每一块的前面添加一个水平线,并且水平线的宽度和上文内容长度相差不大,示例代码如下:<hr align="left" size="3" width="400" color="#000000">
如图是我做的个人简历的最后效果:
由于没有使用CSS,使得代码有点冗余,代码如下:
泪目了,家人们,连夜学习CSS。