HTML前端基础小案例（满屋花）

满屋花效果图如下

效果图拿到手的第一件事分析整体网页布局，

页面基本框架的搭建

清除浏览器缺损的样式

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！