外链论坛

 找回密码
 立即注册
搜索
查看: 91|回复: 4

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

[复制链接]

3129

主题

2万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968654
发表于 2024-6-29 10:56:12 | 显示全部楼层 |阅读模式

页面制作技术详解

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的高度能够实现。

在<p>标签色上面添加<div>。

在</map>标签下面添加</div>。

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

这般,就不会超出视窗。然则代码写完后发掘并不是,如图:

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

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

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

<div style="width:610px; height:530px; overflow-y:scroll;" >

如图:

由于照片宽度的问题,下方的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;" >

<!--省略了p img map 请自动脑补或参考源码-->

</div>

</div>

完整代码:用HTML制作一个简单页面(代码阅读练习)——零基本自学网页制作

4.照片区域链接

详见

HTML中的照片区域链接办法详解——零基本自学网页制作

HTML照片区域链接重视事项与Gimp基本用法——零基本自学网页制作

详细过程请参照演示视频:





上一篇:HTML实用的网页代码大全
下一篇:制作一个简单HTML静态网页(HTML+CSS)
回复

使用道具 举报

3

主题

556

回帖

2

积分

新手上路

Rank: 1

积分
2
发表于 2024-8-30 22:53:45 | 显示全部楼层
外贸网站建设方法 http://www.fok120.com/
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-9 08:52:02 | 显示全部楼层
“板凳”(第三个回帖的人)‌
回复

使用道具 举报

3039

主题

2万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065878
发表于 2024-9-30 16:53:25 | 显示全部楼层
你的见解独到,让我受益匪浅,非常感谢。
回复

使用道具 举报

2983

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109240
发表于 2024-10-21 07:58:50 | 显示全部楼层
我完全同意你的看法,期待我们能深入探讨这个问题。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-15 00:15 , Processed in 0.106919 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.