CSS对齐&尺寸&分类&导航栏

最新推荐文章于 2021-10-15 19:52:52 发布

时间解

最新推荐文章于 2021-10-15 19:52:52 发布

阅读量740

点赞数 1

分类专栏： CSS 文章标签： css margin width display inline

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS对齐 margin, position, float

对齐元素时，对<body>元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
当使用position属性时，请始终设置!DOCTYPE声明。

<!DOCTYPE html>
<html>
<head>
<style>
body
{
    margin:0;   <!-- 预设内外边距 -->
    padding:0;
}
.container
{
    position:relative;
    width:50%;  <!-- 只使用body的50% -->
}
.right
{
    position:absolute;
    right:0px;  <!-- 右侧挨着container的右边界 -->
    width:300px;
    background-color:#b0e0e6;
}
</style>
</head>

<body>
    <div class="container">
        <div class="right">
          <p><b>注释：</b>当使用position属性进行对齐时，请始终包含!DOCTYPE声明！如果省略，则会在IE浏览器中产生奇怪的结果。</p>
        </div>
    </div>
</body>

</html>

CSS尺寸

有以下几个属性可进行尺寸的设置：

height

width

min-height

min-width

max-height

max-width

line-height（两相邻行顶间的距离）

CSS分类 classification

CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。 CSS分类的属性有：

display

visibility

float

clear

position

cursor

设置某元素上鼠标的属性：

span.help      { cursor:help;     }
span.wait      { cursor:wait;     }
span.crosshair { cursor:crosshair;}

CSS导航栏

创建垂直导航栏：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a:link,a:visited
{
    width:120px;
    padding:4px;
    display:block;
    color:#FFFFFF;
    background-color:#bebebe;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#cc0000;
}
</style>
</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>

</html>

使用行内列表(display:inline)创建水平导航栏：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
li
{
    display:inline; <!-- 使li元素水平排列 -->
}

a
{
    width:100px;
    padding:4px;
    display:block;  <!-- 使用整个元素区域都可点击，而不只是文字 -->
    color:#FFFFFF;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}
a:link,a:visited
{
    background-color:#bebebe;
}
a:hover,a:active
{
    background-color:#cc0000;
}
</style>
</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>

</html>

使用浮动列表(float:left)创建水平导航栏：


<!DOCTYPE html>
<html>
<head>
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden; <!-- 防止li元素出现在列表之外 -->
}
li
{
    float:left;      <!-- 使用浮动属性使用li水平排列 -->
}

a  
{
    width:100px;     <!-- 设置每个链接等宽 -->
    display:block;
    padding:20px;
    color:#FFFFFF;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}
a:link,a:visited
{
    background-color:#bebebe;
}
a:hover,a:active
{
    background-color:#cc0000;
}

</style>
</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>

</html>