css3-对齐、分类、导航栏

本文介绍了CSS中不同对齐方式的应用,包括使用margin、position和float属性来实现元素的定位,并探讨了如何通过clear、cursor和display等属性进行元素的分类操作。此外,还详细讲解了创建垂直和水平导航栏的方法,以及如何调整图片的透明度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 对齐操作

.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    /*使用margin居中效果*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*margin: 100px auto;*/


    /*使用position进行右对齐*/
    /*position: absolute;*/
    /*right: 0px;*/

    /*float属性设置对齐方式*/
    /*float: right;*/
    /*float: left;*/

}

line-height 行高
max-height
max-width
min-width
min-height
width
height

2 分类操作
属性:
clear——设置一个元素的侧面是否允许其他的浮动元素
cursor——规定当指向某个元素之上时显示的指针类型
display——设置是否及如何显示元素 (可以让列表显示在一行中:
display: inline; //用来做菜单导航栏

float——定义元素在哪个方向浮动
visibility——设置元素是否可见或不可见

3 导航栏

垂直导航栏:

<ul>
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
</ul>

CSS3:
ul{
    list-style-type: none;
    margin: 0px;
    padding:0px;
}
a:link,a:visited{
    text-decoration: none;
    display: block;
    background-color: burlywood;
    color: aliceblue;
    width: 50px;
    text-align: center;
}
/*hover是指鼠标放在A标签上的时候*/
a:active,a:hover{
    background-color: crimson;
}

水平导航栏:

 只需要把第一个display删除,在li属性添加   display:inline

就会出现水平导航栏的效果

图片的透明度: poacity:0~1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值