FY的web从零自学日记（2）

最新推荐文章于 2024-07-12 16:27:40 发布

萧兮丶

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量128

点赞数

分类专栏： web 笔记文章标签：前端 html css3

本文链接：https://blog.csdn.net/xxfuy/article/details/122139201

版权

笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web

7 篇文章 0 订阅

订阅专栏

今天的任务是做一个新人向的个人简历，看起来可能~~蠢蠢的~~ 复古的。
首先根据昨天我们学的< h1 >< h2 >< h3 >，我们不难把个人信息罗列出来。

<html>
<head>
    <meta charset="utf-8">
    <title>个人简历</title>
</head>
<body>


<h1 style="background-color:pink;">个人简历</h1>

<h2 style="font-size:20;line-height:2.4;"> 姓名：张三</h2>
<h2 style="font-size:20;line-height:2.4;">联系方式： </h2> 
        
<h3 style="font-size:15;line-height:2.4;">手机：123456789</h3>
<h3 style="font-size:15;line-height:2.4;">邮箱：123456789@qq.com</h3>

<h2 style="font-size:20;line-height:2.4;">学历</h2>
        
<h3 style="font-size:15;line-height:2.4;">本科：西红柿大学在读</h3>
      
<h2 style="font-size:20;line-height:2.4;">项目经验：</h2>

<h3 style="font-size:15;line-height:2.4;">参与西红柿摸鱼算法开发</h3>


</body>
</html>

大家发现这个style里面又多了两个参数，一个background-color是指这一段文字的背景颜色，line-height是指行间距倍数。这是防止字挤在一起做的操作。然后run一下可以得到。

粗略一看，挺极简风格的，但是是不是有点像一张小卡片了。关键小卡片的布局好像比这更还好一点点，有没有什么能快速摸鱼调包的函数能改改布局呢？看了一下，有个< ul >和< ol >的元素可以使用，概念贴贴。

HTML < ul > 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。

HTML < ol > 元素表示有序列表，通常渲染为一个带编号的列表。

看了看用法后，把代码改改。

<html>
<head>
    <meta charset="utf-8">
    <title>个人简历</title>
</head>
<body>


<h1 style="background-color:pink;">个人简历</h1>
<ul>
    <li style="font-size:20;line-height:2.4;"> 姓名：张三</li>
    <li style="font-size:20;line-height:2.4;">联系方式： </li> 
    <ul>    
        <li style="font-size:15;line-height:2.4;">手机：123456789</li>
        <li style="font-size:15;line-height:2.4;">邮箱：123456789@qq.com</li>
    </ul>
    <li style="font-size:20;line-height:2.4;">学历</li>
    <ul>    
        <li style="font-size:15;line-height:2.4;">本科：西红柿大学在读</li>
    </ul>
    <li style="font-size:20;line-height:2.4;">项目经验：</li>
    <ul>
        <li style="font-size:15;line-height:2.4;">参与西红柿摸鱼算法开发</li>
    </ul>
</ul>

</body>
</html>

结果是这样的
张小三
这么一看比刚刚是要像模像样了，但是作为一个网页，应该有点能执行的操作。比如。。。超链接之类的。思考一下，决定搞一个。然后又又找了一个元素可以用用。

HTML < a > 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。< a > 中的内容应该应该指明链接的意图。如果存在 href 属性，当 < a > 元素聚焦时按下回车键就会激活它。

这个玩意用法很多哈，可以自己参考一下这些网站第一个网站第二个网站。然后我们简单把代码搞一搞。

<html>
<head>
    <meta charset="utf-8">
    <title>个人简历</title>
</head>
<body>

<p>转跳到:</p>
<ul>
    <li><a href="#C1">姓名</a></li>
    <li><a href="#C2">联系方式</a></li>
    <li><a href="#C3">学历</a></li>
    <li><a href="#C4">项目经验</a></li>
</ul>

<h1 style="background-color:pink;">个人简历</h1>
<ul>
    <li style="font-size:20;line-height:2.4;"><a name="C1">姓名：张三</a></li>
    <li style="font-size:20;line-height:2.4;"><a name="C2">联系方式： </a></li> 
    <ul>    
        <li style="font-size:15;line-height:2.4;">手机：123456789</li>
        <li style="font-size:15;line-height:2.4;">邮箱：123456789@qq.com</li>
    </ul>
    <li style="font-size:20;line-height:2.4;"><a name="C3">学历</a></li>
    <ul>    
        <li style="font-size:15;line-height:2.4;">本科：西红柿大学在读</li>
    </ul>
    <li style="font-size:20;line-height:2.4;"><a name="C4">项目经验：</a></li>
    <ul>
        <li style="font-size:15;line-height:2.4;">参与西红柿摸鱼算法开发</li>
    </ul>
</ul>

</body>
</html>

逻辑通，run一下。
bugggg
点一点发现，为啥这玩意不跳啊，检查代码看了看，没有问题啊（十分钟过去了）。想到了，这玩意转跳得下面有东西才能自己拉到合适的位置，我们写的这玩意一共就一个页面不到，移不动，所以简单操作一下。

<html>
<head>
    <meta charset="utf-8">
    <title>个人简历</title>
</head>
<body>

