2018.12.15 2d形變,動畫,表格,多行文字垂直居中

阿新 • • 發佈：2018-12-14

1複習(過度,陰影,偽類設計邊框,)

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>複習預習</title>
 <link href="css/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
 <!-- 1.過渡 -->
 <style type="text/css">
  /*偽類 == class*/
  div.box:hover {
   background-color: green;

   height: 100px;
  }
  .box.b {
   background-color: yellow;
   /*持續時間 延遲時間 過渡屬性 過渡曲線*/
   transition: 1s .1s all cubic-bezier(0, 2.43, 0.82, 1.9);
   
   /*高度0結合overflow:hidden 等價於 影藏*/
   height: 10px;
   overflow: hidden;
  }
  
 </style>

 <!-- 2.陰影 -->
 <style type="text/css">
  .box {
   margin-top: 10px;
   /*x y 虛化 寬度 顏色*/
   box-shadow: 120px 0 100px 0 red, 240px 0 0px 10px blue;
  }
 </style>

 <!-- 3.偽類設計邊框 -->
 <style type="text/css">
  .box {
   width: 100px;
   height: 100px;
   background-color: yellow;
   position: relative;

   text-align: center;

  }
  .box:before {
   content: "";

   width: 90px;
   height: 1px;
   background-color: #000;
   
   position: absolute;
   top: 49.5px;
   left: 5px;
  }
  .box:after {
   content: "";

   width: 1px;
   height: 90px;
   background-color: #000;
   
   position: absolute;
   top: 5px;
   left: 49.5px;
  }
  .box a {
   line-height: 100px;
  }
 </style>
 <div class="box b" id="box">
  <a href="" class="fa fa-arrows-alt fa-3x fa-spin"></a>
 </div>



 <!-- 1.2d形變 -->
 <!-- 2.動畫(瞭解) -->
 <!-- 3.table表格 => 做demo -->
 <!-- 4.小米 -->
</body>
</html>

2形變


總結
/*1.形變參考點: 三軸交界點*/
transform-origin: x軸座標 y軸座標;

/*2.旋轉 rotate deg*/
transform: rotate(720deg);

/*偏移 translate px*/
transform: translateX(200px) translateY(200px);

/*縮放 scale 無單位*/
transform: scale(x軸比例, y軸比例)

/*注: 可以多形變, 空格隔開書寫在一條transform屬性中, 順序一般會影響形變結果*/
/*形變不改變盒子佈局, 只拿形變做動畫*/s

2.1形變程式碼演示


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>2d形變</title>
 <style type="text/css">
  div {
   width: 50px;
   height: 50px;
   background-color: red;
   margin: 30px auto 0;
   text-align: center;
   line-height: 50px;
   transition: 3s;
   
   /*形變參考點: 三軸交界點*/
   /*transform-origin: 0 0;*/
  }
  .d1 {
   /*形變: 只操作自身顯示圖層(讓圖層發生變化), 不影響盒子佈局*/
   /*注: 不拿形變來佈局, 只能形變來完成動畫*/
   /*transform: rotate(45deg);*/
   /*transform: scale(3);*/
   /*transform: translateY(100px);*/
   /*margin-top: 50px;*/
  }

  
  .d2:hover {
   /*旋轉: 旋轉的是角度 deg*/
   /*transform: rotate(720deg);*/
   /*順時針轉20圈,360度1圈,z軸*/
   transform: rotateZ(7200deg);
  }
  .d3:hover {
   /*順時針轉20圈,360度1圈,y軸*/
   transform: rotateY(7200deg);
  }

  .d4:hover {
   /*偏移: 偏移的是距離 px*/
   /*如果需要傳送多狀態形變,需要分別寫在一條transform屬性設定中*/
   /*各個形變之間用空格隔開*/
   /*順序一般會影響結果*/
   /*transform: translateY(100px) translateX(100px);*/
   
   /*不能這麼書寫: 所有形變效果的實現都是對transform一個屬性進行設定*/
   /*下方這麼設定,第二次賦值會覆蓋第一次賦值(只能保留最後一次賦值)*/
   /*向y軸或x軸偏移最下面的生效*/
   transform: translateX(100px);
   transform: translateY(100px);
  }
  .d5:hover {
   /*向x軸偏移20圈*/
   transform: translateX(100px) rotate(7200deg);
   /*transform: rotate(7200deg) translateX(100px);*/
  }
  .d6:hover {
   /*縮放: 縮放的是比例 無單位*/
   /*x軸放大3倍,y軸放大0.5倍*/
   transform: scale(3, 0.5);
   /*transform: scaleX(3) scaleY(0.5);*/
  }
  .d7:hover {
   /*x軸偏移100px,20圈,放大2倍*/
   transform: translateX(100px) rotate(720deg) scale(2);
  }
  .d8:hover {
   margin-left: 1200px;
  }
 </style>
