训练营第五天学习笔记

来源：互联网发布：qq会员签到软件编辑：程序博客网时间：2024/05/15 10:39

第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>

0 0