6CSS常见操作对齐、尺寸、分类、导航栏、图片

最新推荐文章于 2021-10-19 00:01:45 发布

bymyself11

最新推荐文章于 2021-10-19 00:01:45 发布

阅读量1k

点赞数 1

分类专栏： CSS学习之路

本文链接：https://blog.csdn.net/bymyself11/article/details/50974518

版权

CSS学习之路专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.对齐

使用margin属性进行水平对齐

使用position属性进行左右对齐

使用float属性进行左右对齐

margin:0px auto;0px表示上下边距为0;左右自适应则会显示左右居中的效果

2.尺寸

属性描述

height

width

line-height 设置行高

max-width 设置元素最大宽度

min-width

max-height

min-height

3分类

属性

cursor 鼠标移动到元素上的显示类型

display 设置是否及如何显示

visibility 设置元素是否可见

4.导航栏

（1）垂直导航栏

css代码：
ul{
 margin:0px;
 padding: 0px;
 list-style-type:none;
}
a:link,a:visited{
    display: block;
    text-decoration: none;
    background-color: bisque;
    width: 50px;
    text-align: center;
    color: black;
}
a:active,a:hover{
    background-color: aqua;

}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直导航栏</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
    <li ><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
</ul>
</div>
</body>
</html>

运行结果：

（2）水平导航栏

ul{
    margin:0px;
    padding: 0px;
    list-style-type:none;
    background-color:darkgreen;
    width: 200px;
    text-align: center;
}
a:link,a:visited{

    text-decoration: none;
    background-color: darkcyan;
    width: 50px;
    text-align: center;
    color: black;
}
a:active,a:hover{
    background-color: aqua;

}
li{
    margin-left: 10px;
    display: inline;/*一行显示*/
}
html里面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平导航栏</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
    <li ><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
</ul>
</div>
</body>
</html>

显示结果：

5.图片

这里之间把图片的属性写在代码里

body{
    width: 70%;
    margin: 10px auto;
    background-color: lemonchiffon;

}
.image{
    border: 1px solid forestgreen;
    width:auto;
    height: auto;
    float: left;
    margin: 5px;
    background-color: honeydew;
    text-align: center;
}
.img{
    margin: 5px;
}
.text{
    font-size: 10px;
    margin-bottom: 5px;
}
html里面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
    <div class="image">
        <a href="#"><img class="img" src="img.jpg" alt="萌娃图片" width="166" height="220"></a>
        <div class="text">萌萌哒图片</div>
    </div>
</div>
</body>
</html>

显示结果：