满屋花效果图如下
效果图拿到手的第一件事分析整体网页布局,
页面基本框架的搭建
<!-- 文档居中 -->
<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;
右侧主要是浮动,在上面也有提到过,这里记录下怎么清除浮动带来的影响
-
使用clear属性
none:默认值
left:清除左边的影响
right:清除右边的影响
both:清除所有的影响 -
设置父元素的高度,弊端必须知道父元素的准确高度
-
父元素也浮动,弊端后续元素也会受影响
-
设置父元素的overflow:hidden,弊端 如果子级内容溢出,则会被一同隐藏
-
在父元素追加子元素,并且设置chear为both
-
使用after伪类选择器追加内容
.box:after{
content:"";
display: block;
chear:both;
}
后面基本的样式需要自己慢慢的去调整,素材和取色器已经上传,需要的自取。
链接:https://pan.baidu.com/s/1Ay7cla2sBvZs3t8efF9dgg
提取码:r7uc
满屋花在线预览:https://www.zongmeng.top/study/flower/index.html
如有错误欢迎批评指正,不喜勿喷。