2019/9/9學習小結

上午學習内容
- target
- - 錨點定位
  - base 标簽
- 無序清單
- 有序清單 ol
總結
下午學習内容

上午學習内容

内容：

認識網頁；
html标簽分類；

雙标簽：
<标簽名> 内容 </标簽名> 單标簽： <标簽名 />
HTML标簽關系

嵌套關系 <head> <title> </title> </head>
.并列關系 <head></head><body></body>

HTML标簽的語義化

所謂标簽語義化，就是名額簽的含義。
連結标簽(重點)

單詞縮寫： anchor 的縮寫。基本解釋錨, 鐵錨的

在HTML中建立超連結非常簡單，隻需用标簽環繞需要被連結的對象即可，其基本文法格式如下：

href：用于指定連結目标的url位址，當為标簽應用href屬性時，它就具有了超連結的功能。 Hypertext Reference的縮寫。意思是超文本引用

target

target用于指定連結頁面的打開方式，其取值有_self和_blank兩種，其中_self為預設值，_blank為在新視窗中打開方式。

錨點定位

通過建立錨點連結，使用者能夠快速定位到目标内容。

建立錨點連結分為兩步：

1.使用“a href=”#id名>“連結文本"</a>建立連結文本。

2.使用相應的id名标注跳轉目标的位置。

base 标簽

base 可以設定整體連結的打開狀态

base 寫到之間

無序清單

無序清單的各個清單項之間沒有順序級别之分，是并列的。其基本文法格式如下：

<ul>
  <li>清單項1</li>
  <li>清單項2</li>
  <li>清單項3</li>
  ......
</ul>

有序清單 ol

有序清單即為有排列順序的清單，其各個清單項按照一定的順序排列定義，有序清單的基本文法格式如下：

<ol>
  <li>清單項1</li>
  <li>清單項2</li>
  <li>清單項3</li>
  ......
</ol>

所有特性基本與ul 一緻。

總結

總結今天的思路貫穿線：

2019/9/9Day2學習小結上午學習内容總結下午學習内容

下午學習内容

自己做課後作業

效果圖：

