一.第一个网页设计,原型如下图
思考要完成的点:
1.登陆和注册建(input)设置(type)为submit的类型
2.下面的blog标题设计为表格(table),最外层显示表格框
3.表格的位置设置在网页的中间位置
实现效果如下
代码如下
<html>
<head>
<title>index.jsp</title>
</head>
<form>
<p><!--使用分段符将界面分割,注意此用法会产生一个新的段落-->
<input style="background-color:orange;font-size: 40px" type="submit" value="登录" />
<input style="background-color:orange;font-size: 40px" type="submit" value="注册" />
</p>
</br><!--使用换行符将页面分割,此方法不会产生新的段落-->
<center><!--被<center></center>包含的元素的对齐方式如果不加以强调,它们会全部解释为居中对齐-->
<table border="2">
<tr>
<td style="text-align:center;font-size: 30px">
<a href="http://www.baidu">第1篇blog标题
</a>
</td>
</tr>
<tr>
<td style="text-align:center;font-size: 30px">
<a href="http://www.baidu">第2篇blog标题
</a>
</td>
</tr>
<tr>
<td style="text-align:center;font-size: 30px">
<a href="http://www.baidu">第3篇blog标题
</a>
</td>
</tr>
<tr>
<td style="text-align:center;font-size: 30px">
<a href="http://www.baidu">第4篇blog标题
</a>
</td>
</tr>
<tr>
<td style="text-align:center;font-size: 30px">
<a href="http://www.baidu">第5篇blog标题
</a>
</td>
</tr>
<tr>
<td style="text-align:center;font-size: 30px">
<a href="http://www.baidu">......
</a>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
二,第二个网页设计,原型如下
1. 思考要完成的点
存在用户名和密码两个输入域,需要使用表单form结构来定义三个input元素;
text属性
password属性
submit属性
2.实现效果如下
注:div元素是一个块元素,不进行设置的话会自动分行,所以本示例采用了表格来对元素进行分割
<br>
<head>
<title>login.jsp</title>
</head>
<br>
</br>
</br>
</br>
</br>
</br>
<center>
<table>
<tr>
<td style="background-color: orange;font-size: 40;color: white">
用户名:
</td>
<td>
<input style="font-size: 40" type="text" name="username">
</td>
</tr>
<tr>
<td style="background-color: orange;font-size: 40;color: white">
密 码:
</td>
<td>
<input style="font-size: 40" type="password" name="password">
</td>
</tr>
</table>
</center>
</br>
</br>
<div style="text-align: center">
<input style="font-size: 40;background-color: blue;color:white" type="submit" value="登录">
</div>
</form>
</body>
</html>
三,第三个网页设计,原型如下
1. 思考要完成的点
将网页分割成三个区域,最上面的可以采用div块
左面的可以采用div块,嵌套
右面的也可以使用嵌套
2.完成效果如下
该方法是通过使用table嵌套方式,先做一个两列表格然后把两个表格嵌套进去。
<html>
<head>
<meta charset="utf-8">
<title>admin.jsp</title>
</head>
<body>
<div style="background-color: blue;font-size: 30">
<div style="text-align: right;border: 2px solid">
用户名[退出]
</div>
</div>
</br>
</br>
</br>
</br>
</br>
<table width="80%" align="center" >
<tr>
<td width="20%" style="float: left;margin: 0px;padding: 0px;">
<table>
<tr>
<td style="text-align: center;background-color: blue;font-size: 30;width: 200;color: white">
<a href="http://www.baidu">文章列表
</a>
</td>
</tr>
<tr>
<td style="text-align: center;background-color: red;font-size: 30;color: white">
<a href="http://www.baidu">添加文章
</a>
</td>
</tr>
<tr>
<td style="text-align: center;background-color: red;font-size: 30;color: white">
<a href="http://www.baidu">用户管理
</a>
</td>
</tr>
</table>
</td>
<td width="70%" style="float: right;margin: 0px;padding: 0px;">
<table>
<tr>
<th style="text-align: center;background-color: red;font-size: 20;width: 100;color: white">
id
</th>
<th style="text-align: center;background-color: red;font-size: 20;width: 200;color: white">
标题
</th>
<th style="text-align: center;background-color: red;font-size: 20;width: 200;color: white">
操作
</th>
</tr>
<tr>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
1
</td>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
第1篇blog
</td>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
<a href="http://www.baidu">[编辑][删除]
</a>
</td>
</tr>
<tr>
<td style="text-align: center;background-color: #FAEBD7;font-size: 20;width: 100;color: white">
2
</td>
<td style="text-align: center;background-color: #FAEBD7;font-size: 20;width: 100;color: white">
第2篇blog
</td>
<td style="text-align: center;background-color: #FAEBD7;font-size: 20;width: 100;color: white">
</td>
</tr>
<tr>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
3
</td>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
第3篇blog
</td>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
</td>
<tr>
<td style="text-align: center;background-color: #FAEBD7;font-size: 20;width: 100;color: white">
4
</td>
<td style="text-align: center;background-color: #FAEBD7;font-size: 20;width: 100;color: white">
第4篇blog
</td>
<td style="text-align: center;background-color: #FAEBD7;font-size: 20;width: 100;color: white">
</td>
</tr>
<tr>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
5
</td>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
第5篇blog
</td>
<td style="text-align: center;background-color: pink;font-size: 20;width: 100;color: white">
</td>
<tr>
</table>
</td>
</tr>
</table>
</body>
</html>
table中设置的height其实是设置个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。table中设置的width值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。(这个内部内容如果是图片的话是可以改变表格宽度的。)
tr标签里面的width设置不起任何作用
td标签里面的width和height都是起作用的。先看td的width吧,某一个td的width是和所处的一列每个td的width都相关的,取其中最大的width作为这一列中每个td的width,这点是让我们最混淆的地方,一定要从全局把握某个td的width
四,第四个网页设计
原型如下
思考要完成的点
右侧的文章界面,可以借用上面第三个网页的思路来写
完成效果
<html>
<head>
<meta charset="utf-8">
<title>admin.jsp</title>
</head>
<body>
<div style="background-color: blue;font-size: 30">
<div style="text-align: right;border: 2px solid">
用户名[退出]
</div>
</div>
</br>
</br>
</br>
</br>
</br>
<table width="80%" align="center" >
<tr>
<td width="20%" style="float: left;margin: 0px;padding: 0px;">
<table>
<tr>
<td style="text-align: center;background-color: blue;font-size: 30;width: 200;color: white">
<a href="http://www.baidu">文章列表
</a>
</td>
</tr>
<tr>
<td style="text-align: center;background-color: red;font-size: 30;color: white">
<a href="http://www.baidu">添加文章
</a>
</td>
</tr>
<tr>
<td style="text-align: center;background-color: red;font-size: 30;color: white">
<a href="http://www.baidu">用户管理
</a>
</td>
</tr>
</table>
</td>
<td width="55%" style="float: right;margin: 0px;padding: 0px;">
<table>
<tr>
<td style="text-align: center;background-color: yellow;font-size: 30;width: 300;height: 50;color: black">
文章标题
</td>
</tr>
<tr>
<td style="text-align: center">
<textarea rows="20" cols="40">
</textarea>
</td>
</tr>
<tr>
<td style="text-align: center">
<input style="background-color: blue" type="submit" value="添加">
</tdstyle>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
总结:
这是html入门级的编写,后续可以使用div和ul和li来完善。
更多推荐
HTML网页设计.2021.11.19
发布评论