C站能力认证（C4前端基础认证） //任务二：根据浮动布局以及定位布局的特性，实现构建下列（截图）中的页面

任务二：根据浮动布局以及定位布局的特性，实现构建下列（截图）中的页面

要求：

搜索框部分的图标使用子绝父相的定位方式实现。
右侧二维码使用固定定位的方式实现（不管浏览器窗口上下滚动与否，二维码始终在那个位置）
远程资源图片在下列代码中获取即可(搜索图标，二维码图片)

<body>...<header><h1>唐代诗人精选</h1><nav><ul><li>...</li></ul></nav><div id="search" ><input type="text" placeholder="请输入..."><img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/ss.svg"></div></header><div class="qrcode"><img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/code.png"><p>扫码关注...</p></div><main class="container"><section class="box">...</section><section class="box">...</section></main><footer><p><small>&copy; 2021 CSDN-C.Tasking ...</small></p></footer>
</body>

代码块：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>李白</title><style type="text/css">body {background: #e1e1e1;font-family: sans-serif;font-weight: bold;}header, footer {text-align: center;}#search {float: none;position: relative;margin: 0 auto;border: 0 none white;border-radius: 50px;padding: 5px 0;width: 380px;height: 40px;background-color: white;}#search > input {float: left;position: absolute;margin: 0 0 0 -160px;padding: 5px 0;border-style: none;width: 300px;height: 30px;font-family: sans-serif;font-size: 14px;}input:focus {outline: none;}#search > img {float: right;position: absolute;margin: 0 20px 0 0;padding: 10px 150px;}.qrcode {float: right;position: fixed;margin: 0 1500px;padding: 2px 2px 3px 2px;width: 124px;height: 150px;background-color: white;color: black;text-align: center;}.qrcode > p {margin: 0;border: 0 none white;padding: 0;font-size: 15px;}nav > ul {list-style: none;}nav > ul > li {padding: 0;margin: 0 20px 0 0;display: inline;}.container {background: #fff;width: 1024px;height: 1800px;padding: 15px;border: 1px solid #999;margin: 0 auto;text-align: center;}p {color: grey;font-size: 16px;}.poem {float: left;position: absolute;border: 1px solid lightgrey;margin: 10px;padding: 5px;width: 460px;}.poem1 {float: right;position: relative;border: 1px solid lightgrey;margin: 10px 50px 10px 10px;padding: 5px;width: 460px;}.foot {margin: 0;padding-top: 1px;height: 50px;background-color: black;}</style>
</head>
<body>
<header><h1>唐代诗人精选</h1><nav><ul><li><a href="#libai">李白</a></li><li><a href="#dufu">杜甫</a></li><li><a href="#">王维</a></li><li><a href="#">白居易</a></li><li><a href="#">李商隐</a></li><li><a href="#">孟浩然</a></li></ul></nav><div id="search"><input type="text" placeholder="请输入..."><img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/ss.svg"></div>
</header>
<br/><div class="qrcode"><img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/code.png" width="120px" height="120px"><p>扫码关注...</p>
</div><main class="container"><a name="libai"></a><div class="poem"><section class="box"><header><h2>李白 <small><small>（唐代诗人）</small></small></h2><div><p>李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。</p><p>北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。”</p><p>《旧唐书》记载李白为山东人；《新唐书》记载，李白为兴圣皇帝李暠九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。</p><p>李白有《李太白集》传世，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》《早发白帝城》等多首。李白所作词赋，宋人已有传记（如文莹《湘山野录》卷上），就其开创意义及艺术成就而言，“李白词”享有极为崇高的地位。</p></div></header><br/><h2>静夜思 <small><small>（明代版本）</small></small></h2><div><p>床前明月光，疑是地上霜。</p><p>举头望明月，低头思故乡。</p></div><br/><br/><br/><h2>静夜思 <small><small>（宋代版本）</small></small></h2><div><p>床前看月光，疑是地上霜。</p><p>抬头望山月，低头思故乡。</p></div><br/><br/><br/><h2>望庐山瀑布 <small><small>（一)</small></small></h2><div><p>西登香炉峰，南见瀑布水。</p><p>挂流三百丈，喷壑数十里。</p><p>欻如飞电来，隐若白虹起。</p><p>初惊河汉落，半洒云天里。</p><p>仰观势转雄，壮哉造化功。</p><p>海风吹不断，江月照还空。</p><p>空中乱潈射，左右洗青壁；</p><p>飞珠散轻霞，流沫沸穹石。</p><p>而我乐名山，对之心益闲；</p><p>无论漱琼液，还得洗尘颜。</p><p>且谐宿所好，永愿辞人间。</p></div><br/><br/><br/><h2>望庐山瀑布 <small><small>（二)</small></small></h2><div><p>日照香炉生紫烟，遥看瀑布挂前川。</p><p>飞流直下三千尺，疑是银河落九天。</p></div></section></div><a name="dufu"></a><div class="poem1"><section class="box"><header><h2>杜甫 <small><small>（唐代诗人）</small></small></h2><div><p>杜甫（712年2月12日-770年），字子美，自号少陵野老，唐代伟大的现实主义诗人，与李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”，杜甫也常被称为“老杜”。</p><p>杜甫少年时代曾先后游历吴越和齐赵，其间曾赴洛阳应举不第。三十五岁以后，先在长安应试，落第；后来向皇帝献赋，向贵人投赠。官场不得志，目睹了唐朝上层社会的奢靡与社会危机。天宝十四载（755年），安史之乱爆发，潼关失守，杜甫先后辗转多地。乾元二年（759年）杜甫弃官入川，虽然躲避了战乱，生活相对安定，但仍然心系苍生，胸怀国事。杜甫创作了《登高》《春望》《北征》以及“三吏”、“三别”等名作。虽然杜甫是个现实主义诗人，但他也有狂放不羁的一面，从其名作《饮中八仙歌》不难看出杜甫的豪气干云。</p><p>杜甫的思想核心是仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p><p>大历五年（770年）冬，病逝，享年五十九岁。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。后世称其杜拾遗、杜工部，也称他杜少陵、杜草堂。</p></div></header><br/><h2>绝句四首 <small><small>（一）</small></small></h2><div><p>堂西长笋别开门，堑北行椒却背村。</p><p>梅熟许同朱老吃，松高拟对阮生论。</p></div><br/><br/><h2>绝句四首 <small><small>（二）</small></small></h2><div><p>欲作鱼梁云复湍，因惊四月雨声寒。</p><p>青溪先有蛟龙窟，竹石如山不敢安。</p></div><br/><br/><h2>绝句四首 <small><small>（三）</small></small></h2><div><p>两个黄鹂鸣翠柳，一行白鹭上青天。</p><p>窗含西岭千秋雪，门泊东吴万里船。</p></div><br/><br/><h2>绝句四首 <small><small>（四）</small></small></h2><div><p>药条药甲润青青，色过棕亭入草亭。</p><p>苗满空山惭取誉，根居隙地怯成形。</p></div></section></div>
</main>
<br/>
<footer><div class="foot"><p><small>&copy 2021 CSDN-C.Tasking ...</small></p></div>
</footer>
</body>
</html>