2019/9/9Day2學習小結上午學習内容總結下午學習内容

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.header-1{
			width: 100%;
			height: 50px;
			clear:both; 
		}
		.tu1{
			width: 20%;
			float: left;

		}
		.logo{
			width:100px;
			float: left;


		}
		.tu2{
			width: 50%;
			text-align: center;
			float: left;


		}
		.img01{
			height: 50px;

		}
		.header-1 ul li{
			float: right;
		}
		.ul1 {
			float: right;
			width: 20%;
			
		}
		.ul1 ul{
			float: right;
			
		}
		.ul1 ul li{
			list-style: none;
			margin-right: 5px;
		}

		.header-2{
			width: 100%;
			height: 40px;
			background-color:black; 
		}
		.ul2 ul{
			margin: 0;
			padding: 0;
			clear: both;
		}
		.ul2 ul li{
			float: left;
			list-style: none;
			margin-right: 5px;

		}
		.ul2 ul li a{
			color: #fff;
			font-size: 14px;
			text-decoration: none;
			line-height: 30px;
		}
		.bannertu{
			width: 100%;
			height: 500px;
		}
		.shangpin {
			height: 30px;
			width: 100%;
		}
		.shangpin h3{
			float: left;
			margin: 0;
			padding: 0;
		}
		.shangpin img{
			float: left;
			margin-top: 5px
		}
		.zhongjian-1{
			clear: both;
		}
		.zhongjian-1 .left{
			float: left;
		}
		.zhongjian-1 .rigth{
			/*float: left;*/
			height: 480px;
			width: 100%;
			/*clear: both;*/
		}
		.rigth .rigth-top{
			float: left;
			width: 1000px;
			height: 236px;
		}
		.rigth .rigth-top img{
			float: left;
		}
		.rigth .rigth-top ul{
			float: left;
			margin: 0;

		}
		.rigth .rigth-top ul li{
			float: left;
			list-style: none;
			margin-left: 30px; 
			height: 236px;
		}
		.p1{
			padding-top: 20px;
			padding-left: 30px; 
		}
		.p2{
			padding-left: 30px; 
			color: red;
		}
		.rigth .rigth-foot{
			float: left;
			width: 1000px;
			height: 236px;

		}
		.rigth .rigth-foot img{
			float: left;
		}
		.rigth .rigth-foot ul{
			float: left;
			margin: 0;
			padding: 0;

		}
		.rigth .rigth-foot ul li{
			float: left;
			list-style: none;
			margin-left: 30px; 
			height: 236px;
			margin-top: 20px;
		}
		.ad img{
			width: 100%;
		}
		.footertu img{
			width: 100%;
		}
		.footer{
			text-align: center;
		}
		.footer ul{
			list-style: none;

		}
		.footer ul li{
			margin-right: 5px;
			display: inline;
		}
		.p3{
			font-size: 13px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="header-1">
			<div class="tu1">
				<img class="logo" src="day2作業/img/logo2.png" alt="">
			</div>
			<div class="tu2">
				<img class="img01" src="day2作業/img/header.png" alt="">
			</div>
			<div class="ul1">
				<ul>
					<li>
						<a href="#">登入</a>
					</li>
					<li>
						<a href="#">注冊</a>
					</li>
					<li>
						<a href="#">購物車</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="header-2">
			<div class="ul2">
				<ul>
					<li>
						<a href="#">首頁</a>
					</li>
					<li>
						<a href="#">手機數位</a>
						
					</li>
					<li>
						<a href="#">電腦辦公</a>
						
					</li>
					<li>
						<a href="#">鞋靴箱包</a>
						
					</li>
					<li>
						<a href="#">香煙酒水</a>
						
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="banner">
		<img  class="bannertu" src="day2作業/img/1.jpg" alt="">
	</div>
	<div class="shangpin">
		<h3>最新商品</h3>
		<img src="day2作業/img/title2.jpg" alt="">
	</div>
	<div class="zhongjian-1">
		<div class="left">
			<img src="day2作業/img/big01.jpg" alt="">
		</div>
		<div class="rigth">
			<div class="rigth-top">
				<img src="day2作業/img/middle01.jpg" alt="">
				<ul>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>
			<div class="rigth-foot">
				<ul>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>

		</div>
	</div>
	<div class="ad">
		<img src="day2作業/img/ad.jpg" alt="">
	</div>

	<div class="shangpin">
		<h3>最新商品</h3>
		<img src="day2作業/img/title2.jpg" alt="">
	</div>
	<div class="zhongjian-1">
		<div class="left">
			<img src="day2作業/img/big01.jpg" alt="">
		</div>
		<div class="rigth">
			<div class="rigth-top">
				<img src="day2作業/img/middle01.jpg" alt="">
				<ul>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>
			<div class="rigth-foot">
				<ul>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作業/img/small08.jpg" alt="">
						<p class="p1">高壓鍋</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>

		</div>
	</div>
	<div class="footertu">
		<img src="day2作業/img/footer.jpg" alt="">
	</div>
	<div class="footer">
		<ul>
			<li>
				<a href="#">關于我們</a>
			</li>
			<li>
				<a href="#">聯系我們</a>
			</li>
			<li>
				<a href="#">招賢納士</a>
			</li>
			<li>
				<a href="#">法律聲明</a>
			</li>
			<li>
				<a href="#">友情連結</a>
			</li>
			<li>
				<a href="#">支付方式</a>
			</li>
			<li>
				<a href="#">配送方式</a>
			</li>
			<li>
				<a href="#">服務聲明</a>
			</li>
			<li>
				<a href="#">廣告聲明</a>
			</li>
		</ul>
		<p class="p3">Copyrigth &nbsp 2005-2016甯财商城版權所有 </p>
	</div>
</body>
</html>

2019/9/9Day2學習小結上午學習内容總結下午學習内容

2019/9/9學習小結

上午學習内容

target

錨點定位

base 标簽

無序清單

有序清單 ol

總結

下午學習内容

繼續閱讀

Spring5學習筆記（十二）—— 事務操作

session與cookie

Run-Time Check Failure #2 - Stack around the variable 'cmd' was corrupted 的可能原因

常用的圖像特征有顔色特征、紋理特征、形狀特征、空間關系特征。

優秀IT顧問的七大能力之六--宏觀把控能力6 宏觀把控能力

魔數（代碼大全第12章：基本資料類型）

項管行知01--幾個經理1 定義2 曆史

《電磁學》學習筆記5——磁場強度H分子環流假說

項目管理二三事1、時間2、鐵三角 3、PMBOK4、PMBOK版本變更5 小結

安卓學習筆記（2）----LinearLayoutLinearLayout

安卓學習筆記（3）------RelativeLayoutRelativeLayout參考文獻

.NET中英文切換常見錯誤

閱讀教材的最佳方法是什麼？

辨別符的命名規則和規範辨別符命名規則辨別符命名規範基礎版Java代碼規範詳細版

藍橋杯單片機比賽蜂鳴器與繼電器子產品（原理、代碼詳解）

UE學習筆記：材質錯亂排序函數