HTML完结篇）制作一个简单页面(详解)——零基本自学网页制作-外链论坛

m5k1umn 发表于 2024-6-29 10:56:12

HTML完结篇）制作一个简单页面(详解)——零基本自学网页制作

页面制作技术详解
1.页面内容居中表示办法
将这段代码<div style="width:50%;margin:auto;">安置在<body>标签之下。
将</div>安置在</body>之上。
将所有内容包裹在这个div中，就能够实现全部页面居中。
内容表示宽度为浏览器视窗宽度的50%。
margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。运用“auto”值，能够实现居中。
2.导航栏悬停顶端办法
把四个a标签装到一个div中。
将<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>之上。
将</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评估</a>之下。
position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。
默认下，该div距离视窗顶端有10px上下的距离，因此呢为了让它与视窗顶部对齐，添加top：0px。
3.鼠标滑过导航标题或链接时改变背景色提示
这就要介绍关于css的写法了。
简单来讲，便是在<head></head>标签中添加
<style>
a:hover
{
bac公斤round-color:#ffff00;
}
</style>
学过HTML页面中head标签有啥用？——零基本自学网页制作的小伙伴应该晓得，CSS脚本是能够添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>标签。
hover指的是：当鼠标悬停在a上面时的状态。
运用：连接。
这个状态下要执行的内容在{}中。
bac公斤round-color:#ffff00;即背景色为黄色。
4.隐匿滚动条办法
首要，咱们要知道一点，便是，滚动条是在内容长度超过视窗高度时产生的。
倘若要取消视窗最右侧滚动条，就要掌控内容高度。
把和所有装进中，掌控该div的高度能够实现。
在标签色上面添加<div>。
在</map>标签下面添加</div>。
下面，为div规定尺寸，添加style="width:610px; height:530px;"。
这般，就不会超出视窗。然则代码写完后发掘并不是，如图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-c88edb1a0b15924eabe691cc69fb1cb3_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
多出的文字内容超出div范围，右侧滚动条依然存在。

这就要在div的style中再增多一条语句"overflow-y:scroll;"
这句话的意思是“overflow-y”（超出最大高度）就表示滚动条（scroll）。而不是让内容超出div的边框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-6cc044266ef80e07bb2fc9af4cc25532_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
由于照片宽度的问题，下方的x轴的scroll亦显现了，咱们不想看到它，影响美观。

添加“overflow-x：hidden”就可，hidden（隐匿）。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如图：hidden之后，将没法滚动或拖动画面。
最后，咱们要把右侧的scroll亦隐匿掉，由于点击鼠标，滚动滚轮就够了，滚动条实在碍眼。
从前面的例子可知，hidden是不行的，有无别的办法？
那便是在盖div的外边再添加一个div，让这个div的宽度略少于里面div的宽度，小到刚才挡住滚动条既能够。如图：
这个div这般写就可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同期还要给里面的div添加margin来让它们对齐
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >

</div>
</div>
完整代码：用HTML制作一个简单页面（代码阅读练习）——零基本自学网页制作
4.照片区域链接
详见
HTML中的照片区域链接办法详解——零基本自学网页制作
HTML照片区域链接重视事项与Gimp基本用法——零基本自学网页制作
详细过程请参照演示视频：

jszmdq158 发表于 2024-8-30 22:53:45

外贸网站建设方法 http://www.fok120.com/

听听海 发表于 2024-9-9 08:52:02

“板凳”（第三个回帖的人）‌

b1gc8v 发表于 2024-9-30 16:53:25

你的见解独到，让我受益匪浅，非常感谢。

7wu1wm0 发表于 2024-10-21 07:58:50

我完全同意你的看法，期待我们能深入探讨这个问题。

页: [1]

外链论坛's Archiver

HTML完结篇）制作一个简单页面(详解)——零基本自学网页制作