</head>
<body>
 <div class="d1">1</div>
 <div class="d2">2</div>
 <div class="d3">3</div>
 <div class="d4">4</div>
 <div class="d5">5</div>
 <div class="d6">6</div>
 <div class="d7">7</div>
 <div class="d8"></div>
</body>
</html>

3動畫


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>動畫</title>
 <style type="text/css">
  .box {
   width: 100px;
   height: 100px;
   background-color: red;
   margin-left: 200px;
   margin-top: 50px;
  }

  /*實現動畫*/
  /*1.設定動畫體*/
  /*2.設定動畫屬性*/
  
  /*1.設定動畫體
  @keyframes 動畫名 {
   多種狀態的動畫體
  }
  */
  /*2.設定動畫屬性
  .box {
   animation: 動畫相關屬性;
  }
  */
  @keyframes hehe {
   /*起點省略採用的就是初始狀態*/
   0% {}
   33.3% {
    /*前33.3%時間移動左邊*/
    margin-left: 800px;
    margin-top: 50px;
   }
   /*然後66.6%時間移動左下*/
   66.6% {
    margin-left: 500px;
    margin-top: 300px;
   }
   /*終點需要設定,最後回原位*/
   100% {
    margin-left: 200px;
    margin-top: 50px;
   }
  }
  .box {
   /*animation: 動畫名 時間 運動次數(無限次:infinite) 運動曲線,能設定3d*/
   animation: hehe 2s 1 linear;

  }


 </style>
</head>
<body>
 <div class="box"></div>
</body>
</html>

4表格


<table>
    <caption>表格標題</caption>
   <thead>
       <tr>
           <th>標題</th>
           <th>標題</th>
           <th>標題</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>單元格</td>
           <td>單元格</td>
           <td>單元格</td>
       </tr>
        
   </tbody>
   <tfoot>
       <tr>
           <td>單元格</td>
           <td>單元格</td>
           <td>單元格</td>
       </tr>
   </tfoot>
</table>
table的全域性屬性:
border="1" 設定邊框寬度
cellspacing="10" 單元格間的間距
cellpadding="10" 單元格的內邊距
rules="rows | cols | groups | all" 邊框的保留格式

td的全域性屬性
rowspan='2' 合併兩行單元格
colspan='3' 合併三列單元格

table的高度: 由內容和設定高度中的大值決定

table-cell: 可以巢狀任意型別標籤, 可以快速實現多行文字垂直居中

<!--------------------------------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>表格</title>
 <style type="text/css">
  .table1 {
   width: 500px;
   height: 500px;
   display: none;
  }
  th, td {
   padding: 20px;
  }

  .table2 td {
   /*border: 10px solid black;*/
  }
 </style>
