首页分享 HTML前端基础小案例（满屋花）

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

来源：花匠小妙招时间：2024-09-13 13:55

在这里插入图片描述
满屋花效果图如下

效果图拿到手的第一件事分析整体网页布局，
页面布局
页面基本框架的搭建

<div class="center"><div class="top"></div><div class="navlist"></div><div class="content"><div class="contentleft"></div><div class="contentright"></div></div> </div>

123456789101112131415161718

清除浏览器缺损的样式

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

取色器读取颜色并且设置背景颜色（没有取色器的小伙伴稍后会在文末分享出来）

body{background-color: #FFD8D9; } 123

清除li的小圆点

li{list-style: none; } 123

设置外层div宽度并且居中

.center{width: 700px;/*居中显示*/margin: auto;/*辅助布局使用，页面构建完成后清除*/border: 1px solid red; } 1234567

调整内层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; }

12345678910111213141516171819202122232425262728293031323334

此时整体页面布局已经完成了，现在我们在里面追加内容

头部：一张图片，在class为top的div里插入一张图片

<div class="top">/*图片标签*/<img src="img/banner.jpg" /> </div> 1234

导航栏：一般是由列表来做，所以在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); }

12345678910111213141516171819202122232425262728293031

左侧列表登陆注册使用到表单，

/*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>

1234567891011121314151617181920212223

左侧列表也是用li去完成它，其中值得注意的几个属性

/*将列表的小圆点设置为自定义图片*/ list-style-image: url(../img/icon1.gif); /*列表项目标记放置在文本以内*/ list-style-position: inside; /*只显示下边框线，且设置为虚线*/ border:none; border-bottom: 1px dashed gray; 1234567

右侧主要是浮动，在上面也有提到过，这里记录下怎么清除浮动带来的影响

使用clear属性
none：默认值
left：清除左边的影响
right：清除右边的影响
both：清除所有的影响

设置父元素的高度，弊端必须知道父元素的准确高度

父元素也浮动，弊端后续元素也会受影响

设置父元素的overflow：hidden，弊端如果子级内容溢出，则会被一同隐藏

在父元素追加子元素，并且设置chear为both

使用after伪类选择器追加内容

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

后面基本的样式需要自己慢慢的去调整，素材和取色器已经上传，需要的自取。
链接：https://pan.baidu.com/s/1Ay7cla2sBvZs3t8efF9dgg
提取码：r7uc
满屋花在线预览：https://www.zongmeng.top/study/flower/index.html
如有错误欢迎批评指正，不喜勿喷。