该博客主要介绍了如何利用浮动布局和定位布局特性构建一个包含搜索框和固定定位二维码的网页。搜索框采用子绝父相定位，图标与输入框相对定位；二维码使用固定定位，始终保持在屏幕右侧。页面结构清晰，布局合理，适应不同浏览器窗口滚动。
任务二：根据浮动布局以及定位布局的特性，实现构建下列（截图）中的页面
要求：
- 搜索框部分的图标使用
子绝父相的定位方式实现。 - 右侧二维码使用固定定位的方式实现（不管浏览器窗口上下滚动与否，二维码始终在那个位置）
- 远程资源图片在下列代码中获取即可(搜索图标，二维码图片)
<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>© 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>© 2021 CSDN-C.Tasking ...</small></p>
</div>
</footer>
</body>
</html>
实现效果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
