计划在此页面中放置一个主页,同时给出登录和注册的选项。为什么要登录注册分开呢?因为我在之前的登录页面里对用户名和密码增加了ASP.NET RequiredFieldValidator 控件,使得这两项不能为空,所以在未输入ID和密码之前不能注册(哦好奇怪的控件)。其实也可以删除相关控件,但是由于本人刚入门超级小菜,想学习和尝试相关控件的使用,所以就添加一个主页来解决!
(这里提出的一个不确定的点是,是由于相关控件会在编译时也进行编译、所以即使把注册的跳转指令放在点击登录的相关指令之前,也不能跳转。哦好奇怪的控件!(主要是我使用得不够熟练))
下面开始实践!
一、 设置背景
修改body内容如下:<body style="background-color: transparent; background-image: url(IMG/3.jpg);background-size:cover;background-attachment: fixed;">
这句话是一个内联样式(inline style),应用于 <body>
元素。每个样式属性的含义:
-
background-color: transparent;
:这个属性设置了背景颜色为透明。透明背景意味着页面内容下方的元素或背景图像将会显示出来。在这种情况下,由于后续的background-image
属性设置了背景图像,所以透明背景颜色将不会显示。 -
background-image: url(IMG/3.jpg);
:这个属性设置了背景图像的URL,图像文件路径为 "IMG/3.jpg"。这意味着将使用指定的图像作为背景。 -
background-size: cover;
:这个属性设置了背景图像的大小调整方式。cover
表示背景图像将被调整为覆盖整个元素的背景区域,并且保持图像的纵横比例不变。这样可以确保图像完全填充背景,并且可能会被裁剪以适应元素的大小。 -
background-attachment: fixed;
:这个属性设置了背景图像的滚动行为。fixed
表示背景图像将固定在视口中,不会随页面的滚动而移动。这意味着即使用户滚动页面,背景图像仍然保持在固定的位置。
二、设置button位置
- 添加一个2*1的表,在两行中分别插入两个按钮(button);
- 在<head><style>中修改相关属性,使得按钮靠下。我的设置如下:
- 设置align = "center"使得按钮居中,效果如下:
- 两个按钮的设置类似,效果如下:
- 感觉button有点单调难看,进行一些.css的修改,简单来说是在Button中添加了class,使得可以对按钮进行属性设置,代码如下:
执行效果如下(还是很单调哈哈哈):<head> ... <style> ... .button-style { width: 135px; /* 设置按钮的宽度 */ height: 35px; /* 设置按钮的高度 */ font-size: 14px; /* 设置按钮的字体大小 */ border-radius: 10px; /* 设置按钮的圆角半径 */ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8); /* 添加更明显的阴影效果 */ } </style> </head> <body style="background-color: transparent; background-image: url(IMG/3.jpg);background-size:cover;background-attachment: fixed;"> <form id="form1" runat="server"> <table class="auto-style1"> <tr> <td align="center" aria-dropeffect="none" class="auto-style2" > <asp:Button ID="Button1" runat="server" Text="Register" class="button-style"/> </td> </tr> ...
三、 添加button行为
- 在设计页面中双击Register按钮跳转到相应代码(Register是写好的注册页面,下一篇文章写):
Response.Redirect("Register.aspx");
- 在设计页面中双击Login按钮跳转到相应代码(Login是写好的注册页面,上一篇文章已完成):
Response.Redirect("Login.aspx");
- 就可以实现跳转啦!
- 但是我觉得我的登录页面有点难看,修正一下子,稍微美观一些,后续继续修正:
- 完成!!✿✿ヽ(°▽°)ノ✿