（HTML完结篇）制作一个简单页面(详解)20240823更新

　　演示视频在文章底部

　　1.页面内容居中显示方法

　　将这段代码放置在之上。

　　将全部内容包裹在这个div中，就可以实现整个页面居中。

　　内容显示宽度为浏览器视窗宽度的50%。

　　margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。使用“auto”值，可以实现居中。

　　2.导航栏悬停顶端方法

　　把四个a标签装到一个div中。

　　将添加到总体评价之下。

　　position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。

　　默认下，该div距离视窗顶端有10px左右的距离，因此为了让它与视窗顶部对齐，添加top：0px。

　　3.鼠标滑过导航标题或链接时改变背景色提示

　　这就要介绍关于css的写法了。

　　简单来说，就是在标签中添加　　

　　学过HTML页面中head标签有啥用？——零基础自学网页制作的小伙伴应该知道，CSS脚本是可以添加在head元素中的。

　　其中，a:hover中的a指的是所有标签。

　　hover指的是：当鼠标悬停在a上面时的状态。

　　使用：连接。

　　这个状态下要执行的内容在{}中。

　　background-color:#ffff00;即背景色为黄色。

　　3.隐藏滚动条方法

　　首先，我们要明确一点，就是，滚动条是在内容长度超过视窗高度时产生的。

　　如果要取消视窗最右侧滚动条，就要控制内容高度。

　　把

和全部装进中，控制该div的高度可以实现。　　在

标签色上面添加

。

　　下面，为div规定尺寸，添加style="width:610px; height:530px;"。

　　这样，就不会超出视窗。但是代码写完后发现并不是，如图：

　　多出的文字内容超出div范围，右侧滚动条依然存在。

　　这就要在div的style中再增加一条语句"overflow-y:scroll;"

　　这句话的意思是“overflow-y”（超出最大高度）就显示滚动条（scroll）。而不是让内容超出div的边框。