前端学习笔记--CSS布局--文件流定位

最新推荐文章于 2024-07-18 21:58:51 发布

dejiebi3051

最新推荐文章于 2024-07-18 21:58:51 发布

阅读量75

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/dydxw/p/10786217.html

版权

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>

转载于:https://www.cnblogs.com/dydxw/p/10786217.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dejiebi3051

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记--CSS布局--文件流定位

1.概述2.文档流定位：从上到下，从左到右代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> ...
复制链接

扫一扫