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
如有错误欢迎批评指正，不喜勿喷。