前端学习笔记--CSS布局--文件流定位
2024-08-27 02:46:06
1.概述
2.文档流定位:从上到下,从左到右
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;/* 去掉默认样式*/
}
#nav{
width: 300px;
margin: 100px auto;/*自动居中*/
font-size: 0; /* 去掉导航之间的空隙*/
}
a{
display: inline-block;/*修改a的定位方式*/
width: 80px;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;/*行高 垂直居中*/
text-decoration: none;/* 去掉超链接的下划线*/
border-bottom: 1px solid #ccc;/* 设置底部边框的样式*/
}
a:hover{
color: white;
background-color: #ccc;
border: 1px solid;
border-top-color: orange;
border-right-color: orange;
border-left-color: orange;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>
最新文章
- <;十四>;JDBC_c3p0数据库连接池
- Maven间接依赖冲突解决办法
- .vimrc vim 配置大全
- 【转】 71道经典Android面试题和答案,重要知识点都包含了
- Atitit 图像处理--图像分类 模式识别 肤色检测识别原理&#160;与attilax的实践总结
- 汇编程序的Hello world
- 小甲鱼python视频弟十一讲(课后习题)
- HDU2204 Eddy&#39;s爱好(容斥原理)
- C++中静态数据成员
- 【转】iOS websocket 及时通讯实现
- mongodb基本语句使用
- Linq to XML 之XElement的Descendants方法的新发现
- Node.js学习(12)----Web应用开发
- 隐藏nginx 版本号信息(转)
- 最新windows 0day漏洞利用
- 数据库学习任务二:数据库连接对象SqlConnection
- 从Openvswitch代码看网络包的旅程
- 【6】学习C++之类的实例化及访问
- Maven Nexus3 安装,私服搭建
- Linux平台Oracle 12.1.0.2 单实例安装部署
热门文章
- 微信小程序实战,与后台交互
- 热修复干货| AndFix热补丁动态修复框架使用教程
- 使用plotrix做韦恩图
- python爬虫-爬取你想要的小姐姐
- Python23之内置函数filter()和map()
- PAT甲级题分类汇编——树
- 在被调用函数中获取资源及C++中的引用
- go tcp发送网络请求
- jquery.fileupload源码解读笔记
- 转 使用IParameterInspector, IOperationBehavior,Attribute(参数检查器、操作行为接口和标签)扩展WCF操作行为