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>