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

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

萧兮丶

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

阅读量142

点赞数

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

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

版权

笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web

7 篇文章 0 订阅

订阅专栏

继续来完善张三的个人简历
首先，我们将张三的简历用到的style全部用css封装一下

.container{
	display: flex;
	/*border: 1px solid #666;*/
	text-align: center;
	width: 2000px;
	margin-left: 100px;
}
.item-top{
	width: 2000px;
	/*border: 1px solid black;*/
	text-align: center;
	flex-shrink: 0;
}

.item-left{
	width: 600px;
	height:300px;
	/*border: 1px solid black;*/
	text-align: center;
	flex-shrink: 0;
}
.item-mid{
	width: 1400px;
	
	/*border: 1px solid black;*/
	text-align: left;
	flex-shrink: 0;
}
.item-right{
	width: 400px;
	
	border: 1px solid black;
	text-align: center;
	flex-shrink: 0;
	ul li{
	font-size:35px;
	line-height:2;
	text-align:left;
	background-color: #099990;
	border-radius: 15px;
	list-style: none;
	margin-top: 5px;
	font-family:"宋体";
	font-weight:bolder;
}
ul ul li{
	font-size:25px;line-height:2.5;
	background-color: transparent;
	font-weight:bold;
	font-family:serif;
}
p{
	font-size:20px;line-height:1;
}
h1{
	font-size:50px;
}
a[href]:hover{
	color:red;
}
    .run-place {
        position: fixed;	        /* 设置fixed固定定位 */
        
		/*top: 20px;*/		/* 距离浏览器窗口上边框20px */
        margin-left: 50px;		/* 距离浏览器窗口右边框20px */
		margin-top: 50px;
		
    }
    .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加上了新的flex布局，flex布局具体怎么用，明天再进行总结归纳。
接下来我们应该要找到一张张三的照片，百度一下。

好，我们先将这张照片保存到我们的html文件夹里，并命名为“张三.jpg”，然后引用方法为

			<img 
			loading="eager" 		
			src="./img/张三.jpg" 
			alt="zhangsan" 
			style="height: 300px;width: 300;border-radius:50%;margin-top: 20px;"
			>

接下来就是对之前信息的一些整合和扩充，毕竟张三在这两天已经从西红柿大学博士毕业了，所以简历要更新一下了。

	<body>
	<div class="container">
		<div class="item-top"><h1>个人简历</h1></div>
	</div>
	<div class="container">
		<div class="item-left">
			<img 
			loading="eager" 
			
			src="./img/张三.jpg" 
			alt="zhangsan" 
			style="height: 300px;width: 300;border-radius:50%;margin-top: 20px;"
			>
			<h2>我是张三</h2>
			<h2>一只特立独行的猫猫</h2>
			<p>每个人都不得不面对这些问题 </p>	
			<p>比如西红柿摆烂算法需要如何去实现 </p>
			<p>比如西红柿划水算法需要如何去实现 </p>
			<p>比如西红柿摸鱼算法需要如何去实现 </p>

		</div>
		
		
		<div class="item-mid">
			
			<ul>
			    <li><a name="C1">姓名</a></li>
				<ul>
				    <li style="font-size:35px;letter-spacing:15px;">张三</li>
				</ul>
			    <li><a name="C2">联系方式 </a></li> 
			    <ul>    
			        <li>手机：123456789</li>
			        <li>邮箱：123456789@qq.com</li>
			    </ul>
			    <li ><a name="C3">学历</a></li>
			    <ul>    
			        <li >本科：西红柿大学摆烂专业毕业</li>
					<li >硕士：西红柿大学划水专业毕业</li>
					<li >博士：西红柿大学摸鱼专业毕业</li>
			    </ul>
			    <li><a name="C4">项目经验</a></li>
			    <ul>
			        <li>参与西红柿摆烂算法开发</li>
					<p>&nbsp;&nbsp;&nbsp;&nbsp;在西红柿摆烂算法开发中，主要承担西红柿摆烂算法的猫猫摆烂部分。</p>
					<p>&nbsp;&nbsp;&nbsp;&nbsp;其中，猫猫摆烂算法部分大幅度提高了猫工智能算法的优化效率。</p>
					<li>参与西红柿划水算法开发</li>
					<p>&nbsp;&nbsp;&nbsp;&nbsp;在西红柿划水算法开发中，主要承担西红柿划水算法的猫猫划水部分。</p>
					<p>&nbsp;&nbsp;&nbsp;&nbsp;其中，猫猫划水算法部分大幅度提高了猫式潜艇的划水效率。</p>
					<li>参与西红柿摸鱼算法开发</li>
					<p>&nbsp;&nbsp;&nbsp;&nbsp;在西红柿摸鱼算法开发中，主要承担西红柿摸鱼算法的猫猫摸鱼部分。</p>
					<p>&nbsp;&nbsp;&nbsp;&nbsp;其中，猫猫摸鱼算法部分大幅度提高了猫猫在上课或者上班时的摸鱼效率。</p>
			    </ul>
			</ul>
		</div>
		
		<div class="item-left">
			<div class="run-place">
				<a href="#C1">姓名</a>
				<a href="#C2">联系方式</a>
				<a href="#C3">学历</a>
				<a href="#C4">项目经验</a>	
				</div>
		</div>
	</div>
	</body>