search

博客列表 >CSS_0702作业

CSS_0702作业

bloght5386
bloght5386原创
2021年07月18日 20:42:44413浏览

1. 制作一个在线QQ客服的固定定位(QQ客服用图片就行);

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #image {
  8.             position: fixed;
  9.             top: 5rem;
  10.             left: 10rem;
  12.             width: 10px;
  13.             height: 150px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="image">
  19.              <img src="./12.PNG" >
  20.         </div>

2. 仿课堂案例写一个三行三列的定位布局, 色块或边框代表内容就可以;

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             * {
  8.                 margin: 0;
  9.                 padding: 0;
  10.                 box-sizing: border-box;
  11.             }
  12.             body {
  13.                 font-size: 16px;
  14.             }
  15.             header,footer {
  16.                 height: 5em;
  17.                 background-color: darkseagreen;
  18.             }
  19.             .container {
  20.                 position: relative;
  21.                 width: 1200px;
  22.                 height: 500px;
  23.                 margin: 0 auto;
  24.             }
  25.             .container aside:first-of-type {
  26.                 position: absolute;
  27.                 left: 0;
  28.                 top: 0;
  29.                 width: 320px;
  30.                 height: 500px;
  31.                 background-color: royalblue;
  32.             }
  33.             .container aside:last-of-type {
  34.                 position: absolute;
  35.                 right: 0;
  36.                 top: 0;
  37.                 width: 320px;
  38.                 height: 500px;
  39.                 background-color: royalblue;
  40.             }
  41.             .container main {
  42.                 position: absolute;
  43.                 left: 320px;
  44.                 top: 0;
  45.                 width: 560px;
  46.                 height: 500px;
  47.                 background-color: rosybrown;
  48.             }
  50.         </style>
  51.     </head>
  52.     <body>
  53.         <header>页眉</header>
  54.         <div class="container">
  55.             <aside>内容1</aside>
  56.             <main>内容</main>
  57.             <aside>内容2</aside>
  58.         </div>
  59.         <footer>页脚</footer>
  60.     </body>
  61. </html>
上一条：字体图标的用法 盒模型的演示 box-sizing的用法下一条：0702 作业请求老师审批
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多