<p>转跳到:</p>
<ul>
    <li><a href="#C1">姓名</a></li>
    <li><a href="#C2">联系方式</a></li>
    <li><a href="#C3">学历</a></li>
    <li><a href="#C4">项目经验</a></li>
</ul>

<h1 style="background-color:pink;">个人简历</h1>
<ul>
    <li style="font-size:20;line-height:2.4;"><a name="C1">姓名：张三</a></li>
    <li style="font-size:20;line-height:2.4;"><a name="C2">联系方式： </a></li> 
    <ul>    
        <li style="font-size:15;line-height:2.4;">手机：123456789</li>
        <li style="font-size:15;line-height:2.4;">邮箱：123456789@qq.com</li>
    </ul>
    <li style="font-size:20;line-height:2.4;"><a name="C3">学历</a></li>
    <ul>    
        <li style="font-size:15;line-height:2.4;">本科：西红柿大学在读</li>
    </ul>
    <li style="font-size:20;line-height:2.4;"><a name="C4">项目经验：</a></li>
    <ul>
        <li style="font-size:15;line-height:2.4;">参与西红柿摸鱼算法开发</li>
    </ul>
</ul>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
</body>
</html>

然后再run！
runnn
点一下姓名

发现可以动了，测一下其他点，没啥问题。~~结束了~~ 这玩意不人性化啊，每次点击都要去顶部点击，我能不能把这个链接变成类似于悬浮窗的东西。思路正确，开始百度学习。先在开头写一个< style >

< style > 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。
style 元素位于 head 部分中。

<style>
  .run-place {
    position: fixed;	        /* 设置fixed固定定位 */
    top: 20px;		/* 距离浏览器窗口上边框20px */
    right: 20px;		/* 距离浏览器窗口右边框20px */
  }
  .run-place a {
    display: block;			/* 将<a>标签设为块元素，用于美化样式 */
    text-decoration: none;		/* 取消超链接下画线 */
    color: #333;			/* 设置文本颜色 */
    background-color:transparent;/*透明化*/
    border: 1px solid #ccc;		/* 设置边框样式 */
    padding: 10px 20px;			/* 设置内边距 */
    border-radius: 5px;			/* 设置圆角矩形 */
    letter-spacing: 2px;		/* 设置文字间距 */
  }
</style>

然后在末尾< div >一下

<div class="run-place">
    <a href="#C1">姓名</a>
    <a href="#C2">联系方式</a>
    <a href="#C3">学历</a>
    <a href="#C4">项目经验</a>
</div>

得到了这个样子的代码

<html>
<head>
    <meta charset="utf-8">
    <title>个人简历</title>
</head>
<body>

<style>
    .run-place {
        position: fixed;	        /* 设置fixed固定定位 */
        top: 20px;		/* 距离浏览器窗口上边框20px */
        right: 20px;		/* 距离浏览器窗口右边框20px */
    }
    .run-place a {
        display: block;			/* 将<a>标签设为块元素，用于美化样式 */
        text-decoration: none;		/* 取消超链接下画线 */
        color: #333;			/* 设置文本颜色 */
        background-color:transparent;/*透明化*/
        border: 1px solid #ccc;		/* 设置边框样式 */
        padding: 10px 20px;			/* 设置内边距 */
        border-radius: 5px;			/* 设置圆角矩形 */
        letter-spacing: 2px;		/* 设置文字间距 */
    }
</style>

<h1 style="background-color:pink;">个人简历</h1>
<ul>
    <li style="font-size:20;line-height:2.4;"><a name="C1">姓名：张三</a></li>
    <li style="font-size:20;line-height:2.4;"><a name="C2">联系方式： </a></li> 
    <ul>    
        <li style="font-size:15;line-height:2.4;">手机：123456789</li>
        <li style="font-size:15;line-height:2.4;">邮箱：123456789@qq.com</li>
    </ul>
    <li style="font-size:20;line-height:2.4;"><a name="C3">学历</a></li>
    <ul>    
        <li style="font-size:15;line-height:2.4;">本科：西红柿大学在读</li>
    </ul>
    <li style="font-size:20;line-height:2.4;"><a name="C4">项目经验：</a></li>
    <ul>
        <li style="font-size:15;line-height:2.4;">参与西红柿摸鱼算法开发</li>
    </ul>
</ul>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>
<p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p><p>简单操作一下</p>

<div class="run-place">
    <a href="#C1">姓名</a>
    <a href="#C2">联系方式</a>
    <a href="#C3">学历</a>
    <a href="#C4">项目经验</a>
</div>

</body>
</html>

run！run！run！
wow
这样子不是挺像模像样的嘛，然后我看了一下推荐的个人简历网站（羡辙的简历）。额，我做的这是什么垃圾。。。。没事道阻且长，现在先搞到这里，晚点完善亿下下。

萧兮丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FY的web从零自学日记（2）

今天的任务是做一个新人向的个人简历，看起来可能蠢蠢的复古的。首先根据昨天我们学的< h1 >< h2 >< h3 >，我们不难把个人信息罗列出来。<html><head> <meta charset="utf-8"> <title>个人简历</title></head><body><h1 style="background-color:pink;"&
复制链接

扫一扫