DIV+CSS 网页布局之：三列布局 - 彼岸时光（css实现三列布局）

25-04-26 1

本文将分享DIV+CSS网页布局之：三列布局-彼岸时光的详细内容，并且还将对css实现三列布局进行详尽解释，此外，我们还将为大家带来关于unvalid,OK、css三列布局、css响应式三列布局、CS

本文将分享DIV+CSS 网页布局之：三列布局 - 彼岸时光的详细内容，并且还将对css实现三列布局进行详尽解释，此外，我们还将为大家带来关于

unvalid,
OK、css 三列布局、css 响应式三列布局、CSS 常用命名 - 彼岸时光的相关知识，希望对你有所帮助。

本文目录一览：

DIV+CSS 网页布局之：三列布局 - 彼岸时光（css实现三列布局）
unvalid,
OK
css 三列布局
css 响应式三列布局
CSS 常用命名 - 彼岸时光

DIV+CSS 网页布局之：三列布局 - 彼岸时光（css实现三列布局）

1、宽度自适应三列布局

　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。

<span> 1</span> <span><span>DOCTYPE html</span><span>&gt;</span>
<span> 2</span> <span><span>html</span><span>&gt;</span>
<span> 3</span> <span><span>head</span><span>&gt;</span>
<span> 4</span>     <span><span>meta </span><span>charset</span><span>="UTF-8"</span><span>&gt;</span>
<span> 5</span>     <span><span>title</span><span>&gt;</span>三列布局<span></span><span>title</span><span>&gt;</span>
<span> 6</span> <span><span>style</span><span>&gt;</span>
<span> 7</span> <span>*</span><span>{</span><span>margin</span><span>:</span><span>0</span><span>;</span><span>padding</span><span>:</span><span>0</span><span>;</span><span>}</span>
<span> 8</span> <span>#herder</span><span>{</span>
<span> 9</span> <span>    height</span><span>:</span><span>50px</span><span>;</span>
<span>10</span> <span>    background</span><span>:</span><span>blue</span><span>;</span>
<span>11</span> <span>}</span>
<span>12</span> <span>#main</span><span>{</span>
<span>13</span> <span>    width</span><span>:</span><span>100%</span><span>;</span>
<span>14</span> <span>    overflow</span><span>:</span><span>hidden</span><span>;</span>
<span>15</span> <span>}</span>
<span>16</span> <span>#main .main-left</span><span>{</span>
<span>17</span> <span>    width</span><span>:</span><span>25%</span><span>;</span>
<span>18</span> <span>    height</span><span>:</span><span>800px</span><span>;</span>
<span>19</span> <span>    background</span><span>:</span><span>red</span><span>;</span>
<span>20</span> <span>    float</span><span>:</span><span>left</span><span>;</span>
<span>21</span> <span>}</span>
<span>22</span> <span>#main .main-center</span><span>{</span>
<span>23</span> <span>    width</span><span>:</span><span>50%</span><span>;</span>
<span>24</span> <span>    height</span><span>:</span><span>800px</span><span>;</span>
<span>25</span> <span>    background</span><span>:</span><span>lightgreen</span><span>;</span>
<span>26</span> <span>    float</span><span>:</span><span>left</span><span>;</span>
<span>27</span> <span>}</span>
<span>28</span> <span>#main .main-right</span><span>{</span>
<span>29</span> <span>    width</span><span>:</span><span>25%</span><span>;</span>
<span>30</span> <span>    height</span><span>:</span><span>800px</span><span>;</span>
<span>31</span> <span>    background</span><span>:</span><span>pink</span><span>;</span>
<span>32</span> <span>    float</span><span>:</span><span>right</span><span>;</span>
<span>33</span> <span>}</span>
<span>34</span> <span>#footer</span><span>{</span>
<span>35</span> <span>    height</span><span>:</span><span>50px</span><span>;</span>
<span>36</span> <span>    background</span><span>:</span><span>gray</span><span>;</span>
<span>37</span> <span>}</span>
<span>38</span> <span></span><span>style</span><span>&gt;</span>
<span>39</span> <span></span><span>head</span><span>&gt;</span>
<span>40</span> <span><span>body</span><span>&gt;</span>
<span>41</span> <span><span>div </span><span>id</span><span>="herder"</span><span>&gt;</span>页头<span></span><span>div</span><span>&gt;</span>
<span>42</span> <span><span>div </span><span>id</span><span>="main"</span><span>&gt;</span>
<span>43</span>     <span><span>div </span><span>class</span><span>="main-left"</span><span>&gt;</span>左列<span></span><span>div</span><span>&gt;</span>
<span>44</span>     <span><span>div </span><span>class</span><span>="main-center"</span><span>&gt;</span>中间<span></span><span>div</span><span>&gt;</span>
<span>45</span>     <span><span>div </span><span>class</span><span>="main-right"</span><span>&gt;</span>右列<span></span><span>div</span><span>&gt;</span>
<span>46</span> <span></span><span>div</span><span>&gt;</span>
<span>47</span> <span><span>div </span><span>id</span><span>="footer"</span><span>&gt;</span>页脚<span></span><span>div</span><span>&gt;</span>
<span>48</span> <span></span><span>body</span><span>&gt;</span>
<span>49</span> <span></span><span>html</span><span>&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span>

