首先是一段html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css"><!--外联最低-->
<title>Document</title>
<style type="text/css">h2{
color:blue;
}
h1{
color: red;
}</style><!--样式表次之-->
</head>
<body>
<div class="container">
<div class="box1">
<h1 style="color:blue">first</h1><!--内联优先级最高-->
<h2>second1</h2>
<h3>dsfgd</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita exercitationem tenetur nisi porro omnis obcaecati non, sint voluptatum deserunt quae dolor, possimus molestiae vitae mollitia, illum numquam illo ratione. Labore?</p>
<h4>hahahahah哈 12 33</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, reprehenderit? Hic rem cupiditate, enim aperiam aliquam aliquid exercitationem tenetur accusamus ab at ipsum aspernatur odit consectetur minima vero. Ut eligendi corporis ducimus non! Quasi error dolores rerum, a voluptates qui magni aliquam explicabo excepturi iusto cumque consequatur libero reprehenderit at?</p>
<div class="list">
<ul>
<li>lis1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="list2">
<ul>11</ul>
<ul>22</ul>
<ul><a
href="http://182.92.219.49" target="_blank">my homepage</a></ul>
</div>
<div class="box2">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum, nobis consequatur. Excepturi ea sit, libero officiis odit facere et! Asperiores explicabo aperiam repudiandae perferendis possimus officiis molestiae quasi molestias necessitatibus?</p>
<button>Button</button>
</div>
<div class="block">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, repudiandae.</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, eos obcaecati, quae culpa cum reiciendis optio rerum nulla expedita repudiandae corrupti qui architecto praesentium incidunt! Illum optio impedit eaque modi?</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit maxime amet id mollitia aspernatur, earum quas! Voluptatibus, nisi culpa? Porro?</p>
</div>
<div class="clearfix"></div>
<div id="qqq">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam exercitationem aliquid, molestiae architecto, veritatis distinctio laboriosam reprehenderit consectetur nobis, nam voluptatem provident? Est fugit blanditiis deleniti fuga culpa ipsa itaque nulla unde distinctio beatae quae mollitia minus nobis voluptas, ratione vero inventore dolorem ad qui sed exercitationem? Eveniet, fuga ab!</p>
</div>
<div id="qwe">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos, veniam.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="list2">
<ul>
<li>listl</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
<li>l1</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</div>
<div class="position-box">
<h1>gfhfgfhgfhf</h1>
<h2>dfnnjjb</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium nulla debitis minus cumque dicta? Illo, voluptates aperiam aliquam autem esse tenetur ipsa temporibus, facilis eligendi neque dolorem amet soluta suscipit vel id odio voluptatum unde omnis ipsum beatae vero quod eveniet laudantium minus! Autem sapiente, officia labore eligendi deserunt doloremque tenetur iusto vitae libero aperiam. Libero necessitatibus exercitationem sit vero, saepe labore omnis odio quaerat aliquam, iste veritatis repellat placeat consequuntur quisquam molestiae harum culpa sequi autem ad! Vitae eius vel maiores, dolore ad perferendis quas facilis id quaerat quod magnam molestiae magni omnis repellendus nostrum. Itaque inventore facere architecto.</p>
</div>
<button id="fixe">ssyy12</button>
<div style="margin-top:1000px"></div><!--下面加空-->
</body>
</html>