HTML前端基础小案例(满屋花)

HTML前端基础小案例(满屋花)_第1张图片
满屋花效果图如下
HTML前端基础小案例(满屋花)_第2张图片
效果图拿到手的第一件事分析整体网页布局,
HTML前端基础小案例(满屋花)_第3张图片
页面基本框架的搭建


清除浏览器缺损的样式

*{
	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里插入一张图片

/*图片标签*/

导航栏:一般是由列表来做,所以在class为navlist里插入列表

/*HTML*/


/*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 隐式提交
				数据提交大小不受限制
				适用于向服务器提交数据
*/
/*输入的为明文*/
/*输入的为暗文*/ /*提交按钮*/ 忘记密码

左侧列表也是用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
如有错误欢迎批评指正,不喜勿喷。

你可能感兴趣的:(HTML)