训练营第五天学习笔记

最新推荐文章于 2024-05-06 20:57:10 发布

bzonelove

最新推荐文章于 2024-05-06 20:57:10 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/bzonelove/article/details/70242123

版权

第5天的学习主要是优化第四天的学习哦，感觉今天做的有点乱，虽然好像效果是不错，但是代码好累赘的样子。

而且今天花费的时间比较长，差不多用了2个小时才完成的。艰辛啊~~查阅各种资料，比如把方形的图片变成原型等

效果图如上，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day4</title>
	<style type="text/css">
	*{ 
		margin: 0;  
		padding: 0;  
    }  
	#Container{
		width: 408px;
		height: 680px;
		background-color: #23283c;
		margin: 10px auto;
		position: relative;
	}
	#header img{
		width: 366px;
		height: 242px;
		position: absolute;
		left: 20px;
		top: 20px;
		border-radius:10px 10px 0 0;
	}
	#main{
		width: 366px;
		height: 296px;
		background-color: #fefefe;
		position: relative;
		top: 262px;
		left: 20px;
	}
	.tu-l img{
		margin: 25px 25px;
		border-radius: 50%;
		width: 64px;
		height: 64px;
		position: absolute;
	}
	.tu-r{
		position: absolute;
		margin-left: 100px;
		margin-top: 25px;
	}
	.text1 p{
		position: absolute;
		margin-left: 25px;
		margin-top: 110px;
		width: 320px;
		line-height: 28px;
	}
	#footer{
		width: 366px;
		height: 96px;
		background-color: #fefefe;
		position: relative;
		top: 264px;
		left: 20px;
		border-radius:0 0 10px 10px;
	}

	.tu1-l img{
		margin: 15px 25px;
		width: 64px;
		height: 64px;
		position: absolute;
	}
	.tu2-r{
		position: absolute;
		margin-left: 120px;
		margin-top: 30px;
}
	</style>
</head>
<body>
	<div id="Container">
        <div id="header">
		<img src="yese.jpg" alt="">
        </div>    
        <div id="main">
            <div class="tu-l">
		<img src="tx.png" alt="">
            </div>	
		<div class="tu-r">
		    <h1>推图</h1>
		    <p>图片来源：www.baidu.com</p>
		</div>
	   <div class="text1">
		<p>今天的推图要给大家分享的是一张广州夜景图片。</br></br>
		另外波波还想和大家聊一聊，大家在广州工作</br>
		外地工作那么多年，其实有没有想逃离这个城</br>
		市的想法呢，有怎样的人生规划？</p>
	   </div>		
           </div>
        <div id="footer">
            <div class="tu1-l">
		<img src="ma.png" alt="">
            </div>	
	    <div class="tu2-r">
		<h4>长按识别二维码</h4>
	        <p>即可关注BOBO个人微信号哟</p>
        </div>
    </div>
</body>
</html>

bzonelove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
训练营第五天学习笔记

第5天的学习主要是优化第四天的学习哦，感觉今天做的有点乱，虽然好像效果是不错，但是代码好累赘的样子。而且今天花费的时间比较长，差不多用了2个小时才完成的。艰辛啊~~查阅各种资料，比如把方形的图片变成原型等效果图如上，代码如下： day4 *{ margin: 0; padding: 0; } #Container{ width
复制链接

扫一扫