博客列表 >前端学习实战案例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;
  26. }
  27. footer > a {
  28. color: #ccc;
  29. border-right:1px solid #fff;
  30. flex: 1;
  31. display: flex;
  32. justify-content: center;
  33. }
  34. footer > a:last-of-type{border-right:none}
  35. main{flex:1;background: #e8ecef;}
  36. </style>
  37. <body>
  38. <header>手机网站首页</header>
  39. <main>
  40. 这是主体内容
  41. </main>
  42. <footer>
  43. <a href="">我的首页</a>
  44. <a href="">关于我们</a>
  45. <a href="">联系方式</a>
  46. </footer>
  47. </body>
  48. </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. }
  37. </style>
  38. <body>
  39. <header>头部</header>
  40. <main>
  41. <artical>这是主体内容</artical>
  42. <aside>这是左边</aside>
  43. <aside>这是右边</aside>
  44. </main>
  45. <footer>底部</footer>
  46. </body>
  47. </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. }
  17. artical > form:hover {
  18. background:linear-gradient(to left bottom,#c4a3bf,#ebf6f7,#c4a3bf);
  19. box-shadow: 0 0 10px #888;
  20. }
  21. artical > form > div{margin: 10px 0;height: 40px;box-sizing: border-box;display: flex;align-items: center;}
  22. artical > form > div > label{width: 50px;height: 30px;}
  23. artical > form > div > input{height: 30px;border-radius: 20px;border: none;border: 1px solid gray;flex: 1;}
  24. artical > form > div > input:hover {background-color: #fdeff2;box-shadow: 0 0 5px #888;}
  25. artical > form > div > button{
  26. flex: 1;background-color: lightseagreen;color: white;
  27. letter-spacing: 15px;/*设置字间距*/
  28. border: none;/*重置按钮边框,先去掉之前的*/
  29. border-radius: 20px;/*设置按钮圆角*/
  30. height: 40px;
  31. }
  32. artical > form > div > button:hover {background-color: lightcoral; box-shadow: 0 0 5px #888;}
  33. </style>
  34. </head>
  35. <body>
  36. <artical>
  37. <h3>管理员登录</h3>
  38. <form action="" method="">
  39. <div>
  40. <label>用户</label>
  41. <input type="text" name="usename" value="" />
  42. </div>
  43. <div>
  44. <label>密码</label>
  45. <input type="password" name="password" value="" />
  46. </div>
  47. <div>
  48. <button >登录</button>
  49. </div>
  50. </form>
  51. </artical>
  52. </body>
  53. </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;
  44. }
  45. main > aside > a:hover{
  46. background: #cd5e3c;
  47. color: #fff;
  48. }
  49. main > artical{
  50. flex: 1;
  51. }
  52. main > aside:first-of-type {
  53. order: -1;
  54. }
  55. footer > span{flex: 1;}
  56. footer > a{
  57. padding: 0 10px;
  58. color: #ccc;
  59. }
  60. main > artical{
  61. display: flex;
  62. justify-content: center;
  63. align-items: center;
  64. }
  65. </style>
  66. <body>
  67. <header>
  68. <h3>网站内容管理系统</h3>
  69. <span>当前登录:系统管理员</span>
  70. </header>
  71. <main>
  72. <artical>
  73. <h1>欢迎登录网站内容管理系统</h1>
  74. </artical>
  75. <aside>
  76. <a href="">网站设置</a>
  77. <a href="">新闻管理</a>
  78. <a href="">商品管理</a>
  79. <a href="">留言管理</a>
  80. <a href="">登录管理</a>
  81. </aside>
  82. </main>
  83. <footer>
  84. <span>某某网 版权所有©2019-2020 联系电话:000-00000000</span>
  85. <a href="">网站首页</a>
  86. <a href="">关于我们</a>
  87. <a href="">联系我们</a>
  88. </footer>
  89. </body>
  90. </html>

手写代码




声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议