×

页面效果展示视频加载中…

手机轻松自学:如何自制精美网页教程

页面完整代码

<!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>

页面制作技术解析

  1. 页面内容居中显示方法
  2. 导航栏悬停顶端方法
  3. 鼠标滑过导航标题或链接时改变背景色提示
  4. 隐藏滚动条方法
  5. 图片区域链接

通过阅读上述代码,我们可以分析每段代码的作用以及它们之间的前后关系。这一步骤对于培养我们的代码阅读能力非常有帮助。我们下次将逐步演示“页面制作技术解析”中的五个步骤和注意事项。

在碎片时间里学习完整知识,关注大鱼师兄,一起精研技艺。

目录

  • 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制作一个简单页面(详解)
  • (完结篇)

作者

xiaoxiaoxiyue@qq.com

相关文章

(1)域名:门户网站的“门牌号” (2)服务...

读出全部

手机网站建设价格这个问题,一直以来都是很多想...

读出全部

简单来说,打造专业官网的步骤就是构建一个能够...

读出全部

很多没有接触过网页制作的朋友都非常好奇,如何...

读出全部

我们首先从网站的整体布局开始考虑牙科医院网站...

读出全部

很多从来没有尝试过手机制作网站的新手用户都好...

读出全部