前两次大概了解了一下服务器,浏览器,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)