<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">/*避免網頁在手機瀏覽時內容被縮放*/
<title>自我介紹</title>
<style type="text/css">
.head{
background-color: #003344;color: white;font-weight: bold;font-size: 30px;text-align: center;padding: 10px
}
.content{
width: 1000px;margin-left: auto;margin-right: auto;/*border: 1px solid red;height: 100px;*/
}
.box{
width: 280px;padding: 10px;margin:10px;background-color: white;display: inline-block;vertical-align: top;
text-align: center;height: 150px;line-height: 30px;
}
.title{
font-weight: bold;
}
@media screen and (max-width: 600px){
/*當使用者的螢幕最大寬度小於600px，套用內部大括號的語法*/
.content{
width: 100%;
text-align: center;
}
.body{
font-size: 24px;
}
}
</style>
</head>
<body style="margin: 0px; background-color: #111111">
<div class="head">我的自我介紹</div>
<div class="content">
<div class="box">
<div class="title">我的基本資料</div>
<div>我是男生</div>
<div>住在台灣</div>
<div>老大不小</div>
</div>
<div class="box">
<div class="title">我的個人興趣</div>
<div>看電影</div>
<div>聽音樂</div>
<div>喝咖啡</div>
</div>
<div class="box">
<div class="title">歡迎與我聯絡</div>
<div>FACOBOOK</div>
<div>LINE</div>
<div>EMAIL</div>
</div>
</div>
</body>
</html>
參考影片: https://goo.gl/paGPM7
留言列表
Impression (1)
