HTML5大前端學習過程第一週（Day05）

今天沒有學什麼新內容，就做了做作業，仿照做了一個百度首頁，由於太菜，做了挺長時間，基本上和百度首頁有一點相似了，不過還是有所不同，畢竟有的代碼還沒學，而且第一次寫這種東西，廢話不多說了，把代碼放上來，大佬們輕噴，謝謝。
作業要求效果圖：

HTML代碼塊：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 外部引入的方式 -->
		<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
	</head>
	<body>
		<!-- 
			1.先寫網頁的結構, 每一塊區域單獨的色塊。
			2.調整色塊與色塊的間距。
			3.完善每一塊的內容。
		 -->
		 <!-- 上 -->
		<div class="top">
			<a href="">新聞</a>
			<a href="">好123</a>
			<a href="">地圖</a>
			<a href="">視頻</a>
			<a href="">貼吧</a>
			<a href="">學術</a>
			<a href="" class="top_a">登錄</a>
			<a href="" class="top_a">設置</a>
			<a href="" id="more">更多產品</a>
		</div>
		<!-- 中 -->
		<div class="middle">
			<img src="img/bd_logo1.png" >
			<!-- 輸入框和按鈕 -->
			<div class="input">
				<!-- 輸入框 --><!-- 按鈕 -->
				<input type="text" class="input_text"><input type="button" value="百度一下" class="input_btn">
			</div>
		</div>
		<!-- 下 -->
		<div class="bottom">
			<img src="img/code.png" >
			<p class="download">下載百度APP</p>
			<p class="look">有事搜一搜  沒事看一看</p>
			<div class="about">
				<a href="">把百度設爲主頁</a>
				<a href="">關於百度</a>
				<a href="">About  Baidu</a>
				<a href="">百度推廣</a>
				<span>(京)-經營性-2017-0020</span>
			</div>
			
			<div class="copyright">
				<span>©2020 Baidu </span> 
				<a href="">使用百度前必讀</a>
				<a href="">意見反饋</a>
				<span>京ICP證030173號</span> 
				<img src="img/1.png" >
				<a href="" id="record">京公網安備11000002000001號</a>
				<img src="img/2.png" >
			</div>
		</div>
	</body>
</html>

css樣式代碼塊：

* {
	margin: 0;
	padding: 0;
}
.top {
	/* 內容右對齊 */
	text-align: right;
	/* 上填充 */
	padding-top: 19px;
	/* 右填充 */
	padding-right: 11px;
}
/* 子代選擇器 class選擇器+元素選擇器 */
.top>a {
	/* 文字相關 */
	color: #333333;
	font-size: 13px;
	line-height: 24px;
	/* 文字粗細 */
	font-weight: 700;
	/* 文字字體 */
	font-family: arial;
	/* 左間距 */
	margin-left: 20px;
}
/* class選擇器+class選擇器 */
.top>.top_a {
	/* 修改文字粗細 */
	font-weight: 400;
}

#more {
	/* 寬高 */
	width: 60px;
	height: 24px;
	/* 
		a標籤是一個行屬性標籤, 行屬性標籤是無法更改寬高的,寬高由內容撐開.
		如果想讓a標籤能夠設置寬高,比如給a標籤添加一個屬性display:inline-block;
	 */
	display: inline-block;
	background-color: #3388ff;
	/* 去掉下劃線 */
	text-decoration: none;
	color: white;
	font-weight: 400;
	/* 水平居中 */
	text-align: center;
	/* 右間距 */
	/* margin-right: 11px; */
}

.middle {
	/* 上間距 */
	margin-top: 138px;
	/* 內容居中 */
	text-align: center;
}
.middle>img {
	width: 270px;
}
.input {
	/* 上間距 */
	margin-top: 25px;
}
/* 輸入框 */
.input_text {
	width: 532px;
	height: 34px;
	border: 1px solid #b6b6b6;
	/* 去掉右邊框 - 將右邊框寬度設置爲0 */
	/* border-right-width: 0; */
	border-right: none;
	/* 左填充 */
	padding-left: 7px;
	/* 
		盒模型的寬度: 539 + 1 + 1 + 7 = 548px
		第一個:多在width. -7            541px
		第二個:多個右邊框. -1            540px
	 */
}
/* 按鈕 */
.input_btn {
	width: 100px;
	height: 36px;
	background-color: #3385ff;
	color: white;
	border: 1px solid #3385ff;
	/* 垂直對齊方式 */
	vertical-align: top;
}

.bottom {
	/* 上間距 */
	margin-top: 256px;
	/* 內容居中 */
	text-align: center;
}

.bottom>img {
	border: 1px solid #f3f3f3;
	padding: 5px;
}

.download {
	/* 文本相關 */
	color: #333333;
	font-size: 16px;
	line-height: 32px;
	/* 字母間距 */
	letter-spacing: 3px;
	/* 字體 */
	font-family: arial;
}

.look {
	color: #999;
	font-size: 14px;
	line-height: 14px;
	font-weight: 300;
}

