HTML网页设计.2021.11.19_网页原型练习-CSDN博客

本文链接：https://blog.csdn.net/cvpatient/article/details/121417656

一.第一个网页设计，原型如下图

思考要完成的点：

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.com">第1篇blog标题
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align:center;font-size: 30px">
                <a href="http://www.baidu.com">第2篇blog标题
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align:center;font-size: 30px">
                <a href="http://www.baidu.com">第3篇blog标题
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align:center;font-size: 30px">
                <a href="http://www.baidu.com">第4篇blog标题
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align:center;font-size: 30px">
                <a href="http://www.baidu.com">第5篇blog标题
                </a>
            </td>
        </tr>
        <tr>
            <td style="text-align:center;font-size: 30px">
                <a href="http://www.baidu.com">......
                </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.com">文章列表
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;background-color: red;font-size: 30;color: white">
                        <a href="http://www.baidu.com">添加文章
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;background-color: red;font-size: 30;color: white">
                        <a href="http://www.baidu.com">用户管理
                        </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.com">[编辑][删除]
                        </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.com">文章列表
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;background-color: red;font-size: 30;color: white">
                        <a href="http://www.baidu.com">添加文章
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;background-color: red;font-size: 30;color: white">
                        <a href="http://www.baidu.com">用户管理
                        </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来完善。