HTML摄影社区热门小镇案列

最新推荐文章于 2024-05-12 22:04:10 发布

张小鱼༒

最新推荐文章于 2024-05-12 22:04:10 发布

阅读量2.6k

点赞数 5

分类专栏： HTML以及CSS和javascripts 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_56006701/article/details/124794047

版权

HTML以及CSS和javascripts 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在此案例当中，主要是针对ul以及li的应用，我们可以在父盒子里面加入相应的子盒子，将其宽度和高度设置好，此处的图片作为内容插入到页面当中【图片位置记得加入你自己的图片位置，小编的图片位置只是做个示例】，不同的浏览器下可能显示有所差别。

ul当中的li可以继续添加新的标签，以达到我们需要的效果。

无序列表是一个项目的列表，默认使用粗体圆点（典型的小黑圆圈）进行标记。

【可以使用list-style:none去除小圆点】

无序列表始于 <ul> 标签。每个列表项始于 <li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        h3{
            color: #4d4d4d;
            padding-top: 12px;
            padding-left: 12px;
            padding-bottom: 22px;
        }
        .box{
            width: 660px;
            height: 234px;
            border: 1px solid #d8d8d8;
            overflow: hidden;
        }
        .bottom{
            height: 200px;
            width: 660px;
            float: left;
            padding: 0px 22px 36px 12px;
        }
        .bottom .one{
            width: 220px;
            height: 90px;
            float: left;
        }
        .bottom .one .tp{
            width: 60px;
            height: 60px;
            /* box-shadow: 0px 0px 4px 4px #4d4d4d;设置阴影 */
            border-radius: 7%;
            border: 1px solid #4d4d4d;
            padding: 6px 6px;
            /* display: inline-block; */
            float: left;
        }
        .bottom .one .wb{
            float: left;
            font-size: 13px;
            line-height: 24px;
            color: #999999;
            margin-left: 16px;
            display: block;

        }
        .bottom .one .wb ul li:nth-child(1){
            font-size: 15px;
            color: #2e75bc;
        }
    </style>
</head>
<body>
    <div class="box">
    <h3>摄影社区热门小镇</h3>
    <div class="bottom">
            <div class="one">
                <div class="tp">
                    <img src="D:/学习笔记记录/HTML/作业2：摄影社区热门小镇/图片素材/pic_01.jpg" alt="">
                </div>
                <div class="wb">
                    <ul>
                        <li>风景狙击手</li>
                        <li>成员:80</li>
                        <li>作品:276</li>
                    </ul>
                </div>
            </div>
            <div class="one">
                <div class="tp">
                    <img src="D:/学习笔记记录/HTML/作业2：摄影社区热门小镇/图片素材/pic_02.jpg" alt="">
                </div>
                <div class="wb">
                    <ul>
                        <li>叙事感</li>
                        <li>成员:80</li>
                        <li>作品:116</li>
                    </ul>
                </div>
            </div>
            <div class="one">
                <div class="tp">
                    <img src="D:/学习笔记记录/HTML/作业2：摄影社区热门小镇/图片素材/pic_03.jpg" alt="">
                </div>
                <div class="wb">
                    <ul>
                        <li>定焦视界</li>
                        <li>成员:56</li>
                        <li>作品:456</li>
                    </ul>
                </div>
            </div>
            <div class="one">
                <div class="tp">
                    <img src="D:/学习笔记记录/HTML/作业2：摄影社区热门小镇/图片素材/pic_04.jpg" alt="">
                </div>
                <div class="wb">
                    <ul>
                        <li>中画幅乐园</li>
                        <li>成员:130</li>
                        <li>作品:239</li>
                    </ul>
                </div>
            </div>
            <div class="one">
                <div class="tp">
                    <img src="D:/学习笔记记录/HTML/作业2：摄影社区热门小镇/图片素材/pic_05.jpg" alt="">
                </div>
                <div class="wb">
                    <ul>
                        <li>《卡帕》先锋</li>
                        <li>成员:78</li>
                        <li>作品:125</li>
                    </ul>
                </div>
            </div>
            <div class="one">
                <div class="tp">
                    <img src="D:/学习笔记记录/HTML/作业2：摄影社区热门小镇/图片素材/pic_06.jpg" alt="">
                </div>
                <div class="wb">
                    <ul>
                        <li>植物的无声世界</li>
                        <li>成员:235</li>
                        <li>作品:1258</li>
                    </ul>
                </div>
            </div>
    </div>
    </div>
</body>
</html>

下面是显示的结果：

下面是一些我做这个案列时遇到的一些问题：

1、图片外围的边框设置

【刚开始小编以为是图片阴影，但是在后面调试的时候，小编用div盒子加了边框，在加圆角边框，就完美解决问题了】

2、li里面的颜色改变问题

【可能在学习这个初期，我们只能用nth-child（1）来解决，学习到后面也可以用链接a来做，以及hover来改变它的颜色】

欢迎在下方留言，将你不明白的地方和小编沟通

张小鱼༒

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML摄影社区热门小镇案列

在此案例当中，主要是针对ul以及li的应用，我们可以在父盒子里面加入相应的子盒子，将其宽度和高度设置好，此处的图片作为内容插入到页面当中【图片位置记得加入你自己的图片位置，小编的图片位置只是做个示例】，不同的浏览器下可能显示有所差别。ul当中的li可以继续添加新的标签，以达到我们需要的效果。无序列表是一个项目的列表，默认使用粗体圆点（典型的小黑圆圈）进行标记。【可以使用list-style:none去除小圆点】无序列表始于 <ul> 标签。每个列表项始于 <li>
复制链接

扫一扫