css3-对齐、分类、导航栏

来源:互联网 发布:券商研究报告网站 知乎 编辑:程序博客网 时间:2024/06/11 22:05

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

0 0
原创粉丝点击