我的作業(yè)
<!DOCTYPE html>
<html>
<head>
?<title>亂秀之家</title>
?<meta charset="UTF-8">
?<meta name="viewport" content="width=device-width, initial-scale=1">
?<style>
? ?* {
? ? ?box-sizing: border-box;
? ?}
? ?/* body 樣式 */
? ?body {
? ? ?font-family: Arial;
? ? ?margin: 0;
? ?}
? ?/* 標(biāo)題 */
? ?.header {
? ? ?padding: 80px;
? ? ?text-align: center;
? ? ?background: #1abc9c;
? ? ?color: white;
? ?}
? ?/* 標(biāo)題字體加大 */
? ?.header h1 {
? ? ?font-size: 40px;
? ?}
? ?/* 導(dǎo)航 */
? ?.navbar {
? ? ?overflow: hidden;
? ? ?background-color: #333;
? ?}
? ?/* 導(dǎo)航欄樣式 */
? ?.navbar a {
? ? ?float: left;
? ? ?display: block;
? ? ?color: white;
? ? ?text-align: center;
? ? ?padding: 14px 20px;
? ? ?text-decoration: none;
? ?}
? ?/* 右側(cè)鏈接*/
? ?.navbar a.right {
? ? ?float: right;
? ?}
? ?/* 鼠標(biāo)移動(dòng)到鏈接的顏色 */
? ?.navbar a:hover {
? ? ?background-color: #ddd;
? ? ?color: black;
? ?}
? ?/* 列容器 */
? ?.row {
? ? ?display: -ms-flexbox; /* IE10 */
? ? ?display: flex;
? ? ?-ms-flex-wrap: wrap; /* IE10 */
? ? ?flex-wrap: wrap;
? ?}
? ?/* 創(chuàng)建兩個(gè)列 */
? ?/* 邊欄 */
? ?.side {
? ? ?-ms-flex: 30%; /* IE10 */
? ? ?flex: 30%;
? ? ?background-color: #f1f1f1;
? ? ?padding: 20px;
? ?}
? ?/* 主要的內(nèi)容區(qū)域 */
? ?.main {
? ? ?-ms-flex: 70%; /* IE10 */
? ? ?flex: 70%;
? ? ?background-color: white;
? ? ?padding: 20px;
? ?}
? ?/* 測(cè)試圖片 */
? ?.fakeimg {
? ? ?background-color: #aaa;
? ? ?width: 100%;
? ? ?padding: 20px;
? ?}
? ?/* 底部 */
? ?.footer {
? ? ?padding: 20px;
? ? ?text-align: center;
? ? ?background: #ddd;
? ?}
? ?/* 響應(yīng)式布局 - 在屏幕設(shè)備寬度尺寸小于 700px 時(shí), 讓兩欄上下堆疊顯示 */
? ?@media screen and (max-width: 700px) {
? ? ?.row {
? ? ? ?flex-direction: column;
? ? ?}
? ?}
? ?/* 響應(yīng)式布局 - 在屏幕設(shè)備寬度尺寸小于 400px 時(shí), 讓導(dǎo)航欄目上下堆疊顯示 */
? ?@media screen and (max-width: 400px) {
? ? ?.navbar a {
? ? ? ?float: none;
? ? ? ?width: 100%;
? ? ?}
? ?}
?</style>
</head>
<body>
<div class="header">
?<h1>簡(jiǎn)歷</h1>
?<p>湯姆</p>
</div>
<div class="navbar">
?<a href="001.html">湯姆的由來(lái)</a>
?<a href="#">鏈接</a>
?<a href="#">鏈接</a>
?<a href="#" class="right">鏈接</a>
</div>
<div class="row">
?<div class="side">
? ?<h2>關(guān)于我</h2>
? ?<h5>我的照片:</h5>
? ?<div><img src="1.jfif"></div>
? ?<p>抓不到老鼠的貓</p>
? ?<h3>更多內(nèi)容</h3>
? ?<p>其他成就</p>
? ?<div><img src="2.jfif"></div><br>
? ?<div><img src="3.jfif"></div><br>
? ?<div><img src="4.jfif"></div>
?</div>
?<div class="main">
? ?<h2>標(biāo)題</h2>
? ?<h5>副標(biāo)題</h5>
? ?<div class="fakeimg" style="height:200px;">圖像</div>
? ?<p>一些文本..</p>
? ?<p>菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！</p>
? ?<br>
? ?<h2>標(biāo)題</h2>
? ?<h5>副標(biāo)題</h5>
? ?<div class="fakeimg" style="height:200px;">圖像</div>
? ?<p>一些文本..</p>
? ?<p>菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！</p>
?</div>
</div>
<div class="footer">
?<h2>底部?jī)?nèi)容</h2>
</div>
</body>
</html>
