拦截页面

这是一个拦截页面，用于拦截用户的访问请求。页面的布局和样式已经预先设置好，包括了标题栏、提示信息等元素。用户在访问此页面时，将被阻止进入其他内容。

页面结构

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拦截页面</title>
<style>
body{ width: 100%; padding: 0; margin: 0; }
#max{ width: 100%; padding: 0; margin: 0 auto; }
#top{ width: 150px; margin: 0 auto; padding-top: 60px; }
#warm{ margin: 20px 0 15px 0; font-size: 24px; color: #606266; text-align: center; }
#tip{ width: 800px; margin: 0 auto; padding-top: 10px; padding-bottom: 20px; border: #DFDFDF solid 1px; border-radius: 6px; color: #808288; font-size: 16px; }
p{ padding-left: 200px; }
#example{ margin-left: 55px; }
</style>
</head>
<body>
<div id="max">
<div id="top">
<div id="warm">请不要尝试访问其他内容</div>
</div>
<div id="tip">您已被成功拦截！</div>
</div>
</body>
</html>

主要元素解释

  • <div id="max">:整个页面的最大宽度为100%。
  • <div id="top">:标题栏，宽度为150px,居中显示，距离顶部60px。
  • <div id="warm">:提示信息，字体大小为24px,颜色为灰色，文本居中。
  • <div id="tip">:提示信息的具体内容，宽度为800px,居中显示，上下间距各为20px,边框为灰色，圆角为6px,字体颜色为深灰色，字体大小为16px。