登录后复制

2、左右两列固定宽度，中间内容宽度自适应

　　要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。

<span> 1</span> <span><span>DOCTYPE html</span><span>&gt;</span>
<span> 2</span> <span><span>html</span><span>&gt;</span>
<span> 3</span> <span><span>head</span><span>&gt;</span>
<span> 4</span>     <span><span>meta </span><span>charset</span><span>="UTF-8"</span><span>&gt;</span>
<span> 5</span>     <span><span>title</span><span>&gt;</span>两边固定中间自适应布局<span></span><span>title</span><span>&gt;</span>
<span> 6</span> <span><span>style</span><span>&gt;</span>
<span> 7</span> <span>*</span><span>{</span><span>margin</span><span>:</span><span>0</span><span>;</span><span>padding</span><span>:</span><span>0</span><span>;</span><span>}</span>
<span> 8</span> <span>#herder</span><span>{</span>
<span> 9</span> <span>    height</span><span>:</span><span>50px</span><span>;</span>
<span>10</span> <span>    background</span><span>:</span><span>blue</span><span>;</span>
<span>11</span> <span>}</span>
<span>12</span> <span>#main</span><span>{</span>
<span>13</span> <span>    width</span><span>:</span><span>100%</span><span>;</span>
<span>14</span> <span>    position</span><span>:</span><span>relative</span><span>;</span>
<span>15</span> <span>}</span>
<span>16</span> <span>#main .main-left</span><span>{</span>
<span>17</span> <span>    width</span><span>:</span><span>200px</span><span>;</span>
<span>18</span> <span>    height</span><span>:</span><span>800px</span><span>;</span>
<span>19</span> <span>    background</span><span>:</span><span>red</span><span>;</span>
<span>20</span> <span>    position</span><span>:</span><span>absolute</span><span>;</span>
<span>21</span> <span>    left</span><span>:</span><span>0</span><span>;</span>
<span>22</span> <span>    top</span><span>:</span><span>0</span><span>;</span>
<span>23</span> <span>}</span>
<span>24</span> <span>#main .main-center</span><span>{</span>
<span>25</span> <span>    height</span><span>:</span><span>800px</span><span>;</span>
<span>26</span> <span>    background</span><span>:</span><span>lightgreen</span><span>;</span>
<span>27</span> <span>    margin</span><span>:</span><span>0 310px 0 210px</span><span>;</span>
<span>28</span> <span>}</span>
<span>29</span> <span>#main .main-right</span><span>{</span>
<span>30</span> <span>    width</span><span>:</span><span>300px</span><span>;</span>
<span>31</span> <span>    height</span><span>:</span><span>800px</span><span>;</span>
<span>32</span> <span>    background</span><span>:</span><span>pink</span><span>;</span>
<span>33</span> <span>    position</span><span>:</span><span>absolute</span><span>;</span>
<span>34</span> <span>    right</span><span>:</span><span>0</span><span>;</span>
<span>35</span> <span>    top</span><span>:</span><span>0</span><span>;</span>
<span>36</span> <span>}</span>
<span>37</span> <span>#footer</span><span>{</span>
<span>38</span> <span>    height</span><span>:</span><span>50px</span><span>;</span>
<span>39</span> <span>    background</span><span>:</span><span>gray</span><span>;</span>
<span>40</span> <span>}</span>
<span>41</span> <span></span><span>style</span><span>&gt;</span>
<span>42</span> <span></span><span>head</span><span>&gt;</span>
<span>43</span> <span><span>body</span><span>&gt;</span>
<span>44</span> <span><span>div </span><span>id</span><span>="herder"</span><span>&gt;</span>页头<span></span><span>div</span><span>&gt;</span>
<span>45</span> <span><span>div </span><span>id</span><span>="main"</span><span>&gt;</span>
<span>46</span>     <span><span>div </span><span>class</span><span>="main-left"</span><span>&gt;</span>左列<span></span><span>div</span><span>&gt;</span>
<span>47</span>     <span><span>div </span><span>class</span><span>="main-center"</span><span>&gt;</span>设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。<span></span><span>div</span><span>&gt;</span>
<span>48</span>     <span><span>div </span><span>class</span><span>="main-right"</span><span>&gt;</span>右列<span></span><span>div</span><span>&gt;</span>
<span>49</span> <span></span><span>div</span><span>&gt;</span>
<span>50</span> <span><span>div </span><span>id</span><span>="footer"</span><span>&gt;</span>页脚<span></span><span>div</span><span>&gt;</span>
<span>51</span> <span></span><span>body</span><span>&gt;</span>
<span>52</span> <span></span><span>html</span><span>&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span>

