网站首页布局模板1

最常见的网站首页布局

  • 准备
  • 代码
  • 原理

准备

说明:

  • 参考腾讯云服务首页 (利用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 铺满整个屏幕,背景图片自适应

你可能感兴趣的:(前端,html,css)