qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 软件与程序人生 › DevOps与敏捷开发 › CSS学习11--版心和结构流程以及几种分布的例子 ...

CSS学习11--版心和结构流程以及几种分布的例子

[复制链接]
发表于 2026-1-27 00:29:10 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

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

×
一、版心

版心：是指网页主题内容所在的地区。一样平常在欣赏器窗口程度居中位置，常见的宽度值为960px、980px、1000px、1200px等。
二、结构流程

为了进步网页制作的服从，结构时必要服从肯定的结构流程，具体如下：


  • 确定页面版心
  • 分析页面中的行模块，以及每个行模块中的列模块
  • 制作HTML结构
  • CSS初始化，然后开始运用盒子模子的原理，通过CID+CSS结构来控制网页的各个模块
三、一列固定宽度且居中

  1. <html>
  2.         <head>
  3.                 <style>
  4.                 * {
  5.                         padding: 0;
  6.                         margin: 0;
  7.                 }
  8.                 .top,
  9.                 .banner,
  10.                 .main,
  11.                 .footer {
  12.                         width: 960px;
  13.                         margin: 10px auto;
  14.                         text-align: center;
  15.                 }
  16.                 .top {
  17.                         height: 100px;
  18.                         background-color: pink;
  19.                 }
  20.                 .banner {
  21.                         height: 120px;
  22.                         background-color: skyblue;
  23.                 }
  24.                 .main {
  25.                         height: 500px;
  26.                         background-color: red;
  27.                 }
  28.                 .footer {
  29.                         height: 150px;
  30.                         background-color: #ccc;
  31.                 }
  32.                 </style>
  33.         </head>
  34.         <body>
  35.                 <div class="top">top</div>
  36.                 <div class="banner">banner</div>
  37.                 <div class="main">main</div>
  38.                 <div class="footer">footer</div>
  39.         </body>
  40. </html>
复制代码
四、两列左窄右宽

  1. <html>
  2.         <head>
  3.                 <style>
  4.                 * {
  5.                         padding: 0;
  6.                         margin: 0;
  7.                 }
  8.                 .top,
  9.                 .banner,
  10.                 .main,
  11.                 .footer {
  12.                         width: 960px;
  13.                         margin: 10px auto;
  14.                         text-align: center;
  15.                 }
  16.                 .top {
  17.                         height: 100px;
  18.                         background-color: pink;
  19.                 }
  20.                 .banner {
  21.                         height: 120px;
  22.                         background-color: skyblue;
  23.                 }
  24.                 .main {
  25.                         height: 500px;
  26.                         background-color: red;
  27.                 }
  28.                 .footer {
  29.                         height: 150px;
  30.                         background-color: #ccc;
  31.                 }
  32.                 .main .left {
  33.                         width: 360px;
  34.                         height: 500px;
  35.                         float: left;
  36.                         background-color: white;
  37.                 }
  38.                 .main .right {
  39.                         width: 590px;
  40.                         height: 500px;
  41.                         margin-left: 10px;
  42.                         float: left;
  43.                         background-color: white;
  44.                 }
  45.                 </style>
  46.         </head>
  47.         <body>
  48.                 <div class="top">top</div>
  49.                 <div class="banner">banner</div>
  50.                 <div class="main">
  51.                         <div class="left">left</div>
  52.                         <div class="right">right</div>
  53.                 </div>
  54.                 <div class="footer">footer</div>
  55.         </body>
  56. </html>
复制代码
五、通栏均匀分布型

  1. <html>
  2.         <head>
  3.                 <style>
  4.                 * {
  5.                         padding: 0;
  6.                         margin: 0;
  7.                 }
  8.                 ul {
  9.                         list-style: none;
  10.                 }
  11.                 .top,
  12.                 .banner,
  13.                 .main,
  14.                 .footer {
  15.                         width: 960px;
  16.                         margin: 10px auto;
  17.                         text-align: center;
  18.                 }
  19.                 .top {
  20.                         height: 100px;
  21.                         background-color: pink;
  22.                 }
  23.                 .banner {
  24.                         height: 120px;
  25.                         background-color: skyblue;
  26.                 }
  27.                 .main {
  28.                         height: 500px;
  29.                         background-color: red;
  30.                 }
  31.                 .footer {
  32.                         height: 150px;
  33.                         background-color: #ccc;
  34.                 }
  35.                 .main ul li:nth-child(odd) {
  36.                         width: 240px;
  37.                         height: 240px;
  38.                         background-color: deeppink;
  39.                         float: left;
  40.                 }
  41.                 .main ul li:nth-child(even) {
  42.                         width: 240px;
  43.                         height: 240px;
  44.                         background-color: hotpink;
  45.                         float: left;
  46.                 }
  47.                 </style>
  48.         </head>
  49.         <body>
  50.                 <div class="top">top</div>
  51.                 <div class="banner">banner</div>
  52.                 <div class="main">
  53.                         <ul>
  54.                                 <li>1</li>
  55.                                 <li>2</li>
  56.                                 <li>3</li>
  57.                                 <li>4</li>
  58.                         </ul>
  59.                 </div>
  60.                 <div class="footer">footer</div>
  61.         </body>
  62. </html>
复制代码
回复

使用道具 举报

返回列表

盛世宏图
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表