登录后复制

<div /> unvalid, <div></div> OK

unvalid,
OK

<div /> is not a valid markup. A self-closing tag is not permitted.

You need to use the full version <div></div>.

A self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.

css 三列布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #464646;
        }
        .middle{
            height: 200px;
            margin: 0 310px 0 210px;
            background-color: #006486;
        }
        .right{
            height: 200px;
            width: 300px;
            position: absolute;
            right: 0;
            top: 0;
            background-color: #888888;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="left"></div>
</body>
</html>

css 响应式三列布局

CSS响应式设计指的是在不同分辨率下，网站能够根据设备大小自动排版的设计。在CSS中，响应式设计通常用于三列布局，这种布局可以让网站的页面自适应不同设备大小，从而提高了用户体验。

    .container {
        display: flex;
        flex-wrap: wrap;
    }

    .col-1,.col-2,.col-3 {
        Box-sizing: border-Box;
        padding: 10px;
    }

    .col-1 {
        flex-basis: 100%;
    }

    @media screen and (min-width: 600px) {
        .col-1 {
            flex: 1;
        }
        .col-2 {
            flex: 1;
        }
        .col-3 {
            flex: 1;
        }
    }

    @media screen and (min-width: 900px) {
        .col-1 {
            flex: 2;
        }
        .col-2 {
            flex: 1;
        }
        .col-3 {
            flex: 1;
        }
    }

css 响应式三列布局

上述代码实现的是一个简单的三列布局，其中的.container是一个包裹块，.col-1、.col-2、.col-3则表示三个子块。在不同宽度的屏幕下，子块的宽度会发生变化，从而实现页面自适应。

总的来说，CSS响应式设计的三列布局是一个重要的网页布局方式，它可以帮助网站在不同设备上得到更好的展示效果，提高用户体验。因此，网页设计师应该熟练掌握它的相关知识和技术。

CSS 常用命名 - 彼岸时光

　　在前端开发中，规范使用 div+css 命名，可以增强团队合作提高开发效率，有利于页面后期的维护和优化。

1、页面结构

　　wrap：外套、包裹，用于最外层。

　　wrapper：外套，用于页面外围控制整体布局宽度。

　　box：盒子，容器。

　　header：头部，用于页头部分。

立即学习“前端免费学习笔记（深入）”；

点击下载“修复打印机驱动工具”；

　　nav：导航，主导航。

　　main：主要区域，内容主体。

　　content/container：内容，内容容器。

　　sidebar：侧边栏。

　　footer：底部，用于页脚部分。

2、功能区块

　　left center right：左中右。

　　main-left：左侧主要布局。

　　main-right：右侧主要布局。

　　logo：网站 LOGO 标志。

　　search：搜索输入框。

　　loginbar：登录条。

　　regsiter：注册模块。

　　banner：广告，用于横幅广告条。

　　menu：菜单。

　　submenu：子菜单，二级菜单。

　　top：顶部。

　　topnav：顶导航。

　　mainnav：主导航。

　　subnav：子导航，二级导航。

　　leftsideBar：左导航。

　　rightsideBar：右导航。

　　topbar：顶部工具/菜单。

　　bottom：底部。

　　bottombar：底部工具栏。

　　tool：工具条。

　　shop：功能区，如购物车、收银台。

3、其他常用命名

　　title：栏目标题。

　　summary：摘要。

　　hot：热门热点信息，推荐。

　　msg：提示信息。

　　news：新闻。

　　list：列表，文章列表。

　　piclist：图片列表。

　　newslist：新闻列表。

　　search-output：搜索输出。

　　search-results：搜索结果。

　　drop/dropdown：下拉。

　　dropmenu/dorpdown-content：下拉菜单。

　　scroll：滚动。

　　homepage：首页。

　　subpage：子页面，二级页面。

　　tag：标签。

　　tab：标签页。

　　tips：小技巧。

　　ranking：排行。

　　vote：投票。

　　bth：按钮。

　　icon：图标。

　　arr/arrow：箭头。

　　status：状态。

　　note：注释。

　　skin：皮肤。

　　current：当前的。

　　active：活跃的，有效的。

　　download：下载。

　　friendLink：友情链接。

　　partner：合作伙伴。

　　joinus：加入我们。

　　sitemap：网站地图。

　　siteinfo：网站信息。

　　siteinfoLegar：法律声明。

　　announcement：公告。

　　guild：指南。

　　service：服务。

　　promotion：推广。

　　blog：博客。

　　forum：论坛。

4、产品相关命名

　　keyword：关键词。

　　products：产品。

　　products-prices：产品价格。

　　products-description：产品描述。

　　products-review：产品评论。

　　editor-review：编辑评论。

　　news-products：最新产品。

　　publisher：生产商。

　　screenshot：缩略图。

　　faqs：常见问题。

　　barnding：商标。

　　pay：充值。

　　reputation：信誉。

5、常用的文件命名

　　全局样式：global.css

　　布局结构：layout.css

　　基本共用：base.css

　　综合样式：style.css

　　主要的：master.css

　　模块：module.css

　　表单：forms.css

　　主题/网页换肤：themes.css

　　字体：font.css

　　打印：print.css

　　补丁：mend.css

　　私有样式/独立页面，根据实际情况，可以自定义命名 CSS 文件。

　　以上这些常用的文件命名，无需全部使用，根据实际情况，每个页面引用不超过 3 个 CSS 文件。

6、 ID 和 Class 命名规范

　　(1)、主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名，其他的都使用 class 属性命名。

　　(2)、命名规则须以内容优先，表现为辅。首先根据所要呈现的内容、功能来命名，如果内容实在无法找到合适的命名，可以再根据表现命名。

　　(3)、大多数情况下，命名都使用英文单词，可以增加代码的可读性，但特殊情况下，实在找不到合适的单词时，可以使用拼音命名，但必须简明，结构清晰。

　　(4)、ID 和 Class 命名尽量全部都使用小写，多个单词可以使用连字符（-）链接，命名可以使用数字，但不能以数字开头。

　　(5)、命名可以使用单词缩写，但必须确保是有效的缩写，即别人能看懂，不能自定义缩写。

我们今天的关于DIV+CSS 网页布局之：三列布局 - 彼岸时光和css实现三列布局的分享已经告一段落，感谢您的关注，如果您想了解更多关于

unvalid,
OK、css 三列布局、css 响应式三列布局、CSS 常用命名 - 彼岸时光的相关信息，请在本站查询。

本文标签：

DIV+CSS 网页布局之：三列布局 - 彼岸时光（css实现三列布局）