在
页面效果展示视频加载中…
手机轻松自学:如何自制精美网页教程
页面完整代码
<!DOCTYPE HTML>
<html>
<head>
<title>教程制作方法</title>
<style>
a:hover{color: blue;}
</style>
</head>
<body>
<div style="width: 50%; margin: auto;">
<!-- 使页面居中显示,并展视窗50%宽度 -->
<div style="position: fixed; top: 0px;">
<!-- 使导航菜单悬停在顶端 -->
<a href="#part1" style="margin: 5px;">入门基础</a>
<a href="#part2" style="margin: 5px;">元素使用方法</a>
<a href="#part3" style="margin: 5px;">样式与布局</a>
<a href="#part4" style="margin: 5px;">进阶技巧</a>
</div>
<div style="margin: auto;">
<!-- 小div套大div隐藏滚动条 -->
<div style="margin: 10px; width: 80%;">
<!-- 小div --></div>
<h2><a href="#part1">入门基础</a></h2>
<p>网页制作的基础知识,如HTML和CSS的基础语法、标签的使用等。</p>
<h2><a href="#part2">元素使用方法</a></h2>
<p>详解各类HTML元素的使用方法,如段落、列表、表格、表单等。</p>
<h2><a href="#part3">样式与布局</a></h2>
<p>学习如何使用CSS进行页面布局和美化,包括字体、颜色、背景等属性的应用。</p>
<h2><a href="#part4">进阶技巧</a></h2>
<p>介绍一些高级网页制作技巧,如动画效果、响应式布局等。</p>
<img src="img/image1.jpg" border="" />
<map name="map" id="map">
<area shape="poly" coords="14,6,186,175,46,6,4,98,6,,96,8,478,1,516,46,496,4,,158,48,14,6,19,,18" href="https://www.zhihu.com/question/8464168" title="HTML基础知识解析" />
</map>
</div>
<div style="position: fixed; bottom: 0px;">
<!-- 使导航菜单悬停在底部 -->
<a href="#part1" style="margin: 5px;">入门基础</a>
<a href="#part2" style="margin: 5px;">元素使用方法</a>
<a href="#part3" style="margin: 5px;">样式与布局</a>
<a href="#part4" style="margin: 5px;">进阶技巧</a>
</div>
<div style="position: absolute; right: 0;">
<!-- 小div套大div隐藏滚动条(结尾) -->
<div style="right: 10px;">
<!-- 小div(结尾) --></div>
</div>
<div style="margin: auto;">
<!-- 使页面居中显示,并展视窗5%宽度(结尾) -->
</div>
</body>
</html>
页面制作技术解析
- 页面内容居中显示方法。
- 导航栏悬停顶端方法。
- 鼠标滑过导航标题或链接时改变背景色提示。
- 隐藏滚动条方法。
- 图片区域链接。
通过阅读上述代码,我们可以分析每段代码的作用以及它们之间的前后关系。这一步骤对于培养我们的代码阅读能力非常有帮助。我们下次将逐步演示“页面制作技术解析”中的五个步骤和注意事项。
在碎片时间里学习完整知识,关注大鱼师兄,一起精研技艺。
目录
- HTML序章(学习目的、对象、基本概念)
- 零基础自学网页制作HTML是什么?
- 零基础自学网页制作第一个HTML页面如何写?
- 零基础自学网页制作HTML页面中head标签有什么用?
- 零基础自学网页制作初识meta标签与SEO
- HTML中的元素使用方法1
- HTML中的元素使用方法
- HTML元素中的属性1
- HTML元素中的属性(路径详解)
- 使用HTML添加表格1(基本元素)
- 使用HTML添加表格(表格头部与脚部)
- 使用HTML添加表格(间距与颜色)
- 使用HTML添加表格4(行颜色与表格嵌套)
- 16进制颜色表示与RGB色彩模型
- HTML中的块级元素与内联元素
- 初识HTML中的
块元素
- 在HTML页面中嵌入其他页面的方法
- 封闭在家学网页制作!
- 为页面嵌入PDF文件
- HTML表单元素初识1
- HTML表单元素初识
- HTML表单(下拉列表、多行文字输入)
- HTML表单4(form的action、method属性)
- HTML列表制作讲解
- 为HTML页面添加视频、音频的方法
- 音视频格式转换神器与html视频元素加字幕
- HTML中使用标签实现文本内链接
- HTML中的图片区域链接方法详解
- HTML图片区域链接注意事项与Gimp基本用法
- 使用HTML制作一个简单页面(详解)
- (完结篇)