IIS-ASP （三）登陆页面的优化和商品展示页面

最新推荐文章于 2022-05-16 10:48:26 发布

cryanxin

最新推荐文章于 2022-05-16 10:48:26 发布

阅读量1.7k

点赞数

分类专栏： ASP 文章标签： html 网页设计

本文链接：https://blog.csdn.net/cryanxin/article/details/78835044

版权

前两次大概了解了一下服务器，浏览器，ASP引擎，HTML代码之间的关系，并且连接上了数据库服务器，但总的来说，整个页面是很丑的。
HTML 页面本身是个标签化的语言，虽然每个标签都有丰富的样式属性可选，但为每一个标签不停的设计样式是一个很繁琐，十分不友好的过程。在早年间，进行HTML网页设计一直是所见即所得的。主要的软件有FrontPage, 和dreanweaver。FrontPage更是一度加入了初高中计算机必考内容。当然这两款IDE已经渐渐的退出历史舞台。目前在用的IDE是WebStorm。
本着标签语言应该注重内容而不是样式的原则，在HTML4中，W3C组织将原本臃肿的各种样式统一成了层叠样式表（CSS）。也就是说在HTML中只需要在意整个页面的架构和每个标签的内容，样式交给CSS，动态交互交给脚本。
与脚本一样，CSS同样可以选择内嵌在HTML文档中，也可以选择单独保存为CSS文件。一般来说如果想提高CSS 样式的复用性，应该把它单独的存为一个文件。
CSS的语法非常简单，常见的结构是

selector {
   property: value}

例如

h1 {
   color:red; font-size:14px;}

这句就把元素h1 的颜色定为红色，字体大小定为14px。
在HTML 中，一个元素的样式有多个属性，对于那些我们没有显式的指定的属性将使用浏览器的默认项。总的来说，对于元素的样式来源有四种，按优先级从高到低可以分为：

内联样式（直接在标签上定义的样式）
内部样式（在HTML头部使用style 标签定义的样式）
外部样式（外部CSS中的样式）
浏览器缺省设置

这四种样式层叠在一起，按照优先级选择，也就是层叠样式表名称的由来。

在前面我们大概设计了两个页面，一个是登陆页，一个是注册页，现在我们把这两个页面联系在一起。设计的界面是下面的样子：
登陆界面

这个常规而朴素的界面可以拆分成三个部分，结构内容，样式，交互脚本。
从结构内容上看，这个页面应该有一个外部框（灰色部分），这个框中是熟悉的Form 结构。 Form里是两个标签，两个可编辑文本框，下面是记住密码的勾选框，以及忘记密码的链接。在Form的下部分应该是用户注册界面的链接和登陆按钮。
写成HTML 代码应该是：

<html>
<head>
    <charset="utf-8">
</head>
<body>
    <div class="wrapper">
    <form action="" method="post">
        <div class="loginBox">
            <div class="loginBoxCenter">
                <p><label for="username">用户名：</label></p>
                <p><input type="text" id="username" name="username" class="loginInput" autofocus="autofocus" required="required" autocomplete="off" placeholder="请输入邮箱/手机号" value=""></p>
                <p><label for="password">密码：</label></p>
                <p><input type="password" id="password" name="password" class="loginInput" required="required" placeholder="请输入密码" value=""></p>
                <p><a class="forgetLink" href="#">忘记密码?</a></p>
                <input id="remember" type="checkbox" name="remember">
                <label for="remember">记住登录状态</label>
            </div>
            <div class="loginBoxButtons">
                <button class="loginBtn">登录</button>
                <div> <a href="agent.asp">用户注册</a> </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

这时候因为我们没加入样式，浏览器会选择默认样式渲染这些元素，在我的chrome 中得到的页面是这样的：
未渲染登陆页面

首先需要调整的样式就是在页面中的位置，居中的样式给人的感受会更好。在HTML 中，所有的元素都处于“wrapper” 这个类之下，所以只需要把”wrapper”调整到正确的位置就可以了。

在HTML的头部加入下面的代码

        <style>
        .wrapper {
            margin-left: 35%;
            margin-top: 100px;
            width: 400px;         
        }
        </style>

margin用于调整边距, width 用于调整大小。对于一个元素来说，有外边距和内边距之分，外边距定义了到父元素的边距。wrapper 的外层是窗口，通过定义左边距就可以达到居中的效果。这里大概把它放在距离左侧35%的位置。

类似的，在wrapper内部可以继续的定义这些元素的样式。在进行定义时，如果直接定义class 的样式，则所有该类元素的样式统一改变，而想对某个元素特殊设计时，可以通过id，或者 name 找到它。越精确的描述优先级越高。
完整的代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>登陆界面</title>
    <style>
        html {
            background-color: #B5DEF2;
        }

        .wrapper {
            margin-left: 35%;
            margin-top: 100px;
            width: 400px;

        }
        a:link{
            color: #B7D4EA;
        }
        a:visited{
            color: darkcyan;
        }
        a:hover{
            color: black;
        }
        .loginBox {
            background-color: #F0F4F6;
            /*上divcolor*/
            border: 1px solid #BfD6E1;
            border-radius: 5px;
            color: #444;
            font: 14px 'Microsoft YaHei', '微软雅黑';
            margin: 0 auto;
            width: auto;
        }

        .loginBox .loginBoxCenter {
            border-bottom: 1px solid #DDE0E8;
            padding: 24px;
        }

        .loginBox .loginBoxCenter p {
            margin-bottom: 10px
        }

        .loginBox .loginBoxButtons {
            /*background-color: #F0F4F6;*/
            /*下divcolor*/
            color: darkcyan;
            border-top: 0px solid #FFF;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            line-height: 28px;
            overflow: hidden;
            padding: 20px 24px;
            vertical-align: center;
            filter: alpha(Opacity=80)

最低0.47元/天解锁文章

cryanxin

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
IIS-ASP （三）登陆页面的优化和商品展示页面

前两次大概了解了一下服务器，浏览器，ASP引擎，HTML代码之间的关系，并且连接上了数据库服务器，但总的来说，整个页面是很丑的。 HTML 页面本身是个标签化的语言，虽然每个标签都有丰富的样式属性可选，但为每一个标签不停的设计样式是一个很繁琐，十分不友好的过程。在早年间，进行HTML网页设计一直是所见即所得的。主要的软件有FrontPage, 和dreanweaver。FrontPage更是一度加
复制链接

扫一扫