原生html 写一个分辨率为512*540的页面,且超过一定高度自动滚动
时间: 2024-03-13 08:44:23 浏览: 20
好的,以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>自动滚动页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
height: 540px;
width: 512px;
overflow-y: scroll;
}
</style>
</head>
<body>
<!-- 这里是页面内容,可以根据需要添加 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod euismod massa id iaculis. Nulla facilisi. Sed molestie, lorem vel varius ultricies, nisl libero faucibus purus, a consectetur dolor lorem quis velit. Etiam euismod, metus ac ultrices rutrum, velit odio cursus massa, eu gravida sapien purus vel justo. Sed ac nunc eget est malesuada bibendum in vel eros.</p>
<p>Donec varius tellus sit amet quam ultrices, ac scelerisque nulla lobortis. Maecenas tincidunt sapien eget elit vestibulum, et varius lorem varius. Sed nec nisi a augue viverra maximus. Nam pulvinar, nibh in imperdiet dapibus, purus est lobortis justo, vel scelerisque odio ipsum ac elit. Suspendisse non quam et nibh sodales tempus. Suspendisse potenti. Fusce risus mi, lacinia nec bibendum vel, ullamcorper sed nisi. Mauris lobortis, nibh vel porta posuere, nunc dolor consequat urna, vel euismod eros massa vel eros.</p>
<p>Aliquam ac ipsum ac nibh malesuada facilisis non eu ante. Nulla interdum, nisl eget commodo consequat, sapien velit vulputate ipsum, ac lacinia elit augue id diam. Fusce a ex suscipit, dignissim lectus nec, mattis dui. Sed et magna vel libero varius interdum. Suspendisse sit amet ante at nunc dignissim tincidunt sed eu nisl. Duis vel elit eget ex pulvinar tincidunt. Etiam tempus, nisl eu faucibus venenatis, sem dolor posuere nulla, nec pellentesque augue sem ac sapien. Sed quis risus nunc. Sed quis nulla condimentum, accumsan mauris et, imperdiet ipsum. Suspendisse vel risus non orci placerat bibendum. </p>
<p>Proin finibus tortor eget justo semper, non placerat ipsum finibus. Nullam ullamcorper augue nec mi gravida lobortis. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean ut lectus et risus lacinia blandit. Donec in mauris at ligula auctor mattis. Integer varius, nibh vitae tempus viverra, dolor nibh consectetur urna, ut scelerisque arcu nunc vitae mauris. Integer at pellentesque quam.</p>
<p>Phasellus in ante non risus finibus fermentum. Aenean convallis mauris in felis dapibus, at tempor lectus suscipit. Maecenas vitae tortor eget velit pretium eleifend vitae eu ante. Duis auctor nec nibh in ultricies. Phasellus eget metus vel tortor ultrices iaculis. Maecenas eget metus euismod, aliquet nunc nec, consequat elit. Donec commodo vulputate molestie. Sed bibendum, velit eu aliquet pretium, elit dolor ornare elit, eget egestas mi elit sit amet nibh. </p>
<p>Aliquam erat volutpat. Sed euismod nunc non enim consequat, vel lobortis massa hendrerit. Sed ut pretium elit, nec fermentum quam. Etiam suscipit dolor eu enim varius, sit amet ornare enim blandit. Aliquam sed lorem non quam bibendum vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce quis neque vel justo tempus mattis. Nam suscipit sapien sit amet urna faucibus, eget suscipit velit maximus. Donec auctor velit id mi finibus, et tincidunt erat aliquet. Duis vitae placerat velit. </p>
<p>Etiam quis metus vel ex tincidunt sagittis. Nullam feugiat risus ut dolor maximus, vel aliquet ipsum commodo. Ut vel auctor magna, vel fermentum justo. Mauris sit amet varius ex, vel imperdiet lacus. Donec vel nisl bibendum, consequat turpis in, auctor sapien. Nam euismod, nisl vel fringilla dignissim, nulla est blandit nulla, a pellentesque elit augue vel lectus. Phasellus scelerisque felis ut velit ornare, eget vehicula nunc dapibus. Mauris et libero elit. </p>
</body>
</html>
```
这里设置了 body 元素的高度为 540px,宽度为 512px,同时设置了 overflow-y 属性为 scroll,表示超出部分会出现滚动条。这样当内容超过页面高度时,就可以自动滚动了。