导航栏还有类商品显示

最新推荐文章于 2023-08-05 14:02:35 发布

李十一

最新推荐文章于 2023-08-05 14:02:35 发布

阅读量434

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/xq4664546/article/details/49507587

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、css中可用的对齐方式：margin，position，float

2、CSS常用操作-分类

尺寸操作：

行间距可以通过设置行高来设计。

CSS分类操作，属性

cursor属性是用来选择鼠标显示形状的。

3、导航栏：只记录一下两种常见导航栏，都是以列表形式存在，垂直导航栏，水平导航栏

简单的垂直导航栏实例：

HTML文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link href="styleposition.css" type="text/css" rel="stylesheet">
</head>
<body>
    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航1</a></li>
    </ul>
</body>
</html>

CSS文件

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
a:link,a:visited{
    text-decoration: none;
    display: block;
    background-color: darkseagreen;
    color: aliceblue;
    text-align: center;
    width: 60px;
}
a:active,a:hover{
    background-color: khaki;
}

简单的水平导航栏：

CSS文件：

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: darkseagreen;
    width: 250px;
    text-align: center;
}
a:link,a:visited{
    text-decoration: none;
    font-weight: bold;
    background-color: darkseagreen;
    color: aliceblue;
    text-align: center;
    width: 60px;
}
a:active,a:hover{
    background-color: khaki;
}
li{
    display: inline;
    padding: 2px 3px;

}

4、类似商品显示

html文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片、网购界面</title>
    <link href="imagestyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="image">
            <a href="#" target="_blank">
                <img src="flower.jpg" alt="flower" width="200px" height="200px">
            </a>
            <div class="text">花的描述</div>
    </div>

    <div class="image">
        <a href="#" target="_blank">
            <img src="flower.jpg" alt="flower" width="200px" height="200px">
        </a>
        <div class="text">花的描述</div>
    </div>
    <div class="image">
        <a href="#" target="_blank">
            <img src="flower.jpg" alt="flower" width="200px" height="200px">
        </a>
        <div class="text">花的描述</div>
    </div>
    <div class="image">
        <a href="#" target="_blank">
            <img src="flower.jpg" alt="flower" width="200px" height="200px">
        </a>
        <div class="text">花的描述</div>
    </div>
    <div class="image">
        <a href="#" target="_blank">
            <img src="flower.jpg" alt="flower" width="200px" height="200px">
        </a>
        <div class="text">花的描述</div>
    </div>
    <div class="image">
        <a href="#" target="_blank">
            <img src="flower.jpg" alt="flower" width="200px" height="200px">
        </a>
        <div class="text">花的描述</div>
    </div>
</div>
</body>
</html>

CSS文件（注意这里面有问题！）

.container{
    margin: 20px auto;
    background-color: aquamarine;
    width: 70%;
    height: auto;
}

.image{
    border: 1px solid darkgray;
    width: auto;
    height: auto;
    text-align: center;
    float: left;
    margin: 10px;
}
img{
    margin: 10px;
    opacity: 0.8;
}
.text{
    font-size: 15px;
    margin-bottom: 5px;
}

对着个代码执行之后，并没有显示出container容器的背景颜色，经过查询，知道了是因为容器中没有具体内容又没有设置高度。height：auto，所以无法显示，给定具体高度之后，背景可以正常显示，如height：1000px。 给了高度是是“面”才会填充背景颜色。不给高度又无内容，那你相当于在里面画了一条宽为70%像素的“线”。

李十一

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
导航栏还有类商品显示

1、css中可用的对齐方式：margin，position，float2、CSS常用操作-分类尺寸操作：行间距可以通过设置行高来设计。CSS分类操作，属性cursor属性是用来选择鼠标显示形状的。3、导航栏：只记录一下两种常见导航栏，都是以列表形式存在，垂直导航栏，水平导航栏简单的垂直导航栏实例：HTML文件导航栏
复制链接

扫一扫

专栏目录