简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >grid和flex布局结合vw-rem布局实际应用

grid和flex布局结合vw-rem布局实际应用

xueblog9的进阶之旅
xueblog9的进阶之旅原创
2022年07月18日 22:49:05325浏览

grid和flex布局结合vw-rem布局实际应用

布局实际应用

html源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>vw-rem案例</title>
  9.     <link rel="stylesheet" href="./css/header.css">
  10.     <link rel="stylesheet" href="./css/main.css">
  11. </head>
  13. <body>
  14.     <header>
  15.         <div class="top">
  16.             <div class="sky">
  17.                 <span>PHP中文网，程序员梦开始的地方!</span>
  18.                 <a href="" class="iconfont icon-tongzhi tongzhi"></a>
  19.                 <a href="" class="pic"><img src="./css/images/user-pic.jpeg" alt=""></a>
  20.             </div>
  21.             <civ class="navs">
  22.                 <a href=""><img src="./css/images/logo.png" alt=""></a>
  23.                 <a href="">首页</a>
  24.                 <a href="">视频教程</a>
  25.                 <a href="">学习路径</a>
  26.                 <a href="">php培训</a>
  27.                 <a href="">资源下载</a>
  28.                 <a href="">技术文章</a>
  29.                 <a href="">社区</a>
  30.                 <a href="">app下载</a>
  31.                 <div class="search">
  32.                     <input type="search" class="sech" placeholder="输入关键字">
  33.                     <label for="sech">搜索</label>
  34.                 </div>
  35.         </div>
  36.         </div>
  37.     </header>
  38.     <main class="main">
  39.         <div class="content">
  40.             <div class="left">
  41.                 <a href="">php开发</a>
  42.                 <a href="">大前端</a>
  43.                 <a href="">后端开发</a>
  44.                 <a href="">数据库</a>
  45.                 <a href="">移动端</a>
  46.                 <a href="">运维开发</a>
  47.                 <a href="">UI设计</a>
  48.                 <a href="">计算机基础</a>
  49.             </div>
  50.             <div class="mid">
  51.                 <a href=""><img src="./css/images/slider.jpeg" alt=""></a>
  52.             </div>
  53.             <div class="right">
  54.                 <div class="userinfo">
  55.                     <a href=""><img src="./css/images/user-pic.jpeg" alt=""></a>
  56.                     <div class="name"><a href="">朱老师</a></div>
  57.                     <div class="button"><a href="">我的学习</a></div>
  58.                     <div class="info">p豆 2065.5</div>
  59.                 </div>
  60.                 <ul class="nav-right">
  61.                     <li class="content1">问答社区</li>
  62.                     <li class="content2">头条</li>
  63.                     <li class="content3">福利</li>
  64.                     <li class="content4">新班</li>
  65.                     <li class="content5">招募</li>
  66.                     <li class="content6">公告</li>
  67.                     <li class="content7"><a href="">答疑</a></li>
  68.                     <li class="content8"><a href="">【整理分享】2022年最流行的</a></li>
  69.                     <li class="content9"><a href="">限时折扣>></a></li>
  70.                     <li class="content10"><a href="">20期PHP线上班</a></li>
  71.                     <li class="content11"><a href="">课程合作计划</a></li>
  72.                     <li class="content12"><a href="">app上线啦</a></li>
  73.                 </ul>
  74.             </div>
  75.             <div class="buttom-left">
  76.                 <ul class="navbottom">
  77.                     <li>
  78.                         <span>学习路径</span>
  79.                         <span>全部7个&gt;</span>
  80.                     </li>
  81.                     <li>
  82.                         <img width="50px" src="./css/images/dgjj.png" alt="">
  83.                         <a href="">独孤九剑</a>
  84.                         <span>9门课程</span>
  85.                     </li>
  86.                     <li>
  87.                         <img width="50px" src="./css/images/phpkjkf.png" alt="">
  88.                         <a href="">独孤九剑</a>
  89.                         <span>9门课程</span>
  90.                     </li>
  91.                     <li>
  92.                         <img width="50px" src="./css/images/phpksrm.png" alt="">
  93.                         <a href="">独孤九剑</a>
  94.                         <span>9门课程</span>
  95.                     </li>
  96.                     <li>
  97.                         <img width="50px" src="./css/images/tlbb.png" alt="">
  98.                         <a href="">独孤九剑</a>
  99.                         <span>9门课程</span>
  100.                     </li>
  101.                     <li><img width="50px" src="./css/images/ynxj.png" alt="">
  102.                         <a href="">独孤九剑</a>
  103.                         <span>9门课程</span>
  104.                     </li>
  105.                 </ul>
  106.             </div>
  107.         </div>
  108.     </main>
  109. </body>
  110. </html>

