设为首页收藏本站
开启辅助访问 切换到宽版

小白教程

 找回密码
 立即注册
热搜: python PHP html
小白教程»小白交流区 › 技术交流区 › html5和css › 如何做到顶部和底部背景全屏，网页内容居中？ ...
返回列表 发新帖
查看: 9095|回复: 2

[已解决]如何做到顶部和底部背景全屏，网页内容居中？

[复制链接]
易帆

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2021-4-14 16:12:30 | 显示全部楼层 |阅读模式
我是CSS的新手，我看了一下这个演示站点的布局，
标题、导航栏背景和尾部背景都是全屏的，但内容都居中。还有九格陈列的商品。
想知道如何实现这个布局?
能提供CSS参考指导吗?
最佳答案
微言送听
2021-5-22 18:23:00
用这个试试看

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>demo</title>
  7.     <link rel="stylesheet" href="">
  8.     <style type="text/css">
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             list-style: none;
  13.         }
  14.         body{
  15.             min-width: 1200px;
  16.         }
  17.         #head{
  18.             height: 60px;
  19.             background: red;
  20.         }
  21.         #head-search{
  22.             width: 1200px;
  23.             margin: 0 auto;
  24.             height: 60px;
  25.             background: orange;
  26.         }
  27.         #nav{
  28.             height: 60px;
  29.             background: yellow;
  30.         }
  31.         #main{
  32.             width: 1200px;
  33.             margin: 0 auto;
  34.             min-height: 800px;
  35.             background: blue;
  36.         }
  37.         #footer{
  38.             height: 60px;
  39.             background: gray;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div id="head">
  45.          
  46.     </div>
  47.     <div id="head-search">
  48.          
  49.     </div>
  50.     <div id="nav">
  51.          
  52.     </div>
  53.     <div id="main">
  54.          
  55.     </div>
  56.     <div id="footer">
  57.          
  58.     </div>
  59. </body>
  60. </html>
复制代码

本帖寻求最佳方案

，目前已有 2 个回复 我要奖励

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

赵昊洋

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-4-28 13:58:23 | 显示全部楼层
可以设置border的margin和padding为0。border就可以紧贴浏览器。另外给父盒子设置一个text-align:centent，里面的内容就可以居中
回复

使用道具 举报

微言送听

0

主题

2

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2021-5-22 18:23:00 | 显示全部楼层 &
用这个试试看

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>demo</title>
  7.     <link rel="stylesheet" href="">
  8.     <style type="text/css">
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             list-style: none;
  13.         }
  14.         body{
  15.             min-width: 1200px;
  16.         }
  17.         #head{
  18.             height: 60px;
  19.             background: red;
  20.         }
  21.         #head-search{
  22.             width: 1200px;
  23.             margin: 0 auto;
  24.             height: 60px;
  25.             background: orange;
  26.         }
  27.         #nav{
  28.             height: 60px;
  29.             background: yellow;
  30.         }
  31.         #main{
  32.             width: 1200px;
  33.             margin: 0 auto;
  34.             min-height: 800px;
  35.             background: blue;
  36.         }
  37.         #footer{
  38.             height: 60px;
  39.             background: gray;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div id="head">
  45.          
  46.     </div>
  47.     <div id="head-search">
  48.          
  49.     </div>
  50.     <div id="nav">
  51.          
  52.     </div>
  53.     <div id="main">
  54.          
  55.     </div>
  56.     <div id="footer">
  57.          
  58.     </div>
  59. </body>
  60. </html>
复制代码
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2025-5-1 10:26 , Processed in 0.029086 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表