您的位置：首页 > Web前端 > CSS

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

2016-04-09 23:40 459 查看

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>

更多请参考：W3School

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css margin width display inline

相关文章推荐

新的分享

章节导航