HTML前端基礎小案例（滿屋花）

滿屋花效果圖如下

效果圖拿到手的第一件事分析整體網頁佈局，

頁面基本框架的搭建

<!-- 文檔居中 -->
<div class="center">
	<!-- 頭部 -->
	<div class="top">
	</div>
	<!-- 導航欄 -->
	<div class="navlist">
	</div>
	<!-- 內容 -->
	<div class="content">
		<!--左邊列表-->
		<div class="contentleft">
		</div>
		<!--右邊內容-->
		<div class="contentright">
		</div>
	</div>
</div>

清除瀏覽器缺損的樣式

*{
	margin: 0px;
	padding: 0px;
}

取色器讀取顏色並且設置背景顏色（沒有取色器的小夥伴稍後會在文末分享出來）

body{
	background-color: #FFD8D9;
}

清除li的小圓點

li{
	list-style: none;
}

設置外層div寬度並且居中

.center{
	width: 700px;
	/*居中顯示*/
	margin: auto;
	/*輔助佈局使用，頁面構建完成後清除*/
	border: 1px solid red;
}

調整內層div的大小以及浮動位置

/*頭部*/
.top{
	width: 700px;
	height: 120px;
}
/*導航欄*/
.navlist{
	width: 700px;
	height: 33px;
}
/*內容*/
.content{
	width: 700px;
	margin-top: 5px;
}
/*左側列表*/
.contentleft{
	width: 179px;
	height: 830px;
	/*浮動--float    使標籤浮動起來，left:向左浮動 right:向右浮動*/
	float: left;
	background-color: white;
	/*邊框倒角    使標籤角弧形*/
	border-radius: 20px;
}
/*右側列表*/
.contentright{
	width: 518px;
	height: 1000px;
	float: left;
	margin-left: 3px;
	border-radius: 5px;
	margin-bottom: 20px;
}

此時整體頁面佈局已經完成了，現在我們在裏面追加內容

頭部：一張圖片，在class爲top的div裏插入一張圖片

<div class="top">
	/*圖片標籤*/
	<img src="img/banner.jpg" />
</div>

導航欄：一般是由列表來做，所以在class爲navlist裏插入列表

/*HTML*/
<div class="navlist">
	<ul>
		<li>鮮花禮品</li>
		<li>自助訂花</li>
		<li>綠色植物</li>
		<li>花之物語</li>
		<li>會員中心</li>
		<li>聯繫我們</li>
		<li>支付方式</li>
	</ul>
</div>

/*CSS樣式*/

li{
	/*清除li的小圓點*/
	list-style: none;
}

.navlist li{
	/*使li向左浮動成一行*/
	float: left;
	width: 100px;
	/*文本居中*/
	text-align: center;
	/*設置行高*/
	line-height: 33px;
	/*背景圖片*/
	background-image: url(../img/button1.jpg);
}

左側列表登陸註冊使用到表單，

/*action:提交到哪裏   method:怎麼提交
			get 顯式提交
				數據提交大小限制2kb
				適用於向服務器要數據
			post 隱式提交
				數據提交大小不受限制
				適用於向服務器提交數據
*/
<form action="index.html" method="get">
	<div class="logininput">
		<label class="text">用戶:</label>
		/*輸入的爲明文*/
		<input type="text" name="" id="" value="" class="txtinput" />
		<br>
		<label class="text">密碼:</label>
		/*輸入的爲暗文*/
		<input type="password" name="" id="" value="" class="txtinput"/>
		/*提交按鈕*/
		<input type="submit" value="登錄" class="btnlogin"/>
		<input type="submit" value="註冊" class="btnlogin"/>
		<a href="#">忘記密碼</a>
	</div>
</form>

左側列表也是用li去完成它，其中值得注意的幾個屬性

/*將列表的小圓點設置爲自定義圖片*/
list-style-image: url(../img/icon1.gif);
/*列表項目標記放置在文本以內*/
list-style-position: inside;
/*只顯示下邊框線，且設置爲虛線*/
border:none;
border-bottom: 1px dashed gray;

右側主要是浮動，在上面也有提到過，這裏記錄下怎麼清除浮動帶來的影響

1. 使用clear屬性
   none：默認值
   left：清除左邊的影響
   right：清除右邊的影響
   both：清除所有的影響

2. 設置父元素的高度，弊端必須知道父元素的準確高度

3. 父元素也浮動，弊端後續元素也會受影響

4. 設置父元素的overflow：hidden，弊端 如果子級內容溢出，則會被一同隱藏

5. 在父元素追加子元素，並且設置chear爲both

6. 使用after僞類選擇器追加內容

.box:after{
	content:"";
	display: block;
	chear:both;
}

後面基本的樣式需要自己慢慢的去調整，素材和取色器已經上傳，需要的自取。
鏈接：https://pan.baidu.com/s/1Ay7cla2sBvZs3t8efF9dgg
提取碼：r7uc
滿屋花在線預覽：https://www.zongmeng.top/study/flower/index.html
如有錯誤歡迎批評指正，不喜勿噴。