整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          html5、CSS3入門(mén)學(xué)習(xí)筆記2023-9-10分欄

          題一:

          在html5、CSS3語(yǔ)言中,在一個(gè)div區(qū)域內(nèi)劃分4列div區(qū)域。

          樣例代碼:

          可以使用CSS的flexbox布局來(lái)實(shí)現(xiàn)在一個(gè)div區(qū)域內(nèi)劃分4列div區(qū)域的效果。以下是一個(gè)樣例代碼:

          <!DOCTYPE html>
          <html>
          <head>
            <style>
              .container {
                display: flex;
                flex-wrap: wrap;
              }
          
              .column {
                width: 25%;
                padding: 10px;
                box-sizing: border-box;
              }
          
              .column:nth-child(odd) {
                background-color: #f2f2f2;
              }
          
              .column:nth-child(even) {
                background-color: #ccc;
              }
            </style>
          </head>
          <body>
            <div class="container">
              <div class="column">
                <h2>Column 1</h2>
                <p>This is the content of column 1.</p>
              </div>
              <div class="column">
                <h2>Column 2</h2>
                <p>This is the content of column 2.</p>
              </div>
              <div class="column">
                <h2>Column 3</h2>
                <p>This is the content of column 3.</p>
              </div>
              <div class="column">
                <h2>Column 4</h2>
                <p>This is the content of column 4.</p>
              </div>
            </div>
          </body>
          </html>

          在上面的代碼中,我們使用了display: flex;來(lái)將容器設(shè)置為flex布局,通過(guò)flex-wrap: wrap;使得內(nèi)容在行不夠的情況下自動(dòng)換行。然后,每個(gè)列的寬度設(shè)置為25%,通過(guò)padding: 10px;設(shè)置列的內(nèi)邊距。通過(guò)box-sizing: border-box;設(shè)置盒子模型為border-box以保證內(nèi)邊距不會(huì)撐開(kāi)列的寬度。最后,使用:nth-child選擇器分別給奇數(shù)列和偶數(shù)列設(shè)置不同的背景顏色,以便區(qū)分列的樣式。

          問(wèn)題二:

          在html5、CSS3語(yǔ)言中,我想把頁(yè)面分為4個(gè)區(qū)域,上面第一區(qū)域div為頁(yè)面全寬、高度100px;中間分為左右兩個(gè)區(qū)域div,高度600px;最下面區(qū)域div為頁(yè)面全寬、高度100px。

          樣例代碼:

          <!DOCTYPE html>
          <html>
          <head>
            <style>
              html, body {
                height: 100%;
                margin: 0;
                padding: 0;
              }
              #header, #content, #footer {
                width: 100%;
                position: relative;
              }
              #header {
                height: 100px;
                background-color: #ccc;
              }
              #content {
                height: 600px;
                background-color: #ddd;
              }
              #left, #right {
                width: 50%;
                height: 100%;
                float: left;
              }
              #left {
                background-color: #eee;
              }
              #right {
                background-color: #fff;
              }
              #footer {
                height: 100px;
                background-color: #ccc;
              }
            </style>
          </head>
          <body>
            <div id="header"></div>
            <div id="content">
              <div id="left"></div>
              <div id="right"></div>
            </div>
            <div id="footer"></div>
          </body>
          </html>

          說(shuō)明:

          1. 首先,設(shè)置html和body的高度為100%以確保頁(yè)面占滿(mǎn)整個(gè)屏幕,并去除默認(rèn)的邊距和內(nèi)邊距。
          2. 頁(yè)面分為三個(gè)區(qū)域,分別是header、content和footer,它們的寬度都設(shè)置為100%,并且相對(duì)定位。
          3. header區(qū)域的高度設(shè)置為100px,并設(shè)置背景顏色為#ccc。
          4. content區(qū)域的高度設(shè)置為600px,并設(shè)置背景顏色為#ddd。其中,content區(qū)域又分為左右兩個(gè)區(qū)域,分別是left和right,它們的寬度都設(shè)置為50%,高度設(shè)置為100%,并且浮動(dòng)在左側(cè)。
          5. left區(qū)域的背景顏色設(shè)置為#eee,right區(qū)域的背景顏色設(shè)置為#fff。
          6. footer區(qū)域的高度設(shè)置為100px,并設(shè)置背景顏色為#ccc。

          終效果

          最近個(gè)人項(xiàng)目需要實(shí)現(xiàn)一個(gè)左右分欄且左右寬度可以手工拖動(dòng)調(diào)節(jié)的web頁(yè)面,這里記錄下實(shí)現(xiàn)過(guò)程,效果如下圖,整個(gè)web頁(yè)面包含左右兩個(gè)分欄,中間是個(gè)4px像素的拖動(dòng)條,鼠標(biāo)移動(dòng)到上面可以左右拖動(dòng)改變左右分欄的寬度。

          HTML

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link rel="stylesheet" href="./style.css">
              <title>web分欄寬度可調(diào)節(jié)示例</title>
          </head>
          <body>
              <div id="container">
                  <div id="left">left</div>
                  <div id="resize"></div>
                  <div id="right">right</div>
              </div>
          
              <script src="resize.js"></script>
          </body>
          </html>

          CSS

          body {
              margin: 0;
              overflow-y: hidden;
          }
          #container {
              width: 100%;
              height: 100vh;
              display: flex;
              flex-wrap: nowrap;
              align-items: stretch;
          }
          #left {
              width: calc(30% - 4px);
              background-color:indianred;
          }
          #resize {
              width: 4px;
              height: 100vh;
              cursor: ew-resize;
          }
          #resize:hover {
              background-color: blue;
          }
          #right {
              width: 70%;
              /* height: 100vh; */
              background-color:green;
          }

          javascript

          家好,我是三木。

          這篇文章,替大家匯總了css的布局方式,在每個(gè)布局的結(jié)尾附上了我認(rèn)為比較好的文章鏈接,不僅僅可以當(dāng)作學(xué)習(xí)資料,也可以當(dāng)作方法的查詢(xún)手冊(cè),以后開(kāi)發(fā)的時(shí)候忘記了某個(gè)屬性就來(lái)查查。


          看完推薦的文章保準(zhǔn)解決你 99% 的css布局問(wèn)題


          每篇文章不僅僅包含介紹,還有代碼案例,以及如w3c網(wǎng)站的在線(xiàn)代碼編輯,可以自己修改屬性嘗試。


          普通布局

          使用方法——display: block/inline/inline-block

          根據(jù)CSS規(guī)范的規(guī)定,每一個(gè)網(wǎng)頁(yè)元素都有一個(gè)display屬性,用于確定該元素的類(lèi)型,每一個(gè)元素都有默認(rèn)的display屬性值,比如div元素,它的默認(rèn)display屬性值為“block”,成為“塊級(jí)”元素(block-level);而span元素的默認(rèn)display屬性值為“inline”,稱(chēng)為“行內(nèi)”元素。

          資料文章:

          w3c:https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display

          w3c:https://www.w3school.com.cn/css/css_inline-block.asp

          用法:https://zhuanlan.zhihu.com/p/65353887

          浮動(dòng)布局

          使用方法:float:left/right

          指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置,允許文本和內(nèi)聯(lián)元素環(huán)繞它。

          float屬性用于定位和格式化內(nèi)容,例如讓圖像向左浮動(dòng)到容器中的文本。

          float的值有:

          • left- 元素浮動(dòng)到其容器的左側(cè)
          • right- 元素浮動(dòng)到其容器的右側(cè)
          • none- 元素不浮動(dòng)(將僅顯示在文本中出現(xiàn)的位置)。這是默認(rèn)的
          • inherit- 元素繼承其父元素的浮點(diǎn)值

          資料文章:

          w3c:https://www.w3schools.com/css/css_float.asp

          MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

          CSS深入理解之float浮動(dòng):https://segmentfault.com/a/1190000014554601

          彈性布局

          使用方法——display:flex/inline-flex

          Flexible Box 模型,通常被稱(chēng)為 flexbox,是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。

          容器默認(rèn)存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開(kāi)始位置(與邊框的交叉點(diǎn))叫做main start,結(jié)束位置叫做main end;交叉軸的開(kāi)始位置叫做cross start,結(jié)束位置叫做cross end。

          項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size,占據(jù)的交叉軸空間叫做cross size。

          容器有以下屬性:

          • flex-direction-屬性決定主軸的方向(即項(xiàng)目的排列方向)
          • flex-wrap-定義設(shè)置換行模式
          • flex-flow-定義了項(xiàng)目在主軸上的對(duì)齊方式
          • justify-content-定義項(xiàng)目在交叉軸上如何對(duì)齊
          • align-items-定義項(xiàng)目在交叉軸上如何對(duì)齊
          • align-content-定義了多根軸線(xiàn)的對(duì)齊方式

          資料文章:

          w3c:https://www.w3schools.com/css/css3_flexbox_container.asp

          Flex 布局教程:語(yǔ)法篇:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

          深度解析 CSS Flexbox 布局:https://juejin.cn/post/6844904116141948936

          48張小圖帶你領(lǐng)略flex布局之美:https://juejin.cn/post/6866914148387651592

          定位布局

          使用方法——position:absolute/relative...

          給元素設(shè)置postion屬性后,就可以定義該元素的top,bottom,left,right四個(gè)屬性。當(dāng)然postion的值不同,對(duì)應(yīng)的top,bottom,left,right這四個(gè)屬性的值代表的含義也不相同


          position屬性用來(lái)指定一個(gè)元素在網(wǎng)頁(yè)上的位置,一共有5種定位方式:

          • static-靜態(tài)
          • relative-相對(duì)定位
          • fixed-固定定位
          • absolute-絕對(duì)定位
          • sticky-粘性定位

          資料文章:

          w3c: https://www.w3schools.com/css/css_positioning.asp

          MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

          CSS 定位詳解:https://www.ruanyifeng.com/blog/2019/11/css-position.html

          表格布局

          使用方法——display:table/table-row/table-cell....

          有兩種方式使用表格布局 -HTML Table(<table>標(biāo)簽)和CSS Table(display:table 等相關(guān)屬性)。

          HTML Table是指使用原生的<table>標(biāo)簽,而CSS Table是指用CSS屬性模仿HTML 表格的模型。


          table布局的display總共包含如下值

          • table:指定對(duì)象作為塊元素級(jí)的表格,相當(dāng)于html標(biāo)簽<table>
          • inline-table:指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格,相當(dāng)于html標(biāo)簽<table>
          • table-caption:指定對(duì)象作為表格標(biāo)題,相當(dāng)于html標(biāo)簽<caption>
          • table-cell:指定對(duì)象作為表格單元格,相當(dāng)于html標(biāo)簽<td>
          • table-row:指定對(duì)象作為表格行,相當(dāng)于html標(biāo)簽<tr>
          • table-row-group:指定對(duì)象作為表格行組,相當(dāng)于html標(biāo)簽<tbody>
          • table-column:指定對(duì)象作為表格列,相當(dāng)于html標(biāo)簽<col>
          • table-column-group:指定對(duì)象作為表格列組顯示,相當(dāng)于html標(biāo)簽<colgroup>
          • table-header-group:指定對(duì)象作為表格標(biāo)題組,相當(dāng)于html標(biāo)簽<thead>
          • table-footer-group:指定對(duì)象作為表格腳注組,相當(dāng)于html標(biāo)簽<tfoot>

          資料文章:

          display:table的幾個(gè)用法:https://blog.51cto.com/u_4048786/3205160

          css table布局大法:https://segmentfault.com/a/1190000007007885

          display:table的用法:https://www.jianshu.com/p/037a706ba9e9

          柵格布局

          使用方法 ——display:grid

          網(wǎng)格布局將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局。

          column-gap Specifies the gap between the columns

          • grid:設(shè)置grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow屬性
          • grid-area:設(shè)置grid-row-start, grid-column-start, grid-row-end, grid-column-end屬性
          • grid-auto-columns:設(shè)置瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬
          • grid-auto-flow:設(shè)置排序方式
          • grid-auto-rows:設(shè)置瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的行高
          • grid-column :設(shè)置grid-column-start and、grid-column-end properties
          • grid-column-end:設(shè)置右邊框所在的垂直網(wǎng)格線(xiàn)
          • grid-column-gap:設(shè)置列間距
          • grid-column-start: 設(shè)置左邊框所在的垂直網(wǎng)格線(xiàn)
          • grid-gap: 設(shè)置grid-row-gap、grid-column-gap屬性
          • grid-row: 設(shè)置grid-row-start、grid-row-end屬性
          • grid-row-end: 設(shè)置下邊框所在的水平網(wǎng)格線(xiàn)
          • grid-row-gap: 設(shè)置行間距
          • grid-row-start:設(shè)置上邊框所在的水平網(wǎng)格線(xiàn)
          • grid-template: 設(shè)置grid-template-rows,、grid-template-columns、grid-areas屬性
          • grid-template-areas:設(shè)置網(wǎng)格的區(qū)域,一個(gè)區(qū)域由多少單元格組成
          • grid-template-columns:設(shè)置列寬
          • grid-template-rows:設(shè)置行高
          • row-gap:設(shè)置行與行之間的間距

          資料文章:

          w3c:https://www.w3schools.com/css/css_grid.asp

          CSS Grid 網(wǎng)格布局教程:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

          Grid 布局:https://juejin.cn/post/6854573220306255880

          A Complete Guide to Grid:https://css-tricks.com/snippets/css/complete-guide-grid/


          多列布局

          使用方法——column-count

          column-count: length | auto

          column-width:interger | auto

          • column-count描述元素的列數(shù)
          • column-fill:設(shè)置多列內(nèi)容的平衡填充模式
          • column-gap屬性用來(lái)設(shè)置元素列之間的間隔(gutter)大小
          • column-rule屬性規(guī)定了列與列之間的直線(xiàn)
          • column-rule-color設(shè)置在多列布局中被畫(huà)在兩列之間的規(guī)則(線(xiàn)條)的顏色
          • column-rule-style設(shè)置在多列布局中被畫(huà)在兩列之間的規(guī)則(線(xiàn)條)的樣式
          • column-rule-width設(shè)置在多列布局中被畫(huà)在兩列之間的規(guī)則(線(xiàn)條)的寬度
          • column-span設(shè)置某一個(gè)內(nèi)容是否跨多欄顯示。
          • columns用來(lái)設(shè)置元素的列寬和列數(shù)

          資料文章:

          淺談CSS3多列布局:https://juejin.cn/post/6844903450623524872

          CSS columns分欄布局教程:https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/


          主站蜘蛛池模板: 亚洲AV无码一区二区三区久久精品| 日本免费一区二区三区最新| 一区国产传媒国产精品| 国产一区二区三区在线看片| 99精品一区二区免费视频| 午夜视频一区二区三区| 亚洲一区二区三区在线观看蜜桃| 国产一在线精品一区在线观看| 天堂一区二区三区在线观看| 人妻少妇精品视频一区二区三区| 国产午夜精品免费一区二区三区| 无码视频免费一区二三区| 国内自拍视频一区二区三区 | 国产成人AV一区二区三区无码 | 免费无码毛片一区二区APP| 久久综合一区二区无码| 色一情一乱一伦一区二区三区日本| 亚洲av无码成人影院一区| 亚洲日韩AV一区二区三区四区 | 国语对白一区二区三区| 色综合视频一区中文字幕| 久久久无码精品人妻一区| 亚洲精品无码一区二区| 国产福利无码一区在线| 精产国品一区二区三产区| 日韩在线视频一区| 日韩高清一区二区| 亚洲AV成人精品日韩一区18p| 免费国产在线精品一区| 精品一区二区三区四区在线| 久久国产精品免费一区| 国语精品一区二区三区| 麻豆亚洲av熟女国产一区二| 精品少妇人妻AV一区二区三区| 99精品一区二区三区无码吞精| 无码日本电影一区二区网站| 国产精品亚洲专区一区 | 久久精品一区二区三区资源网| 无码人妻AⅤ一区二区三区| 成人区精品一区二区不卡亚洲 | 国产无人区一区二区三区|