网页布局的简单案例

最新推荐文章于 2022-10-23 22:17:22 发布

御裔宸

最新推荐文章于 2022-10-23 22:17:22 发布

阅读量670

点赞数

分类专栏： css知识点文章标签：网页布局

本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79200132

版权

css知识点专栏收录该内容

25 篇文章 1 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
   charset= 
  "utf-8" 
   /> 
 
  < 
  meta 
   http-equiv= 
  "X-UA-Compatible" 
   content= 
  "IE=edge" 
  > 
 
  < 
  title 
  >网页布局 
  </ 
  title 
  > 
 
  < 
  meta 
   name= 
  "viewport" 
   content= 
  "width=device-width, initial-scale=1" 
  > 
 
  < 
  link 
   rel= 
  "stylesheet" 
   type= 
  "text/css" 
   media= 
  "screen" 
   href= 
  "main.css" 
   /> 
 
  < 
  script 
  src= 
  "main.js" 
  > 
  < 
  / 
  script 
  > 
 
  < 
  style 
  > 
 
  /* css初始化 */ 
 
  h1,h2,h3,h4,h5,h6,body{ 
 
  margin: 
   0; 
 
  padding: 
  0; 
 
               } 
 
  .box{ 
 
  width: 
  980px; 
 
  height: 
  700px; 
 
  background-color: 
   #DBDBE0; 
 
  margin: 
  0 
  auto; 
 
   } 
 
  .header{ 
 
  height: 
  50px; 
 
  background-color: 
   brown; 
 
   } 
 
  .container{ 
 
  height: 
  600px; 
 
  background-color: 
   #F1CAF5; 
 
   } 
 
  .contet{ 
 
  width: 
  680px; 
 
  height: 
  600px; 
 
  background-color: 
  blue; 
 
  float: 
  left; 
 
   } 
 
  .sidebar{ 
 
  width: 
  300px; 
 
  height: 
  600px; 
 
  background-color: 
   chartreuse; 
 
  float: 
  right; 
 
   } 
 
  .foot{ 
 
  height: 
  50px; 
 
  background-color: 
   teal; 
 
   } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  <!-- 主体的盒子 --> 
 
  < 
  div 
   class= 
  "box" 
  > 
 
  <!-- 头部开始 --> 
 
  < 
  div 
   class= 
  "header" 
  >头部 
  </ 
  div 
  > 
 
  <!-- 内容部分 --> 
 
  < 
  div 
   class= 
  "container" 
  > 
 
  < 
  div 
   class= 
  "contet" 
  >左边 
  </ 
  div 
  > 
 
  < 
  div 
   class= 
  "sidebar" 
  >右边 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
   class= 
  "foot" 
  >底部 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >

御裔宸

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页布局的简单案例

DOCTYPE html>html>head>meta charset="utf-8" />meta http-equiv="X-UA-Compatible" content="IE=edge">title>网页布局title>meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫

专栏目录