人亦已歌 发表于 2023-2-1 12:36:46

CSS核心（三十六）使用无序列表和float浮动实现导航条


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用无序列表和float浮动实现导航条</title>
</head>
<style>
      ul{
                /* 清除无序列表的默认样式 */
                list-style:none;
                padding:0;
                margin:0;      
      }
      li{
                background:#abcdef;
                width:120px;      
                height:50px;
                /* 文字垂直居中 */
                line-height: 50px;
                /* 文字水平居中 */
                text-align: center;
                /* 左浮动 */
                float:left;
                /* 外边距 */
                margin-right:10px;
      }
</style>
<body>
<ul>
      <li><a href="https://www.teamczyx.com">首页</a></li>
      <li><a href="https://www.teamczyx.com">慈众易博V9</a></li>
      <li><a href="https://www.teamczyx.com">官方教程</a></li>
      <li><a href="https://www.teamczyx.com">营销技巧</a></li>
      <li><a href="https://www.teamczyx.com">网络推广工具</a></li>
</ul>
</body>
</html>






以上案例用float浮动实现了一个简单的菜单导航条，我们只讲代码原理，至于是否美观就不在本套教程的教学范围之内了。

黎明之雨 发表于 2023-2-18 07:22:25

就是这个道理！

tl3shi 发表于 2023-2-24 20:25:27

我是新手我看不懂你的那些符号可是我在看你写的那些体验上很手感动    很好我这个人不喜欢看别人写的东西我是经过一个网上的好朋友介绍的    你写的很好可是我要是能看懂你写的那写符号就好了那就跟能体会你的    内心感觉我想和你做个朋友你想吗??想的话就在我发的帖子上留下你的    电子邮箱.

孤独狂剑 发表于 2023-2-28 17:54:03

天下一绝啊！！！！！！！！！！！好！！！！！！！！！！！！！

stranger 发表于 2023-3-7 09:41:10

实在是太棒了。

浮华 发表于 2023-3-12 23:33:19

楼主,多谢啦!

我是衣迷 发表于 2023-3-18 14:32:54

学海无崖

yuisme 发表于 2023-3-23 21:21:35

很有感触！学计算机的没有几个真正懂得，起码我周围的人学了跟没学一样，除了会上网聊天还是聊天，用我爸爸常挂在嘴边说的话就是＂现在的学生那像读书啊，简直在混日子．＂

11lxmx 发表于 2023-3-28 01:01:19

不错~~~~~~~~~~但是我的水平还没这么高！！！！

pstme 发表于 2023-3-30 23:38:03

说得好，多谢你将的心德与我们共享
页: [1] 2 3 4
查看完整版本: CSS核心（三十六）使用无序列表和float浮动实现导航条