search

博客列表 >前端学习实战案例11-06

前端学习实战案例11-06

遗忘了寂寞
遗忘了寂寞原创
2019年11月07日 16:12:32628浏览

手机页面

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <style type="text/css">
  8.         *{margin: 0;padding: 0;}
  9.         a{text-decoration: none;color: #333;}
  10.         body{
  11.             display: flex;
  12.             flex-flow:column nowrap;
  13.             height: 100vh;
  14.             color: #333;
  15.         }
  16.         header,footer{
  17.             height: 60px;
  18.             line-height: 60px;
  19.             background: #513743;
  20.             color: #ccc;
  21.             box-sizing: border-box;
  22.             display: flex;
  23.             flex-flow: row nowrap;
  24.             justify-content: center;
  25.             align-items: center;
  27.         }
  28.         footer > a {
  29.             color: #ccc;
  30.             border-right:1px solid #fff;
  31.             flex: 1;
  32.             display: flex;
  33.             justify-content: center;
  34.         }
  35.         footer > a:last-of-type{border-right:none}
  36.         main{flex:1;background: #e8ecef;}
  38.     </style>
  39.     <body>
  40.         <header>手机网站首页</header>
  41.         <main>
  42.             这是主体内容
  43.         </main>
  44.         <footer>
  45.             <a href="">我的首页</a>
  46.             <a href="">关于我们</a>
  47.             <a href="">联系方式</a>
  48.         </footer>
  49.     </body>
  50. </html>

圣杯布局

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <style type="text/css">
  8.         *{margin: 0;padding: 0;}
  9.         a{text-decoration: none;color: #333;}
  10.         body{
  11.             display: flex;
  12.             flex-flow:column nowrap;
  13.             height: 100vh;
  14.             color: #333;
  15.         }
  16.         main{
  17.             flex: 1;display: flex;
  18.             flex-flow: row nowrap;
  19.         }
  20.         header,footer{
  21.             height: 60px;color: #ccc;
  22.             line-height: 60px;
  23.             background: #513743;
  24.             box-sizing: border-box;
  25.         }
  26.         main > aside{
  27.             width: 200px;
  28.             background: #00FFFF;
  29.         }
  30.         main > artical{
  31.             flex: 1;
  32.             background: #20B2AA;
  33.         }
  34.         main > aside:first-of-type {
  35.            order: -1;
  36.         }
  38.     </style>
  39.     <body>
  40.         <header>头部</header>
  41.         <main>
  42.             <artical>这是主体内容</artical>
  43.             <aside>这是左边</aside>
  44.             <aside>这是右边</aside>
  45.         </main>
  46.         <footer>底部</footer>
  47.     </body>
  48. </html>

登录页面

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{margin: 0;padding: 0;/* outline: 1px dashed; */}
  8.             a{text-decoration: none;color: #333;}
  9.             body{display: flex;flex-flow:column nowrap;height: 100vh;
  10.                 color: #333;justify-content: center;align-items: center;}
  11.             artical{width: 400px;padding: 20px;box-sizing: border-box;}
  12.             artical > h3{font-size: 25px;text-align: center;margin-bottom: 15px;}
  13.             artical > form{
  14.                 display: flex;flex-flow: column nowrap;border: 1px solid gray;padding: 15px;
  15.                 border-radius: 10px;background:linear-gradient(to right ,#c1e4e9,#ebf6f7,#c1e4e9);
  16.             }
  18.             artical > form:hover {
  19.                 background:linear-gradient(to left bottom,#c4a3bf,#ebf6f7,#c4a3bf);
  20.                 box-shadow: 0 0 10px #888;
  21.             }
  22.             artical > form > div{margin: 10px 0;height: 40px;box-sizing: border-box;display: flex;align-items: center;}
  23.             artical > form > div > label{width: 50px;height: 30px;}
  24.             artical > form > div > input{height: 30px;border-radius: 20px;border: none;border: 1px solid gray;flex: 1;}
  25.             artical > form > div > input:hover {background-color: #fdeff2;box-shadow: 0 0 5px #888;}
  26.             artical > form > div > button{
  27.                 flex: 1;background-color: lightseagreen;color: white;
  28.                 letter-spacing: 15px;/*设置字间距*/
  29.                 border: none;/*重置按钮边框,先去掉之前的*/
  30.                 border-radius: 20px;/*设置按钮圆角*/
  31.                 height: 40px;
  32.             }
  33.             artical > form > div > button:hover {background-color: lightcoral; box-shadow: 0 0 5px #888;}
  34.         </style>
  35.     </head>
  36.     <body>
  37.         <artical>
  38.             <h3>管理员登录</h3>
  39.             <form action="" method="">
  40.                 <div>
  41.                     <label>用户</label>
  42.                     <input type="text" name="usename"  value="" />
  43.                 </div>
  44.                 <div>
  45.                     <label>密码</label>
  46.                     <input type="password" name="password" value="" />
  47.                 </div>
  48.                 <div>
  49.                     <button >登录</button>
  50.                 </div>
  51.             </form>
  52.         </artical>
  53.     </body>
  54. </html>

网站后台页面

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <style type="text/css">
  8.         *{margin: 0;padding: 0;}
  9.         a{text-decoration: none;color: #333;}
  10.         body{
  11.             display: flex;
  12.             flex-flow:column nowrap;
  13.             height: 100vh;
  14.             color: #333;
  15.         }
  16.         main{
  17.             flex: 1;display: flex;
  18.             flex-flow: row nowrap;
  19.         }
  20.         header,footer{
  21.             box-sizing: border-box;
  22.             height: 60px;color: #ccc;
  23.             line-height: 60px;
  24.             background: #513743;
  25.             box-sizing: border-box;
  26.             padding: 0px 20px;
  27.             display: flex;
  28.         }
  29.         header > h3{flex: 1;}
  30.         main > aside{
  31.             box-sizing: border-box;
  32.             padding: 20px 0px;
  33.             width: 200px;
  34.             background: #43676b;
  35.             display: flex;
  36.             flex-flow:column nowrap;
  37.         }
  38.         main > aside > a{
  39.             height: 40px;
  40.             line-height: 40px;
  41.             padding: 5px 20px;
  42.             text-align: center;
  43.             color: #ccc;
  45.         }
  46.         main > aside > a:hover{
  47.             background: #cd5e3c;
  48.             color: #fff;
  49.         }
  50.         main > artical{
  51.             flex: 1;
  53.         }
  54.         main > aside:first-of-type {
  55.            order: -1;
  56.         }
  57.         footer > span{flex: 1;}
  58.         footer > a{
  59.             padding: 0 10px;
  60.             color: #ccc;
  61.         }
  62.         main > artical{
  63.             display: flex;
  64.             justify-content: center;
  65.             align-items: center;
  66.         }
  67.     </style>
  68.     <body>
  69.         <header>
  70.             <h3>网站内容管理系统</h3>
  71.             <span>当前登录：系统管理员</span>
  72.         </header>
  73.         <main>
  74.             <artical>
  75.                 <h1>欢迎登录网站内容管理系统</h1>
  76.             </artical>
  77.             <aside>
  78.                 <a href="">网站设置</a>
  79.                 <a href="">新闻管理</a>
  80.                 <a href="">商品管理</a>
  81.                 <a href="">留言管理</a>
  82.                 <a href="">登录管理</a>
  83.             </aside>
  85.         </main>
  86.         <footer>
  87.             <span>某某网 版权所有©2019-2020 联系电话：000-00000000</span>
  88.             <a href="">网站首页</a>
  89.             <a href="">关于我们</a>
  90.             <a href="">联系我们</a>            
  91.         </footer>
  92.     </body>
  93. </html>

手写代码




上一条：第八课-flex布局案例练习下一条：laravel框架--blade视图模版练习--2019年11月5日
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多