实现效果如下：

C站能力认证（C4前端基础认证） //任务二：根据浮动布局以及定位布局的特性，实现构建下列（截图）中的页面相关推荐

前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
前端知识——盒子类型，浮动属性，定位属性，JavaScript基础语法
文章目录 CSS-盒子类型 margin padding 浮动属性 CSS-溢出属性 overflow的设置项 CSS-定位属性定位状态定位操作 CSS-z-index JavaScript 简介 ...
前端基础6：背景常用属性和定位以及BFC
背景常用属性 background-color:背景颜色属性值有三种书写方式: 1.关键字法(不常用) 2.十六进制法 3.RGB(0~255,0~255,0~255) background-ima ...
php怎么登录路由器,基础认证与curl自动登录路由器
一.基础认证二.基础认证钓鱼三.curl登录路由器四.实时获取路由器流量统计信息一.基础认证基础认证是是除了cookie以外的另一种验证客户身份的方法.进行基础认证时,一般页面会弹出一个框来 ...
CTFHub | 基础认证
0x00 前言 CTFHub 专注网络安全.信息安全.白帽子技术的在线学习,实训平台.提供优质的赛事及学习服务,拥有完善的题目环境及配套 writeup ,降低 CTF 学习入门门槛,快速帮助选手成长 ...
前端基础——CSS布局
前端基础学习第三天文章目录前端基础学习第三天一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
C站能力认证任务关卡1-2 员工宿舍组网
C站能力认证任务关卡1-2 员工宿舍组网住在一起的同事之间经常会联机打一些局域网的游戏,例如王者.吃鸡之类的.现在公司买了TP-LINK无线路由器,但是小王不知道怎么样才能让大家都在一个局域网中打游 ...
解读大厂招聘JD：C站能力认证带你进大厂
春招还在继续,有些小伙伴在招聘的时候遇到了困难,发现自己和想要应聘的岗位在能力上有些不匹配.对于想要去大厂的小伙伴,竞争更是激烈! 今天,小编带大家一起解读几家互联网大厂招聘Java工程师的JD,帮助 ...
C站能力认证训练Day1
二进制和修改存档,包括视频编码和音频编码还有图片编码 C站能力认证训练Day1(数据二进制编码和修改存档) C站能力认证训练第一天,教官发布的任务是关于二进制训练和修改游戏存档. 1)⾸先,修改< ...

C站能力认证（C4前端基础认证） //任务二：根据浮动布局以及定位布局的特性，实现构建下列（截图）中的页面

任务二：根据浮动布局以及定位布局的特性，实现构建下列（截图）中的页面

C站能力认证（C4前端基础认证） //任务二：根据浮动布局以及定位布局的特性，实现构建下列（截图）中的页面相关推荐

最新文章

热门文章