一、背景介绍
尚品会网页是尚硅谷在b站发布html+css教学视频后的一个实例,主要分为以下几个部分:顶部导航栏,头部,主导航栏,主要内容区,页脚。而主要内容区又分为:侧面导航栏,侧面导航栏二级菜单,横幅,右侧导航栏。
二、网页设计名词解释
1.版心
在pc网页中,都有一个固定宽度且水平居中的盒子,用来显示网页的主要内容,这个盒子叫做版心(container),版心可以有多个,宽度一般在960px-1200px之间
2.常用布局名词
名词 | 英文 |
顶部导航条 | topbar |
页头 | header |
导航 | nav |
搜索框 | search |
横幅广告 | bar |
主要内容 | content,main |
侧边栏 | sidebar |
页脚 | footer |
三、顶部导航条
1.版心水平居中
.container{
width: 1190px;
margin: 0 auto;
}
2.换行导致文字间有空格
令父元素字体大小为0,子元素重新设置字体大小
.welcome{
height: 30px;
line-height: 30px;
font-size: 0;
color: #666;
}
.welcome span , .welcome a{
font-size: 12px;
}
3.令文字垂直居中
设置行内元素的height,令行高等于height
.topbar-nav .list{
height: 30px;
line-height: 30px;
}
代码组成:html文件
<body>
<!-- 顶部导航条 -->
<div class="topbar">
<!-- 版心 -->
<div class="container clearfix">
<!-- 左侧的欢迎区 -->
<div class="welcome leftfix" >
<span class="hello">尚品汇欢迎您</span>
<span>请</span>
<a href="#" class="login">登录</a>
<a href="#" class="register">免费注册</a>
</div>
<!-- 右侧的导航区 -->
<div class="topbar-nav rightfix">
<ul class="list clearfix">
<li><a href="#">我的订单</a></li>
<li><a href="#">我的购物车</a></li>
<li><a href="#">我的尚品汇</a></li>
<li><a href="#">尚品汇会员</a></li>
<li><a href="#">企业采购</a></li>
<li><a href="#">关注尚品汇</a></li>
<li><a href="#">合作招商</a></li>
<li><a href="#">商家后台</a></li>
</ul>
</div>
</div>
</div>
<!-- 头部 -->
<div class="header">
<div class="container clearfix">
<!-- 左侧的logo区域 -->
<div class="logo leftfix">
<img src="../images/logo.png" alt="尚品汇">
</div>
<!-- 右侧的搜索区域 -->
<div class="search rightfix">
<form action="#">
<input type="text">
<button></button>
</form>
</div>
</div>
</div>
</body>
css文件:
/* #region顶部导航条start */
.topbar{
height: 30px;
background-color: #ECECEC;
}
.welcome{
height: 30px;
line-height: 30px;
font-size: 0;
color: #666;
}
.welcome span , .welcome a{
font-size: 12px;
}
.welcome .hello{
margin-right: 28px;
}
.welcome .login{
padding-right: 10px;
border-right: 1px solid #666;
}
.welcome .register{
padding-left: 10px;
}
.topbar-nav .list{
height: 30px;
line-height: 30px;
}
.topbar-nav .list li{
float: left;
}
.topbar-nav .list li a{
padding: 0 15px ;
border-right: 1px solid #666;
}
.topbar-nav .list li:first-child a{
padding-left: 0;
}
.topbar-nav .list li:last-child a{
padding-right: 0;
border: 0;
}
/* #endregion顶部导航条end */
最终达成效果:
二、页头
1.搜索框与按钮不对齐
给按钮加一个vertical-align值,值可以取除了默认以外的任何值
.header button{
width: 80px;
height: 36px;
background-color:#DD302d;
/* 解决搜索框与按钮不对齐 */
vertical-align:bottom;
}
2.背景图像重复,不对齐。
给按钮加一个background-repeat属性:
.header button{
width: 80px;
height: 36px;
background-color:#DD302d;
/* 解决搜索框与按钮不对齐 */
vertical-align:bottom;
background-image: url('../images/serch_icon.png');
background-repeat: no-repeat;
background-position: center;
}
最终达成效果:
三、主导航区
导航栏一般都用无序列表或自定义列表来写
最终达成效果:
四、主要内容区
1.鼠标悬停变色效果
.slide-nav li:hover{
background-color: #DD302d;
}
.slide-nav li:hover >a{
color: white;
}
2.二级菜单达成效果
①默认隐藏,点击导航栏时出现
将二级菜单的display属性改成none,当鼠标悬停在侧边导航栏时改成block
.second-menu{
width: 680px;
height: 458px;
background-color: white;
position: absolute;
top: 0;
left: 190px;
padding-left: 20px;
display: none;
}
.slide-nav li:hover .second-menu{
display: block;
②每个侧边栏定位效果相同
把父元素的position设为relative,二级菜单的position属性设置为absolute
将二级菜单相对于整个侧边导航栏相对定位
.main-content .slide-nav{
width: 190px;
height: 458px;
background-color: #f4f4f4;
position: relative;
}
.second-menu{
width: 680px;
height: 458px;
background-color: white;
position: absolute;
top: 0;
left: 190px;
padding-left: 20px;
display: none;
}
③精灵图的使用
所谓精灵图就是图片拼合技术,它就是把多张小图合成一张大图,通过css中的background-position属性,显示精灵图中某一个小图标。这样可以节约网络资源。
html文件:
<div class="other-nav">
<ul class="other-nav-list clearfix">
<li>
<div class="picture"></div>
<span>话费</span>
</li>
<li>
<div class="picture"></div>
<span>火车票</span>
</li>
<li>
<div class="picture"></div>
<span>加油卡</span>
</li>
<li>
<div class="picture"></div>
<span>白条</span>
</li>
</ul>
<ul class="other-nav-list clearfix">
<li>
<div class="picture"></div>
<span>电影票</span>
</li>
<li>
<div class="picture"></div>
<span>酒店</span>
</li>
<li>
<div class="picture"></div>
<span>理财</span>
</li>
<li>
<div class="picture"></div>
<span>机票</span>
</li>
</ul>
<ul class="other-nav-list clearfix">
<li>
<div class="picture"></div>
<span>礼品卡</span>
</li>
<li>
<div class="picture"></div>
<span>彩票</span>
</li>
<li>
<div class="picture"></div>
<span>游戏</span>
</li>
<li>
<div class="picture"></div>
<span>众筹</span>
</li>
</ul>
</div>
.other-nav-list .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture{
background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture{
background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture{
background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(4) .picture{
background-position: -144px 0;
}
.other-nav-list:nth-child(2) li:nth-child(1) .picture{
background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture{
background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture{
background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture{
background-position: -144px -48px;
}
.other-nav-list:nth-child(3) li:nth-child(1) .picture{
background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture{
background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture{
background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture{
background-position: -144px -96px;
}
④鼠标放在精灵图上假装可以点击
给精灵图所在区域加上 cursor: pointer属性
.other-nav-list li{
width: 48px;
height: 70px;
float: left;
margin: 0 11px;
text-align: center;
cursor: pointer;
}
最终达成效果:
五、思考与总结
1.盒子加了padding或board后要重新调整盒子的宽高
2.盒子左右浮动后应该取消父元素的浮动
3.因为有些符号与html的标签产生冲突,所以我们可以用一些特殊的形式来表示某些字符,我们称之为"字符实体"
空格 |   |
小于号 | < |
大于号 | > |