网页设计

原创于 2019-12-19 23:17:34 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

#网页设计
**

HTML

**
在HTML中主要学习了表格，表单的制作，以及向网页中插入链接，图片，视频，音频等。其中我主要运用了表格的相关制作知识，做了“资产负债表”，其中主要运用的表格的基本框架的制作，以及表格中跨行跨列的制作方法，其中

中可对表格的属性和显示方式进行编辑，例如，背景、边框形式，文本位置等。
如下为跨行表格基本框架：

资产负债表

收入	支出
59000	34000	5500

** 在网页的制作中，首页登录页面运用到了表单的制作，主要包括：文本域的设置：`

First name:

Last name:

单选按钮的设置：`

Male

Female

复选框：`

I have a bike

I have a car

` # JS

**
除了表格基本样式的制作外，因为涉及到对盈利，总支出之类的运算，我还运用了JS的相关知识，主要就是定义表格中部分内容或个别表格的“id”，在定义的函数中对该内容进行获取，将字符串类型转化为数字，在函数中进行运算，添加运行命令，计算出结果，并将结果填入定义相对应的表格。
其中
获取：var x=document.getElementById("sr"+i).value;
转化为数字形式：var m=parseInt(s);
将所得结果填入对应Id的表格：document.getElementById("jrzj").innerHTML=n;
设置按钮触发函数运行：<button onclick="asum1()">现金与现金等价物小计</button>
除表格中运用到的之外，首页还设置了“登陆成功”弹出窗口：<script> function myFunction() { alert("登陆成功！"); } </script>
除此之外，JS中：
**使用 window.alert() 弹出警告框；

<script>
window.alert(“hello”)；
</script>

**使用 document.write() 方法将内容写到 HTML 文档中;

<script>
document.write(Date());
</script>

使用 console.log() 方法在浏览器中显示 JavaScript 值;

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

还可以用date()、gettime()、获取当前日期，当前时间等。

#CSS

**
在网页的制作中，主要运用了CSS中页面布局的相关知识，首先在头部用STYLE对各部分的格式样式进行设置，定义，例如文本位置，字体，背景等，中对应定义各部分的类型，将格式应用到模块中。其中，我发现，在中间主题部分分为三个板块的基础上，其中间还可以再分为两栏，分栏后，极大的增加了页面的美观。但是导航条没有充分运用，后期有待研究。
在此次网页的制做中，通过引用其他网页极大的丰富了网页的内容。
CSS中，当样式需要运用于很多页面时选用外部样式表，每个页面使用标签链接到样式表在文档头部，
`

` 内部样式在STYLE中编辑即可。