web2

最新推荐文章于 2022-10-23 13:04:29 发布

煤矿路口西_CTF小学生

最新推荐文章于 2022-10-23 13:04:29 发布

阅读量184

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/LLKJSAF/article/details/111409965

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第二个网页

学习中。。。目前只有单个页面而已，逐步完善。

这回尝试了诸多网站都有的瀑布流界面和2D转3D的效果。

网页上半部分效果：

下半部分：

瀑布流收起时：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eq6CO7qB-1608381541764)(https://s3.ax1x.com/2020/12/05/DLD7Kf.jpg)]
跳转部件：

html👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <link rel="stylesheet" type="text/css" href="1.css">
    <script src="jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function (){
            $("button").click(function (){
                $(".container").slideToggle();
            });
        });
    </script>
</head>
<body>
    <div class="header">
        <div class="header_in">
            <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>
        </div>
    </div>
    <div class="body">
        <div class="body_img">
            <img src="7798741b48729a099104646bf233b024.jpg" alt="views" width=99% height="432">
        </div>
        <div class="body_tie">
            <p>&nbsp&nbsp&nbsp&nbsp撒哈拉沙漠（Sahara Desert）形成于约250万年前，是世界最大的沙质荒漠，面积约932万平方千米，位于非洲北部。该地区气候条件非常恶劣，是地球上最不适合生物生存的地方之一。
                <br/>&nbsp&nbsp&nbsp&nbsp撒哈拉”是阿拉伯语的音译，在阿拉伯语中“撒哈拉”为大沙漠，源自当地游牧民族图阿雷格人的语言，原意即为“大荒漠”。</p>
        </div>
        <button class="btn">切换</button>
        <div class="container">
            <div><img src="eeb95d8a71d90e7b847b700c0ffbfd67.jpg"></div>
            <div><img src="e82ec0210acbfba7063c787a03eda506.jpg"></div>
            <div><img src="e7b656314cd9a0beb79a51f0b9136216.jpg"></div>
            <div><img src="d02eefd30b12f4717d4c249649f79c06.jpeg"></div>
            <div><img src="bf3b9d8249271403aed9993cace7f2c0.jpg"></div>
            <div><img src="a70091ef2a72c369f348de13521d746e.jpeg"></div>
            <div><img src="7798741b48729a099104646bf233b024.jpg"></div>
            <div><img src="653218b0cb31b22da1f627dbf3d3b5f9.jpg"></div>
            <div><img src="7d9aca9ae095f6549d7b3c1bd61d82d6.jpeg"></div>
            <div><img src="109a814ee4299c91ff87c13a5434546b.jpg"></div>
            <div><img src="000082b0c35a01843ffb1d645f5cb60b.jpeg"></div>
            <div><img src="81ddf0d4bffda51660eda0ed0149893a.jpg"></div>
            <div><img src="46b6da2cea2facb43332ba218a93d0f4.jpg"></div>
            <div><img src="40f929199b1299e2df94a0882678a571.jpeg"></div>
            <div><img src="9bcfb04909e0c4829bbd921f30aef4a0.jpeg"></div>
            <div><img src="7d9aca9ae095f6549d7b3c1bd61d82d6.jpeg"></div>
            <div><img src="109a814ee4299c91ff87c13a5434546b.jpg"></div>
            <div><img src="653218b0cb31b22da1f627dbf3d3b5f9.jpg"></div>
            <div><img src="7798741b48729a099104646bf233b024.jpg"></div>
            <div><img src="a70091ef2a72c369f348de13521d746e.jpeg"></div>
            <div><img src="81ddf0d4bffda51660eda0ed0149893a.jpg"></div>
            <div><img src="000082b0c35a01843ffb1d645f5cb60b.jpeg"></div>
            <div><img src="7d9aca9ae095f6549d7b3c1bd61d82d6.jpeg"></div>
            <div><img src="109a814ee4299c91ff87c13a5434546b.jpg"></div>
            <div><img src="653218b0cb31b22da1f627dbf3d3b5f9.jpg"></div>
            <div><img src="7798741b48729a099104646bf233b024.jpg"></div>
            <div><img src="a70091ef2a72c369f348de13521d746e.jpeg"></div>
            <div><img src="7d9aca9ae095f6549d7b3c1bd61d82d6.jpeg"></div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们&nbsp&nbsp|</a></li>
            <li><a href="#">加入我们&nbsp&nbsp|</a></li>
            <li><a href="#">联系我们&nbsp&nbsp|</a></li>
            <li><a href="#">帮助中心&nbsp&nbsp|</a></li>
            <li><a href="#">友情链接</a></li>
        </ul>
    </div>
    <div class="footer_2d">
        <a href="#">UP</a>
    </div>
</body>
</html>

css👇

body{
    margin:0;
}
.header{
    background-color: bisque;
    width: 100%;
    height: 50px;
}
.header_in{
    background-color: #F5B041;
    width: 80%;
    height: 50px;
    margin-left: 10%;
    margin-right: 10%;
}
ul{
    list-style-type: none;
    padding: 10px;
    width:100%;
    margin:0;
}
.header_in a:link{
    text-decoration: none;
    color: aliceblue;
    width: 50px;
}
.header_in a:visited {
    text-decoration: none;
    color: aliceblue;
    width: 50px;
}
.header_in a:hover{
    background-color: #191919;
}

li{
    display: inline;
    padding:3px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 20px;
    font-weight: bold;
}
.body{
    margin-top: 10px;
    background-color: #F5B041;
    height:auto;
    margin-left: 10%;
    margin-right: 10%;
}
.body_tie{
    height: 70px;
    font-family: 华文琥珀;
}
.btn{
    position: relative;
    left: 90%;
}
.container {
    background-color: coral;
    /*瀑布流效果*/
    column-width: 200px;
    -webkit-column-width: 200px;
    -webkit-column-gap: 5px;
    column-gap:5px;

}
.container div{

}
.container img{
    width: 200px;
    margin: 5px 0;
}
.text{
    font-size:12px;
    margin-bottom: 5px;
}
.footer{
    margin-top: 10px;
    background-color: #F5B041;
    width: 80%;
    height:auto;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}
.footer a:link{
    text-decoration: none;
    color: #191919;
    width: 50px;
}
.footer a:visited {
    text-decoration: none;
    color: #191919;
    width: 50px;
}
.footer_2d{
    color: #FFFFFF;
    background-color: #F5B041;
    font-size: 25px;
    position: absolute;
    right: 15px;
    bottom: -150px;
    width: 50px;
    height: 50px;
    -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
    transition: width 2s,height 2s,transform 2s;
}
.footer_2d:hover{
    width: 70px;
    height: 70px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

煤矿路口西_CTF小学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web2

第二个网页学习中。。。目前只有单个页面而已，逐步完善。这回尝试了诸多网站都有的瀑布流界面和2D转3D的效果。网页上半部分效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0rkjsbqj-1608381257712)(https://s3.ax1x.com/2020/12/05/DLDbqS.jpg)]下半部分：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olwvJl7h-1608381257717)(https
复制链接

扫一扫