网站首页布局模板1

最新推荐文章于 2024-05-06 17:11:44 发布

准将

最新推荐文章于 2024-05-06 17:11:44 发布

阅读量6.9k

点赞数 4

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/uhb6577/article/details/105530302

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最常见的网站首页布局

准备
代码
原理

准备

说明：

参考腾讯云服务首页（利用html页面定位到指定位置）
需要实现的效果
div内容用图片替代，背景图片准备dummyimage（一个很好的生成指定图片尺寸颜色的网站）

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<style>
        *{
            margin: 0;
       	}
        html,body{
            width: 100%;
            height: 100%;
        }
        .div1{
            width:100%;
            height: 100%;
            background: url(00e6ff.png);
            background-size: cover;
            text-align: center;
        }
        .div2{
            width:100%;
            height: 100%;
            background: url(5500ff.png);
            background-size: cover;
        }
        .div3{
            width:100%;
            height: 100%;
            background: url(fff700.png);
            background-size: cover;
        }
</style>


<body>
<section class="div1"><button onclick="goTo3();">跳转到第三张</button></section>
<section class="div2"></section>
<section id="three" class="div3"></section>
<section class="div2"></section>

</body>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script type="text/javascript">
    function goTo3() {
        $("html,body").animate({scrollTop: $("#three").offset().top}, 500);//定位到《静夜思》
    }
</script>
</html>

记得把图片替换一下哦

原理

css动画跳转到指定位置
div 铺满整个屏幕，背景图片自适应

准将

关注

4
点赞
踩
40

收藏

觉得还不错? 一键收藏
2
评论
网站首页布局模板1

最常见的网站首页布局准备代码原理准备说明：参考腾讯云服务首页（利用html页面定位到指定位置）需要实现的效果 div内容用图片替代，背景图片准备dummyimage（一个很好的生成指定图片尺寸颜色的网站）代码<!DOCTYPE html><html><head> <meta charset="utf-8">...
复制链接

扫一扫