网页制作实践 - 导航菜单

最新推荐文章于 2024-04-22 13:27:18 发布

qq_41672590

最新推荐文章于 2024-04-22 13:27:18 发布

阅读量816

点赞数 2

本文链接：https://blog.csdn.net/qq_41672590/article/details/79178098

版权

本次实践主要练习的知识点:

reset
样式覆盖
浮动
背景
边框
类选择器
伪类
行高
文字样式

我们试着做出下面这个图片中的导航:

第1步:实现排版

它的背景色主要是灰色的,并且当前所在的菜单位置是红色的,比如你当前位置在Clients的话它也应该会变成红色

这种情况下一般是最外面用一个ul包住,再每一个菜单都是li,每个li左浮动,请复制以下示例代码查看效果:

<body>
<style type="text/css">
/*第1步的CSS*/
/*reset开始*/
*{
     margin:0; padding:0;}
a{
     text-decoration:none;}
ul{
     list-style:none;}
/*reset结束*/

ul{
     width:1000px; height:50px; margin:20px auto;} /*一定要定义宽高度哦!*/
ul li{
     width:110px; float:left;}
</style>
<ul>
	<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>
</body>

好了,排版基本出来了,效果图

第2步:上背景色

接下来我们给它上色,背景是黑色的,文字是白的,暂时这样试下:

<body>
<style type="text/css">
/*第1步的CSS*/
/*reset开始*/
*{
     margin:0; padding:0;}
a{
     text-decoration:none;}
ul{
     list-style:none;}
/*reset结束*/

ul{
     width:1000px; height:50px; margin:20px auto;}
ul li{
     width:110px; float:left;}
</style>
<style type="text/css">
/*第2步的CSS*/
ul{
     background:#202020;}
ul a{
     color:#FFF;}
</style>
<ul>
	<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>
</body>

效果图

第3步:排版

这时候发现了问题,文字是在顶上的,怎么办?回顾CSS常用的知识 - 行高章节的内容,我们把每个li的line-height(行高)设置成容器一样的高度就可以了!

<body>
<style type="text/css">
/*第1步的CSS*/
/*reset开始*/
*{
     margin:0; padding:0;}
a{
     text-decoration:none;}
ul{
     list-style:none;}
/*reset结束*/

ul{
     width:1000px; height:50px; margin:20px auto;}
ul li{
     width:110px; float:left;}
</style>
<style type="text/css">
/*第2步的CSS*/
ul{
     background:#202020;}
ul a{
     color:#FFF;}
</style>
<style type="text/css">
/*第3步-1的CSS*/
ul li{
     line-height:50px;}
</style>
<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">关于我们</a></li>
	<li><a href="#">服务</a></li>
	<li><a href="#">客户</a></li>
	<li><a

最低0.47元/天解锁文章

qq_41672590

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页制作实践 - 导航菜单

本次实践主要练习的知识点:reset样式覆盖浮动背景边框类选择器伪类行高文字样式我们试着做出下面这个图片中的导航:第1步:实现排版它的背景色主要是灰色的,并且当前所在的菜单位置是红色的,比如你当前位置在Clients的话它也应该会变成红色这种情况下一般是最外面用一个ul包住,再每一个菜单
复制链接

扫一扫