【人机交互设计】实验3
实验要求：2.1 设计某个公司的主页，包括：介绍、新闻、产品展示等；（公司自己寻找）
- 用vs code进行编辑，从头开始构建；请勿直接下载页面。
- 掌握Html语言，利用Html语言进行页面编程。
- 开学自学css的内容，进行样式的设计。要求有布局、色彩、字体等因素的考虑。
- 需要自己进行重新的版式、颜色等的设计。
- 实验报告中，需要讨论网页背后的设计理念和指导原则。
html基础
<head>中放置头文件。
<body> 元素定义 HTML 文档的主体。
<h1> - <h6>定义 HTML 文档中的标题。
<p> 元素定义 HTML 文档中的一个段落。
<a>定义 HTML 文档中的链接。链接的地址在 href 属性中指定。
<img> 元素定义 HTML 文档中的一个图像。图片的地址在 sur 属性中指定。
css基础
selector {property: value}
selector选择html中的元素、属性...
可以更改字体颜色位置等等
每个html元素都被装在一个盒子里。
<margin>设置盒子的外边距。
<padding>设置盒子的内边距。
html外接css
<link rel="stylesheet" href="CSS文件名.css">
放置在html文档的<head>中。
也可以写好css后内置在<style>中。但不推荐，会造成编辑困难
元素对齐
fixed：固定；
absolute：相对固定；
如果图片超过div大小可以设置overflow: hidden;
导航栏固定位置
导航栏固定位置
元素分列显示
用<li>将要并排显示的元素装好，css设置 float: left; width: 33.3%;
可以根据自己需要的列数更改width。
3列效果
响应鼠标
导航栏响应
| css文档 | |
|---|---|
| 鼠标响应 | 元素名:hover{要改变的内容；} |
| 图片圆形 | border-radius: 50%; |
| 图片放大 | transform: scale(1.1); |
锚点页面内跳转
选择要跳转到的元素，设置id
链接处herf设置为#加上id名
锚点跳转
