columns多列1-6編程練習

columns多列1-6編程練習

綜合所學知識,設置一段文字分成兩列。

效果圖如下:

任務

(1)多列盒子寬度爲400px;有5像素的邊框;

(2)標題14號字體、加粗、居中顯示,有背景顏色:如果不(255,192,203);

(3)將文字分成兩列,每列列寬爲140px,正文文字12號字體、兩端對齊顯示。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

  <title></title>
  <style>
    .columns {
      width: 400px;
      border: 5px solid pink;
    }

    .columns .title {
      /* 此處輸入代碼 */

    }

    .columns .columns_width {
      /* 此處輸入代碼 */

      
    }
  </style>
</head>

<body>
  <div class='columns'>
    <div class="title">慕課網</div>
    <div class="columns_width">
      慕課網(IMOOC)是IT技能學習平臺。 慕課網(IMOOC)提供了豐富的移動開發、php開發、web前端、android開發以及html5等視頻教程源公開課。並且富有交互性以及趣味性。

    </div>

  </div>


</body>

</html>

參考代碼:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

  <title></title>
  <style>
    .columns {
      width: 400px;
      border: 5px solid pink;
    }

    .columns .title {
      /* 此處輸入代碼 */
      font-size:14px;
      font-weight:bold;
      text-align:center;
      background:rgb(255,192,203);
    }

    .columns .columns_width {
      /* 此處輸入代碼 */
      columns:140px 2;
      font-size:12px;
      
    }
  </style>
</head>

<body>
  <div class='columns'>
    <div class="title">慕課網</div>
    <div class="columns_width">
      慕課網(IMOOC)是IT技能學習平臺。 慕課網(IMOOC)提供了豐富的移動開發、php開發、web前端、android開發以及html5等視頻教程源公開課。並且富有交互性以及趣味性。

    </div>

  </div>


</body>

</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章