【CSS】使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页
2024-10-19 12:41:30
有两种创建水平导航栏的方法。使用行内或浮动列表项。
如果您希望链接拥有相同的尺寸,就必须使用浮动方法。
1、构建水平导航栏的方法之一是将 <li> 元素规定为行内元素:
display:inline; - 默认地,<li> 元素是块元素。在这里,我们去除了每个列表项前后的换行,以便让它们在一行中显示。
2、对列表项进行浮动
为了让所有链接拥有相等的宽度,浮动 <li> 元素并规定 <a> 元素的宽度:
li
{
float:left;
}
a
{
display:block;
width:60px;
}
float:left - 使用 float 来把块元素滑向彼此。
display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
width:60px - 由于块元素默认占用全部可用宽度,链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。
最新文章
- ubuntu14.04 python自带版本升级
- C语言中的变量
- 用Castor 处理XML文档
- C++复现经典游戏——扫雷
- 快速排序,C语言实现
- php session文件修改路径
- Visual studio 2013安装及单元测试
- MySQL下查看用户和建立用户
- 著名加密库收集 Encrypt
- [置顶] 【cocos2d-x入门实战】微信飞机大战之四:飞机登场咯
- Appium 出现 >; error: com.test/.activity1 never started. Current: com.test/.activity2
- Sagit.Framework For IOS 开发框架入门教程4:注册页布局-被消灭的变量
- MIG IP控制DDR3读写测试
- 原生js创建模态框(摘自:东窗凝残月 链接:https://www.cnblogs.com/dcncy/p/9076937.html)
- Java将list数据导出到Excel——(八)
- [development][dpdk][hugepage] 为不同的结点分配不同大小的大页内存
- Swift3 JSON字符串和字典互转(JSON字符串转字典和字典转JSON字符串)
- C++多线程学习资料参考
- [原][osgearth]osgearth本地(离线)数据源处理小结
- Java--不可覆盖的方法
热门文章
- string转xml
- thinkphp htmlspecialchars_decode
- ios开发 学习积累20161027~20161031
- 给<;input>;文本框添加灰色提示文字
- 从Linux系统安装到Web应用启动教程
- maven 程序包com.sun.image.codec.jpeg
- 第二章.JSP/Servlet及相关技术详解
- Struts2 (四) — 拦截器
- 30个优秀的chrome网页设计开发插件
- JavaScript自定义字符串格式化