css源码

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. a {
  8.   text-decoration: none;
  9.   color: #555;
  10. }
  12. body {
  13.   background-color: rgb(243, 245, 247);
  14. }
  16. li {
  17.   list-style: none;
  18. }
  20. body {
  21.   background-color: #f3f5f7;
  22. }
  24. header .top {
  25.   width: 100vw;
  26.   height: 40px;
  27.   background-color: #343434;
  28.   color: #aaa;
  29. }
  31. header .top .content {
  32.   /* 必须限定宽高,否则无法在父容器中居中 */
  33.   width: 1200px;
  35.   display: grid;
  36.   grid-template-columns: 400px 100px;
  37.   grid-auto-rows: 40px;
  38.   place-content: space-between;
  39.   place-items: center start;
  40.   margin: auto;
  41. }
  43. /* 钟图标 */
  44. header .top .content .right .iconfont {
  45.   color: #eee;
  46.   font-size: larger;
  47. }
  49. /* 头像 */
  50. header .top .content img {
  51.   width: 50%;
  52.   border-radius: 50%;
  53. }
  55. header .top .content .right {
  56.   display: grid;
  57.   grid-template-columns: repeat(2, 1fr);
  58.   place-items: center;
  59. }
  61. header .top .content .title {
  62.   font-size: larger;
  63.   /* 加粗 */
  64.   font-weight: larger;
  65. }
  67. /* 导航 */
  68. header .navs {
  69.   width: 100vw;
  70.   height: 90px;
  71.   background-color: #fff;
  72.   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  73. }
  74. header .navs .content {
  75.   /* 必须限定宽高,否则无法在父容器中居中 */
  76.   width: 1200px;
  78.   display: grid;
  79.   grid-template-columns: 140px 1fr 200px;
  80.   grid-auto-rows: 90px;
  81.   margin: auto;
  82.   gap: 10px;
  83.   place-items: center start;
  84. }
  86. header .navs .content nav {
  87.   display: flex;
  88. }
  90. header .navs .content nav a {
  91.   padding: 0 10px;
  92. }
  94. header .navs .content nav a:hover,
  95. header .navs .content nav a.active {
  96.   font-weight: bold;
  97.   color: red;
  98. }
  100. header .navs .content img {
  101.   width: 100%;
  102. }
  103. header .navs .content .search {
  104.   display: flex;
  105. }
  106. header .navs .content .search input[type='search'] {
  107.   width: 200px;
  108.   height: 36px;
  109.   border: none;
  110.   background-color: #eee;
  111.   outline: none;
  112.   border-radius: 20px;
  113.   padding-left: 10px;
  114. }
  116. header .navs .content .search .icon-fangdajing1 {
  117.   font-size: 22px;
  119.   color: #ccc;
  120.   position: relative;
  121.   left: -40px;
  122.   top: 5px;
  123. }
  124. header .navs .content .search .icon-fangdajing1:hover {
  125.   color: red;
  126.   /* 小手 */
  127.   cursor: pointer;
  128. }
  129. /*header结束*/
  131. body main {
  132.     display: grid;
  133.     place-content: center;
  134.     padding-top: 2vh;
  135. }
  137. body main .content {
  138.     display: grid;
  139.     width: 70vw;
  140.     height: 54vh;
  141.     grid-template-columns: 8vw 42vw 14vw;
  142.     grid-template-rows: 38vh 12vh;
  143.     /* border: 1px solid black; */
  144.     place-content: space-evenly;
  145. }
  147. body main .content .left {
  148.     display: flex;
  149.     flex-direction: column;
  150.     place-content: space-around;
  151.     place-items: center; 
  152.     padding-top: 2vh;
  153.     padding-bottom: 2vh;
  154.     font-size: 0.11rem;
  155.     background-color: white;
  156.     border-radius: 20px;
  157. }
  159. body main .content .left a:hover {
  160.     color: red;
  161. }
  162. body main .content .mid {
  163.     display: grid;
  164.     place-content: center;
  165. }
  167. body main .content .mid a img {
  168.     width: 100%;
  169.     border-radius: 0.2rem;
  170.     padding: 0.1rem;
  171. }
  174. /* 右侧上头 */
  175. body main .content .right {
  176.     background-color: white;
  177.     border-radius: 20px;
  178. }
  180. body main .content .right .userinfo {
  181.     display: grid;
  182.     grid-template-columns: 5vw 7vw;
  183.     grid-template-rows: 4vh 4vh 4vh;
  184.     place-content: center;
  185.     place-items: center;
  186.     border-bottom: 1px solid #bbb;
  187.     padding-bottom: 1vh;
  188.     padding-top: 1vh;
  189. }
  191. body main .content .right .userinfo a {
  192.     grid-area: 1 / 1 / span 2 / span 1;
  193.     place-self: center end;
  194. }
  195. /* 头像2 */
  196. body main .content .right .userinfo a img {
  197.     width: 4vw;
  198.     border-radius: 20px;
  199. }
  201. body main .content .right .userinfo .name {
  202.     width: 4vw;
  203.     border-radius: 20px;
  204.     font-size: 0.09rem;
  205.     place-self: end center;
  206.     font-weight: bold;
  207. }
  209. body main .content .right .userinfo .button {
  210.     grid-column: 1 / 3;
  211.     grid-row: 3 / 4;
  212.     background-color: red;
  213.     width: 10vw;
  214.     border-radius: 20px;
  215.     text-align: center;
  216. }
  218. body main .content .right .userinfo .button a {
  219.     color: white;
  220.     font-size: smaller;
  221. }
  223. body main .content .right .userinfo .info {
  224.     font-size: 0.09rem;
  225.     place-self: start center;
  226. }
  227. /* 头像部分结束 */
  228. /* 右侧底部菜单栏 */
  229. body main .content .right .nav-right {
  230.     display: grid;
  231.     grid-template-columns: 5vw 7vw;
  232.     grid-template-rows: repeat(6,3.3vh);
  233.     grid-auto-flow: column;
  234.     place-content: center;
  235.     place-items: center;
  236.     font-size: 0.1rem;
  237.     padding-top: 2vh;
  238. }
  240. body main .content .buttom-left {
  241.     grid-column: 1 / 3;
  242.     grid-row: 2 / 3;
  243. }
  245. body main .content .buttom-left .navbottom {   
  246.     display: flex;
  247.     place-items: center;
  248.     place-content: space-around;
  249.     font-size: 0.10rem;
  250.     padding: 0.1rem;
  251. }
  253. body main .content .buttom-left .navbottom li:nth-of-type(n+2) {
  254.     display: grid;
  255.     grid-template-columns: 3vw 4vw;
  256.     gap: 0 10px;
  257.     place-items: center start;
  258.     padding-left: 0.1rem;
  259. }
  261. body main .content .buttom-left .navbottom img {
  262.     grid-row: span 2;
  263. }
  265. body main .content .buttom-left .navbottom li:nth-of-type(1) {
  266.     display: flex;
  267.     flex-direction: column;
  268.     place-content: center;
  269. }
  271. body main .content .buttom-left .navbottom li:nth-of-type(n+2) a {
  272.     font-weight: bold;
  273.     color: black;
  274. }
  276. body main .content .buttom-left .navbottom li:nth-of-type(n+2) a:hover {
  277.     color: red;
  278. }
  280. body main .content .buttom-left .navbottom li:nth-of-type(n+2) span {
  281.     color: #555;
  282. }

实际效果：

上一条：仿制淘宝移动端首页下一条：仿php中文网部分
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多