利用li标签做菜单-创新互联
现在我们用一个ul li标签来做一个菜单
在宜川等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站建设、成都做网站 网站设计制作按需制作网站,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销推广,外贸网站建设,宜川网站建设费用合理。首先来看看ul li 的基本样式
代码如下
ul li
- 首页
- 个人主页
- 消息中心
- 充值中心
- 会员中心
效果如下
我们看到,代码中的文字按循序排列了。前面还有个点,这就是ul li的默认样式
现在我们主要有两个动作。
1、去除前面的点
2、让它横向排列
好,我们先来做第一步,去除点
ul li
- 首页
- 个人主页
- 消息中心
- 充值中心
- 会员中心
代码中,我加入了样式,写法和之前的不一样,这是另外一种写法,直接写标签名,上面ul li的意思是:代码中的ul里面的所有li,空格代表里面的所有,包含子级标签和更深层次的标签,例如孙级标签。如果只要子级,而不需要更加深入,就用ul>li。>符号代表子级。
里面的样式
list-style:none;
意思就是让这个集合没有任何修饰,那么它前面的点就会消失
效果如下
第一步已经完成了,现在进行第二步,让它横向
在样式代码中加入
float:left;
意思就是让标签向左边浮动
全部代码如下
ul li
- 首页
- 个人主页
- 消息中心
- 充值中心
- 会员中心
效果如下
这个时候,我们已经完成大部分工作了。
下面让它美化点,加点边距,在样式代码中加入
margin-right:20px;
意思就是,让li标签的右边边距为20px
效果如下
效果还不错
现在我们让它居中,我们用一个div包住原来的ul,再给div加上两句样式,样式代码如下
#menu{ width:1200px; margin:0 auto; }
意思是,设置宽度未1200px,边距上下为0,左右自动。
ul li
- 首页
- 个人主页
- 消息中心
- 充值中心
- 会员中心
效果如下
看起来好像不明显,我们加条分隔线hr
代码如下
ul li
- 首页
- 个人主页
- 消息中心
- 充值中心
- 会员中心
效果如下
代表换行,相当于回车键
代表分割线。
一个简单的菜单效果就这样出来了
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:利用li标签做菜单-创新互联
转载注明:http://ybzwz.com/article/dhoddg.html