发表于： 2019-11-14 22:38:33
1 966
今天完成的事情：完成任务八第二个页面
明天计划的事情：继续任务八写第三个页面
遇到的问题：调整图片自适应与文字自适应相对位置的变化花费较长时间
收获：基本写完任务八第二个页面，，代码
<div class="d1">
<span style="white-space: nowrap;">客服电话：010-594-34567</span>
<img src="./8/1.png" alt="">
</div>
<p align="right" class="x1" style="margin: 0;">登录 ︱ 注册</p>
<img class="rr" src="./8/dddaa.jpg" alt="">
<div class="box2">
<div class="m1"><a href="" ><label id="menu1" for="menu"></label></a></div>
<input id="menu" type="checkbox">
<div class="d2">
<a href="" class="a1">
首页
<div class="y1"></div>
</a>
<a href="" class="a2">
首页
<div class="y2"></div>
</a>
<a href="" class="a3">
首页
<div class="y3"></div>
</a>
<a href="" class="a4">
首页
<div class="y4"></div>
</a>
</div>
</div>
头部跟第一个页面一样，下面部分代码
div class="g2">
<div class="g21"><p style="text-align: right; font-size: 1.1vw;"><span style="font-size: 2.8vw;">内部直推</span><br>RECOMMENDED<br>OPPPRTUNITIES</p></div>
<h1 style="font-size: 2.8vw;">快人一步</h1>
</div>
css部分
.g2{
background: url(./8/z1.png) no-repeat;
background-color: #f1a750;
height: 10.9vw;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 1vw;
color: white;
background-size: contain;
}
.g21{
display: inline-block;
}
h1{
display: inline-block;
调整字体与图片自适应同步花费较长时间，下面部分的代码
<div class="c6">
<b>首页> <span style="color: #29b078;"> 合作企业</span></b>
</div>
<div class="c01">
<div class="container-fluid">
<div class="col-sm-3 c4">
<ul>
<li style="font-size: 10px; border: solid 1px rgba(222, 222, 222, 0.5); padding-bottom: 0;" ><b>合作单位</b></li>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
<a href=""><li><div class="kx"></div> 阿里巴巴</li></a>
</ul>
</div>
用了bootstrap栅格，这是左边的部分，效果图
右边的部分
<div class="c0">
<div class="col-sm-9 c3">
<div class="col-sm-12 c1">
<img src="./8/cc1.png" alt="" height="134">
<p>土豆是阿里巴巴文化娱乐集团旗下短视频平台，以“只要时刻有趣着”为口号，号召全球有趣短视频。由阿里巴巴文化娱乐集团移动事业群总裁何小鹏兼任总裁，全力进击PUGC领域。
2005年4月15日正式上线，是全球最早上线的视频网站之一。2014年1月，“土豆网”正式更名为“土豆”，标志着土豆网进入品牌发展的新阶段。
土豆网相信年轻人的想象力、创造力，相信土豆的平台能帮助年轻人创造出更多，更好的影像作品，来表达对自己、生活和这个时代的看法。同时，土豆网提倡尊重“每个人”的个性，
</p>
</div>
<div class="col-sm-12 c2" style="margin-bottom: 50px;">
<p>
2012年3月12日，优酷股份有限公司(NYSE: YOKU) (“优酷”) 和土豆股份有限公司 (NASDAQ: TUDO) (“土豆”)共同宣布，优酷和土豆将以100%换股的方式合并。2012年8月20日，优酷土豆合并方案获双方股东大会高票批准通过，优酷土豆集团公司正式诞生。2013年4月，优酷土豆集团宣布进入“集团BU化”运营阶段，提出“优酷更优酷，土豆更土豆”的发展战略。<br><br>
2012年3月12日，优酷股份有限公司(NYSE: YOKU) (“优酷”) 和土豆股份有限公司 (NASDAQ: TUDO) (“土豆”)共同宣布，优酷和土豆将以100%换股的方式合并。2012年8月20日，优酷土豆合并方案获双方股东大会高票批准通过，优酷土豆集团公司正式诞生。2013年4月，优酷土豆集团宣布进入“集团BU化”运营阶段，提出“优酷更优酷，土豆更土豆”的发展战略。<br><br>
2012年3月12日，优酷股份有限公司(NYSE: YOKU) (“优酷”) 和土豆股份有限公司 (NASDAQ: TUDO) (“土豆”)共同宣布，优酷和土豆将以100%换股的方式合并。2012年8月20日，优酷土豆合并方案获双方股东大会高票批准通过，优酷土豆集团公司正式诞生。2013年4月，优酷土豆集团宣布进入“集团BU化”运营阶段，提出“优酷更优酷，土豆更土豆”的发展战略。<br><br>
2012年3月12日，优酷股份有限公司(NYSE: YOKU) (“优酷”) 和土豆股份有限公司 (NASDAQ: TUDO) (“土豆”)共同宣布，优酷和土豆将以100%换股的方式合并。2012年8月20日，优酷土豆合并方案获双方股东大会高票批准通过，优酷土豆集团公司正式诞生。2013年4月，优酷土豆集团宣布进入“集团BU化”运营阶段，提出“优酷更优酷，土豆更土豆”的发展战略。<br><br>
2012年3月12日，优酷股份有限公司(NYSE: YOKU) (“优酷”) 和土豆股份有限公司 (NASDAQ: TUDO) (“土豆”)共同宣布，优酷和土豆将以100%换股的方式合并。2012年8月20日，优酷土豆合并方案获双方股东大会高票批准通过，优酷土豆集团公司正式诞生。2013年4月，优酷土豆集团宣布进入“集团BU化”运营阶段，提出“优酷更优酷，土豆更土豆”的发展战略。<br><br>
</p>
</div>
</div>
</div>
</div>
</div>
效果图
明天继续后面的部分
返回列表
评论