</head>
<body>
 <!-- table的display: table -->
 <!-- table顯示規則注意點: 當設定的盒子高度不足夠顯示內容時, 盒子高度由內容撐開, 當設定的高度大於顯示內容所需高度,採用設定的高度 -->

 <!-- border: 設定邊框寬度 -->
 <!-- cellspacing: 單元格間的間距 -->
 <!-- cellpadding: 單元格的內邊距 == th, td設定padding -->
 <table class="table1" border="1" cellspacing="0">
  <!-- tr>th{標題}*3 -->
  <tr>
   <th>標題</th>
   <th>標題</th>
   <th>標題</th>
  </tr>
  <!-- (tr>td{單元格}*3)*3 -->
  <tr>
   <td>單元格</td>
   <td>單元格</td>
   <td>單元格</td>
  </tr>
  <tr>
   <td>單元格</td>
   <td>單元格</td>
   <td>單元格</td>
  </tr>
  <tr>
   <td>單元格</td>
   <td>單元格</td>
   <td>單元格</td>
  </tr>
 </table>
 
 <!-- 邊框的保留格式 => rules: rows | cols | groups | all -->
 <table class="table2" border="10" rules="all">
  <caption>表格標題</caption>
  <thead>
   <tr>
    <th>標題</th>
    <th>標題</th>
    <th>標題</th>
    <th>標題</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td rowspan="2">單元格</td>
    <td rowspan="2" colspan="2">單元格</td>
    <!-- <td>單元格</td> -->
    <td>單元格</td>
   </tr>
   <tr>
    <!-- <td>單元格</td> -->
    <!-- <td>單元格</td> -->
    <!-- <td>單元格</td> -->
    <td>單元格</td>
   </tr>
   <tr>
    <td>單元格</td>
 <td>單元格</td>
 <td>單元格</td>
 <td>單元格</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td>單元格</td>
 <td colspan="2">單元格</td>
 <!-- <td>單元格</td> -->
 <td>單元格</td>
 </tr>
 </tfoot>
 </table>

 <!-- >>> display: table-cell => 可以嵌入任意型別標籤, 可以快速實現多行文字垂直居中 -->

</body>
</html>

5.多行文字垂直居中


<div class="sup">
    <p>第一行文字</p>
   <div>第二行文字</div>
</div>
.sup {
    /*實現多行文字垂直居中 => 
   針對父級設定, 父級中的多個塊級文字類子級標籤垂直居中*/
    display: table-cell;
    vertical-align: middle;
}
/*注: 如果想調整sup的位置,可以給sup巢狀一個"位置層"*/
/*.box>.sup>p+div*/

================================================================================================
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>多行文字垂直居中</title>
 <style>
  p {
   margin: 0;
  }
  .box, .b1 {
   width: 150px;
   height: 150px;
   margin: 10px auto;
   background-color: pink;
   text-align: center;
  }
  .b3 {
   line-height: 150px;
  }
  .b2 {
   line-height: 150px;
   /*不起作用*/
   /*vertical-align: middle;*/
  }
  .b1 {
   /*實現多行文字垂直居中 => 
   針對父級設定, 父級中的多個塊級文字類子級標籤垂直居中*/
   display: table-cell;
   vertical-align: middle;
  }

 </style>
</head>
<body>
 <div class="box">
  <div class="b1">
   <p>好的</p>
   <p>真好</p>
   <div>好的</div>
   <div>真好</div>
  </div>
 </div>
 <div class="box b2">
  <p>好的</p>
  <p>真好</p>
 </div>
 <div class="box b3">好的真好好的真好好的真好好的真好</div>
</body>
</html>

2018.12.15 2d形變,動畫,表格,多行文字垂直居中

1複習(過度,陰影,偽類設計邊框,) <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>複習預習</title> <link href="css/font-awes

固定容器高度的多行文字垂直居中

需要 pad color ica round pre 絕對定位 span ddl 思路：把文字用span包裹起來，設置為inline-block，相當於圖片img的屬性。父div用table-cell的樣式，用vertical-align:middle實習上下居中 <

單行或多行文字垂直居中

以前發現的問題沒關注，現在終於重點弄了一下 <div> <p>？？？</p> </div> 假如知道div的高度，但是不知道p裡面的內容是1行還是2行，想讓p垂直居中的話可以js獲取p的高度和div的高度，然後p標籤margin-top的值

css佈局-多行文字垂直居中

場景：父元素高度固定，如何使其中的文字垂直居中？方法一：程式碼： <style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 20

完美解決多行文字垂直居中

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>完美解決不固定行數的文字垂直居中</title> <

css3一行或多行文字垂直居中

