grid布局简单记录

最新推荐文章于 2024-02-02 10:45:00 发布

QPQ_

最新推荐文章于 2024-02-02 10:45:00 发布

阅读量239

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_36060786/article/details/79598307

版权

CSS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了一种利用CSS Grid布局实现简洁网页设计的方法。通过简单的HTML结构与Grid CSS样式结合，快速创建了包含头部、侧边栏、主要内容区及底部的响应式布局。并附带了一个用于自动为各区块上色的JavaScript脚本。

摘要由CSDN通过智能技术生成

grid布局不要太好用！用grid方式写了个简单的布局，代码很简单，记录一下。

html代码：

 
  < 
  div 
  class= 
  "parent" 
  > 
 
 
  < 
  div 
  class= 
  "child header" 
  ></ 
  div 
  > 
 
 
  < 
  div 
  class= 
  "child sideBar" 
  ></ 
  div 
  > 
 
 
  < 
  div 
  class= 
  "child content" 
  ></ 
  div 
  > 
 
 
  < 
  div 
  class= 
  "child footer" 
  ></ 
  div 
  > 
 
 
  </ 
  div 
  > 
 

css代码：

 
  html,body { 
 
  width: 
  100%; 
 
  height: 
  100%; 
 
   } 
 
  .parent { 
 
  display: 
  grid; 
 
  width: 
  80%; 
 
  height: 
  100%; 
 
  margin: 
  0 
  auto; 
 
  grid-gap: 
  5px; 
 
   } 
 
  .header { 
 
  grid-column-start: 
  1; 
 
  grid-column-end: 
  6; 
 
  grid-row: 
  1/ 
  2; 
 
   } 
 
  .sideBar { 
 
  grid-column: 
  1/ 
  2; 
 
  grid-row: 
  2/ 
  5; 
 
   } 
 
  .content { 
 
  grid-column: 
  2/ 
  6; 
 
  grid-row: 
  2/ 
  5; 
 
   } 
 
  .footer { 
 
  grid-column: 
  1/ 
  6; 
 
  grid-row: 
  5/ 
  6; 
 
   }

js代码：

   ( 
  function( 
  document){ 
 
 
  var 
  aChild = 
  document. 
  querySelectorAll( 
  ".child"); 
 
 
  for( 
  var 
  i= 
  0, 
  len= 
  aChild. 
  length; 
  i< 
  len; 
  i++) { 
 
 
  aChild[ 
  i]. 
  style. 
  backgroundColor = 
  randomColor(); 
 

   } 
 
 
  function 
  randomColor() { 
 
 
  var 
  txt = 
  "#"; 
 
 
  for( 
  var 
  i= 
  0; 
  i< 
  6; 
  i++) { 
 
 
  txt+= 
  Math. 
  floor( 
  Math. 
  random()* 
  16). 
  toString( 
  16); 
 

   } 
 
 
  return 
  txt; 
 

   } 
 

   })( 
  document); 
 