html 測試 左單右單

html 測試 單入單出

html 測試 上入下出

html 測試 左入右出

顯示具有 標簽 div @ 區塊 標籤的文章。 顯示所有文章
顯示具有 標簽 div @ 區塊 標籤的文章。 顯示所有文章

2021年8月14日 星期六

CSS語法應用:overflow控制捲軸

CSS overflow 控制捲軸

00
00

2021年8月9日 星期一

display-table-table-cell :

display:table-cell || display:table-row || display:table-cell
text-align:left/center/right || vertical-align:top/middle/bottom
00
描述
display:table 顯示 表格(類似 <table>)
display:table-row-group 行的分組 (類似 <tbody>)
display:table-header-group 表格頭組 (類似 <thead>)
display:table-footer-group 表格尾組(類似 <tfoot>)
display:table-row 表格換行(類似 <tr>)
display:table-column-group 列的分組 (類似 <colgroup>)
display:table-column 格列顯示(類似 <col>)
display:table-cell 表格單元格(類似 <td> 和 <th>)
display:table-caption 表格標題(類似 <caption>)
#html#script#display:table-cell#display:table-row#display:table#text-align:right
#text-align:center#text-align:left#vertical-align:top#vertical-align:middle#vertical-align:bottom

2021年8月7日 星期六

<div> 垂直置中 / CSS position: relative /position: absolute;

<div> 垂直置中 / CSS position: relative /position: absolute;

<style>
.box{ width: 700px;
      height: 400px;
      border: 1px solid #f00;
      position: relative;
      margin: auto; }

.box6 .txt{ width: 500px;
            font-size: 20px;
            border: 1px solid #f00;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%); }
</style>

<div class="box box6 ">
  <div class="txt">
<pre>.box{ width: 700px;
      height: 400px;
      border: 1px solid #f00;
      position: relative;
      margin: auto; }

.box6 .txt{ width: 500px;
            font-size: 20px;
            border: 1px solid #f00;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%)}<pre>
</div>
</div>
 

00

2021年8月6日 星期五

<div> 垂直置中 / CSS display: grid

<div> 垂直置中 / CSS display: grid

00
00
00

1.display: flex + justify-content: center + align-items: center;;

<div> 垂直置中 / CSS display:flex

00
00
00
00

<div> 垂直置中 / CSS display: table-cell;

<div> 垂直置中 / CSS display: table-cell;

00