文字容器高度固定，但容器內部文字個數不知，但要求文字部分垂直居中，利用css3的flex彈性盒子屬性可以解決。核心程式碼： .align-center-vertical{display: flex

Python-2d形變動畫表格

一.形變 /*1.形變參考點: 三軸交界點*/ transform-origin: x軸座標 y軸座標; /*2.旋轉 rotate deg*/ transform: rotate(720deg); /*偏移 translate px*/ transform: transl

如何實現單行與多行文字的居中

居中 css web 文字屬性實現如何 content 單行在項目中遇到一個問題，在一個寬度為百分比形式設定寬度的div中，文字可能不多但是也可能較多，會超過一行。怎麽才能做到不管1行還是2行3行，文字都可以上下左右居中呈現。只需要這樣設置css屬性即可 div{

多行文字垂直方向上居中方法總結

問題描述最近寫專案的時候遇到個問題，資料從後臺傳送過來，可能是1行文字或者2行文字，要求居中顯示。如果按照height=line-height的方式來做，當文字是2行的時候就會使得2行文字的間距非常大。解決辦法： 1.首先給需要居中的元素外面再包一層div作為父元素。 2.

多行文字垂直左右居中

<div class="vertical-text"> <span>測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</span> <i></i> </div> .v

前端之單行文字水平垂直居中和多行文字水平居中

一丶單行文字（1）水平居中 text-align:center:控制單行文字水平居中（2）垂直居中設定行高，當line-height：50px 行高等於父級高，文字即是垂直居中（這裡的父級高是div）二丶多行文字水平居中設定一個標籤比如把多行文字放在p標籤中。然後通過marg

css 中讓多行內容垂直居中的方法

HTML程式碼： <div class="textList"> <p>為您提供世界級的包裝產品，我們完善的管理體系為您確保產品質量可靠穩定&l

【CSS】多行文字垂直自適應居中，相容FF，Chrome ,IE8+

工作中遇到如（圖1）顯示的要求：一共3行文字，不管幾行的情況都要與左邊的圖片居中對齊，乍一看覺得不太可能，一般的思維都是用margin-top來留出上面的空間。 (圖1) 思考了一下，覺得只有表格才能做到這樣的佈局，那就來模擬一下表格吧！把文字區域定為a，把外框定

2018-2019賽季多校聯合新生訓練賽第六場(2018/12/15)補題題解

A 價錢統計（基礎程式設計能力）這個考點還是比較個性的，怎麼四捨五入解法常規的講如果四捨五入整數位的話，那麼只需要在後面加個0.5然後強制轉換一下就可以了這個卻要我們保留一位小數的四捨五入，那該怎麼做呢實際上我們只需要把這個數乘以10然後加0.5，強制轉換後再除以10就可以了程式碼

2018.12.15

mysql -u root -p 進入資料庫的增刪改查增create database z_1031 charset utf8;刪drop database z_1031;改alter database查show databases;進入資料庫use 庫名；表的增刪改查查s

2018-12-15全球區塊鏈今日熱點

全球區塊鏈今日熱點@2018-12-15 加利福尼亞大學洛杉磯分校開展第一個區塊鏈工程課程：UCLA在此之前組織過加密貨幣和區塊鏈的研討會，這次的課程將在明年1月份正式開始，課程將會包含4學分，作為特殊課題課程的一部分。該課程屬於電腦科學、電子工程和計算機工程學生的選修課，包含區塊鏈概念概

2018 12 15 ARTS（9）

什麼是 ARTS Algorithm：每週至少做一個leetcode的演算法題; Review：閱讀並點評至少一篇英文技術文章； Tip/Tech：學習至少一個技術技巧； Share：分享一篇有觀點和思考的技術文章； Algorithm 演算法題兩個陣列的交集 h

java 2018.12.15 Homework

工具類 1、編寫一個程式，實現從命令列引數輸入兩個字串型別的數值，並計算輸出兩個數值的和。 [必做題] public static void main(String[] args) { int a = Integer.parseInt(args[0]); int b =

java22 2018-12-15作業

##作業 #1.1、編寫一個程式，實現從命令列引數輸入兩個字串型別的數值，並計算輸出兩個數值的和。 public static void main(String[] args) { Scanner input = new Scanner(System.in); String a=

2018.12.15 cnblog open lalala, 1st output.

1. https://www.cnblogs.com/andyjiang/ &nbs

2018.12.15 2d形變,動畫,表格,多行文字垂直居中

1複習(過度,陰影,偽類設計邊框,)

2形變

2.1形變程式碼演示

3動畫

4表格

5.多行文字垂直居中

相關推薦