页面制作技术详解

视频在文章的最下面

1 .如何在中间显示页面内容

此代码div style='width:50%； margin :自动；' 放在body标签下。

/div放在/body上。

通过将所有内容包含在该div中，可以将其放置在整个页面的中央。

内容的显示宽度是浏览器窗口宽度的50%。

“margin外侧距离”是CSS布局中常用的特性，用于指定距div元素周围的距离。使用“自动”值可以进行居中对齐。

2 .导航栏的悬停方法

将4个a标签放入1个div中。

div style='位置：固定；顶级：0 px；' ' margin :0 px 30px0px 10px；' 中添加了href='#chapter1'试飞过程/a以上。

/div为astyle='margin:0px30px0px；' 中添加的href='#chapter4'综合评价/a以下。

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

缺省情况下，该div距离窗口顶部约10px，因此添加top:0px以与窗口顶部对齐。

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

这就介绍一下css的写法。

简单地说，就是添加到头/头标签中

斯泰尔斯

a :悬停机

{

背景色： # FFFF 00；

}

/样式

你学过HTML网页的head标签吗？ ——零度基点自学网页制作的合作伙伴应该知道CSS脚本可以添加到head元素中。

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

hover是指鼠标放在a上时的状态。

使用：连接。

在该状态下执行的内容在{}中。

背景色： # FFFF 00；也就是说，背景颜色是黄色。

3 .滚动条的隐藏方法

首先，滚动条明确了内容长度超过窗口高度时生成的内容。

要取消窗口最右侧的滚动条，请控制内容的高度。

将p/p和img/map/map全部放入div/div中，通过控制其div的高度可以实现。

在p标签颜色上添加div。

在/map标签下添加/div。

接着，在div规定尺寸中设定style='width:610px； height:530px；' 。

那样的话，就不会超出窗户了。但是，写代码后，就没有下面这样了。

多余的文本超出了div的范围，右侧的滚动条仍然存在。

这是div的style中的另一个句子' overflow-y:scroll；' 添加

意思是“overflow-y”(超过最大高度时会显示滚动条(scroll )。而不是将内容超出div的框架。

div样式=' width :610 px； height:530px；溢流- y :滚动；'

图：

由于照片宽度的问题，下面的x轴的scroll也出现了。我们不想看那个。影响美观。

添加“overflow-x:hidden”即可。隐藏。

div样式=' width :610 px； height:530px；溢流- y :滚动； overflow-x :隐藏；'

图：隐藏后，不能滚动或拖动屏幕。

s://p3.toutiaoimg.com/origin/pgc-image/d621c8ae40194ca2b82a14a0d3c7c651?from=pc">

最后，我们要把右侧的scroll也隐藏掉，因为点击鼠标，滚动滚轮就够了，滚动条实在碍眼。

从前面的例子可知，hidden是不行的，有没有别的办法？

那就是在盖div的外部再添加一个div，让这个div的宽度略小于里面div的宽度，小到刚刚挡住滚动条既可以。如图：

这个div这样写即可

</div>

同时还要给里面的div添加margin来让它们对齐

</div>

完整代码：用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作

4.图片区域链接

详见

HTML中的图片区域链接方法详解——零基础自学网页制作

HTML图片区域链接注意事项与Gimp基本用法——零基础自学网页制作

具体过程请参照演示视频：

视频加载中...

HTML部分结语

几经周转，我还是坚持将HTML部分的内容写完了。

经过这段时间的实践，我确定的原则是：

第一，事无巨细，有用的话，就要用大白话解释清楚。

第二，不嫌琐碎，尽量把内容堆齐。堆到全看完后能够看懂常见页面代码、具有一定的开发能力。

第三，使用多媒体手段把操作过程演示清楚，什么时候忘了，打开就能看。

第四，控制篇幅，做碎片化学习。

无论怎样，写作本身是一件非常有趣的事，通过互联网还能分享出来也是件快乐的事。

HTML部分结束了。

下一步该筹备CSS部分了。

谢谢大家的支持与陪伴！也感谢自媒体平台免费提供的服务。

内容如有疏漏或错误，欢迎斧正！感激不尽。

使用碎片时间，学习完整知识！关注大鱼yydhm，一起精研技艺。

html简单网页代码成品(如何用html制作网页)

页面制作技术详解

HTML部分结语

目录