IIS-ASP （三） 登陆页面的优化和商品展示页面
来源：互联网 发布：常用设计软件 编辑：程序博客网 时间：2024/05/29 07:34
前两次大概了解了一下服务器，浏览器，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); -moz-opacity: 0.5; opacity: 0.5; } .loginBox .loginInput { border: 1px solid #D2D9dC; border-radius: 2px; color: #444; font: 12px 'Microsoft YaHei', '微软雅黑'; padding: 8px 14px; margin-bottom: 8px; width: 300px; } .loginBox .loginInput:FOCUS { border: 1px solid #B7D4EA; box-shadow: 0 0 8px #B7D4EA; } .loginBox .loginBtn { background-image: -moz-linear-gradient(to bottom, blue, #85CFEE); border: 1px solid #98CCE7; border-radius: 20px; box-shadow: inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px; color: #444; /*登录*/ cursor: pointer; float: right; font: bold 13px Arial; padding: 10px 50px; } .loginBox .loginBtn:HOVER { background-image: -moz-linear-gradient(to top, blue, #85CFEE); } .loginBox a.forgetLink { color: #ABABAB; cursor: pointer; float: right; font: 11px/20px Arial; text-decoration: none; vertical-align: middle; /*忘记密码*/ } .loginBox a.forgetLink:HOVER { color: #000000; text-decoration: none; /*忘记密码*/ } .loginBox input#remember { vertical-align: middle; } .loginBox label[for="remember"] { font: 11px Arial; } </style></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>接下来设计一个展示商品的界面，其实纯的HTML代码可以通过进入浏览器的开发者模式查看。当看到优秀的设计时，可以顺手看看它们的代码。
从我的亚马逊上爬下了一些书的图片，价格，作者， 简单的设计一个可以展示商品的页面。复杂的页面，推荐使用模板。
我们把一个页面划分为下面这样的区域：
其中顶上的黑色部分打算放一些logo，用户信息，跳转icon等。中间两个绿色的条就是商品的货架了，最下面的黄色部分可以用来放一些版权信息，备案，友站的链接等等。
这个页面的代码很简单：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .top{ margin-top:0px; height:40px; background: black; } .mid{ margin-top:0px; height:700px; background: white; padding: 20px; } .line{ margin-top: 20px; background: darkcyan; height: 300px; white-space: nowrap; } .block{ width: 200px; height: 300px; position: relative; margin-left: 70px; background: blueviolet; white-space: nowrap; display: inline-block; } .image{ margin-top: 0px; margin-left: 20px; height: 160px; } .bot{ margin-bottom:0px; height:100px; background: yellow; } </style></head><body><div class="top"></div><div class="mid"> <div class="line"style=""> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> </div> <div class="line" style=""> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="block"> <img class="image" src="芳华.jpg" > <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> </div></div><div class="bot"></div></body></html>按照块的嵌套关系，只需要把 line 和 block 这两层处理好就可以了。根据我们前面学到的CSS样式，把它们归为一类统一处理。
需要注意的点是把blcok（紫色）的display 属性改成inline-block 。这是因为浏览器会默认在div 上加上换行符，而我们希望这些block可以排成一排。还有一点是line 的whitespace 属性最好改为 nowrap 防止因为窗口大小的改变而改变元素的位置。
接下来把内容填充上就好了利用上一篇的连接数据库的知识来填充一下。 
代码如下：
<!DOCTYPE html><html ><head> <meta charset="utf-8" /> <title></title> <style> .top{ margin-top:0px; height:40px; background: black; } .mid{ margin-top:0px; height:700px; background: white; padding: 20px; } .line{ margin-top: 20px; background: white; height: 300px; white-space: nowrap; } .block{ width: 200px; height: 300px; position: relative; margin-left: 70px; background: white; white-space: nowrap; display: inline-block; } .image{ margin-top: 0px; margin-left: 20px; height: 160px; } .bot{ margin-bottom:0px; height:100px; background: yellow; } </style></head><body><%set conn=Server.CreateObject("ADODB.Connection") conn.Open "ASP" if conn.State=1 then set rs=Server.CreateObject("ADODB.Recordset") rs.open "select * from Book",conn end if dim bookname dim bookauthor dim bookprice dim imgsrc%><div class="top"></div><div class="mid"> <div class="line"style=""> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> </div> <div class="line"style=""> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> <% bookprice=rs("BPrice") bookname=rs("BName") bookauthor=rs("BAuthor") imgsrc=rs("Bimage") rs.movenext %> <div class="block"> <img class="image" src="<%=imgsrc%>" > <div class="item"> <p>书名: <% Response.Write(bookname) %><p> </div> <div class="item"> <p>作者: <% Response.Write(bookauthor) %><p> </div> <div class="item"> <p>价格: <% Response.Write(bookprice) %><p> </div> </div> </div></div><div class="bot"></div></body></html>阅读全文
0 0
- IIS-ASP （三） 登陆页面的优化和商品展示页面
- 商品详情页面展示
- Asp.Net页面生命周期 和 IIS请求
- 商品的页面
- 介绍三种处理IIS中无法打开asp页面的方法
- 在iis中发布asp的网站后，只显示登陆页面，其他的页面都不显示，并出现http500内部服务器错误，是怎么回事？
- servlet+jsp+xml写的一个小型的商品展示页面
- javascript传值和页面跳转传值（ASP.NET页面传参的三种方法）
- 大并发展示优化动态页面的静态化处理
- 自动化登陆百度页面的登陆页面
- 学习淘淘商城第六十四课（实现商品详情页面展示）
- 淘淘商城系列——实现商品详情页面展示
- springboot\maven 页面图片展示商品实现分页
- Jsp动态网站初步项目 --简单的商品浏览页面（商品浏览页面index.jsp）
- Jsp动态网站初步项目 --简单的商品浏览页面 （商品详情页面details.jsp）
- ASP页面显示速度的优化方案
- 浅谈ASP.NET页面的SEO优化
- 页面展示方法和装置
- Android Studio3.0开发JNI流程------JNI为静态常量(public static)赋值操作
- 字符串匹配的三个算法（KMP+字典树+AC自动机）
- Java的异常处理机制
- shell startup scripts的学习
- IOS系统 Input或者textarea Disabled默认样式问题
- IIS-ASP （三） 登陆页面的优化和商品展示页面
- 使用dom4j框架,创建xml文档并输出保存
- malloc函数详解
- ThreadPoolExecutor使用示例
- ubuntu16.04 python版本切换：pyenv
- pycharm pyqt python安装问题
- WebService学习笔记_初始WS(一)
- common java technology example urls
- List<Map>的几种遍历方式