.about {
	/* 文本相關的屬性 */
	color: #999;
	font-size: 12px;
	line-height: 22px;
	font-family: arial;
	/* 上間距 */
	margin-top: 25px;
}
/* 
	a元素對文字有自己的顏色設置,所以如果想要修改a元素中文字的顏色,就必須作用到a標籤身上(必須得直接對a元素做修改).
 */
.about>a {
	color: #999;
	/* 右間距 */
	margin-right: 25px;
}

.copyright {
	color: #999;
	font-size: 12px;
	font-family: arial;
	line-height: 24px;
}
.copyright>a {
	color: #999;
}
.copyright>img {
	/* 修改圖片的垂直對齊方式 -- 垂直居中對齊 top頂部 middle居中 bottom底部 baseline基線*/
	vertical-align: middle;
}
#record {
	/* 左間距 */
	margin-left: 15px;
}

我做出來的成品圖：

還算是可以吧，如果哪位朋友覺得哪需要優化，可以告訴我，一起討論一下，共同進步，謝謝。
還有第二個作業，比較簡單，是表格的練習。
先放成品圖：

我的代碼塊：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>報考學校</title>
		<style type="text/css">
			.lo{
				background-color: gainsboro;
			}
			.one {
				width: 130px;
			}
			.two{
				width: 180px;
			}
			.three{
				width: 145px;
			}
			.four{
				width: 40px;
			}
			.five{
				width: 80px;
			}
			.six{
				width: 80px;
			}
			td {
				text-align: center;
				height: 28px;
				font-size: 12px;
			}
			.r {
				color: #FF0000;
			}
			#t {
				text-indent: 9em;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0px" >
			<!-- 1 -->
			<tr>
				<td class="lo one">專業類別</td>
				<td class="lo two">專業名稱</td>
				<td class="lo three">報考熱度排名</td>
				<td class="lo four">層次</td>
				<td class="lo five">就業前景</td>
				<td class="lo six">開設院校</td>
			</tr>
			<!-- 2 -->
			<tr>
				<td rowspan="4">哲學類</td>
				<td>哲學</td>
				<td>全國25 哲學1</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 3 -->
			<tr>
				<!-- <td></td> -->
				<td>邏輯學</td>
				<td>全國56 哲學2</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 4 -->
			<tr>
				<!-- <td></td> -->
				<td>宗教學</td>
				<td>全國708 哲學4</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 5 -->
			<tr>
				<!-- <td></td> -->
				<td>倫理學</td>
				<td>全國678 哲學3</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 6 -->
			<tr>
				<td rowspan="6">經濟學類</td>
				<td>經濟學</td>
				<td>全國732 經濟學12</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 7 -->
			<tr>
				<!-- <td></td> -->
				<td>經濟統計學</td>
				<td>全國966 經濟學15</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 8 -->
			<tr>
				<!-- <td></td> -->
				<td>國民經濟管理</td>
				<td>全國49 經濟學5</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 9 -->
			<tr>
				<!-- <td></td> -->
				<td>資源與環境經濟學</td>
				<td>全國36 經濟學4</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 10 -->
			<tr>
				<!-- <td></td> -->
				<td>商務經濟學</td>
				<td>全國2 經濟學1</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 11 -->
			<tr>
				<!-- <td></td> -->
				<td>能源經濟</td>
				<td>全國73 經濟學8</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 12 -->
			<tr>
				<td rowspan="2">財政學類</td>
				<td>財政學</td>
				<td>全國16 經濟學2</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 13 -->
			<tr>
				
				<td>稅收學</td>
				<td>全國1020 經濟學16</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 14 -->
			<tr>
				<td rowspan="8">金融學類</td>
				<td>金融學</td>
				<td>全國801 經濟學13</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 15 -->
			<tr>
				<!-- <td></td> -->
				<td>金融工程</td>
				<td>全國24 經濟學3</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 16 -->
			<tr>
				<!-- <td></td> -->
				<td>保險學</td>
				<td>全國1090 經濟學17</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 17 -->
			<tr>
				<!-- <td></td> -->
				<td>投資學</td>
				<td>全國661 經濟學9</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 18 -->
			<tr>
				<!-- <td></td> -->
				<td>金融數學</td>
				<td>全國63 經濟學7</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 19 -->
			<tr>
				<!-- <td></td> -->
				<td>信用管理</td>
				<td>全國685 經濟學11</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 20 -->
			<tr>
				<!-- <td></td> -->
				<td>經濟與金融</td>
				<td>全國60 經濟學6</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
			<!-- 21 -->
			<tr>
				<!-- <td></td> -->
				<td>精算學</td>
				<td>全國1177 經濟學18</td>
				<td>本科</td>
				<td class="r">點擊查看</td>
				<td>點擊查看</td>
			</tr>
		</table>
		<p id="t"><img src="img/QQ截圖20200214221438.png"  ></p>
	</body>
</html>

SB_Hunter

發佈了14 篇原創文章 · 獲贊 50 · 訪問量 1萬+

私信關注

HTML5大前端學習過程第一週（Day05）

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

CSDN寫博客時如何顯示HTML代碼標籤

HTML5大前端學習過程第一週（Day02）

HTML5大前端學習過程第二週（Day09）

HTML5大前端學習過程第二週（Day10）

HTML5大前端學習過程第二週（Day06）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結