整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
演示视频在文章底部
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
{
background-color:#ffff00;
}
</style>
学过HTML页面中head标签有啥用？——零基础自学网页制作的小伙伴应该知道，CSS脚本是可以添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>标签。
hover指的是：当鼠标悬停在a上面时的状态。
使用：连接。
这个状态下要执行的内容在{}中。
background-color:#ffff00;即背景色为黄色。
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 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制作一个简单页面（代码阅读练习）——零基础自学网页制作
高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~
哎呀呀~实在是抱歉备注标签我记错了QAQ
<!--内容打这里-->这个才是备注标签不是//
首先我们先来学习上节课留下的剧透，分别是:
有人就说了标题标签上次剧透不就只有h1标签吗?
嘿嘿，其实他还有兄弟姐妹啦~
看图，代码是从上往下从左往右执行的请记住这个顺序哦~
还有,左边是代码右边是网页上面的效果哦~
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!--标题标签是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如图所示，h1标签是最大的，h6标签是最小的
是不是很简单呀,现在已经学会了一个知识点了哦~
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千万要记住内容是写在标签里面的哦~-->
<!--段落标签是独占一条的哦-->
<p>第一条p标签</p>
<p>第二条p标签</p>
<p>第三条p标签</p>
</body>
</html>
链接标签是什么?顾名思义就是一个链接看代码：
<a href="https://www.baidu.com">百度</a>
href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接
属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦
当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com
当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页
是不是很有趣~
看视频:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳转到山的网页</a><!--只有同一个项目下面的网页才能相互跳转-->
</body>
</html>
图像标签标签如其意，就是用来上传图像的一个标签~~
我们这里介绍一下img的两个属性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。
alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字
看视频:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容
怎么拖图片到img文件下，老师~~~我不知道
看视频
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖进来就ok了是不是很简单~
okk，好快啊怎么一下就学完了今天的知识点~~~
嘻嘻今天可是有作业的~
请根据下面的网页仿写一下:
完成后作业发再评论区哦，有什么不懂的可以留言包回答的。
加油呀，每天学一点争取做出属于自己的一个网页~
上一期
端工作都是从创建一个网页文件开始的，一个最小的网页文件应该总是包含一些东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>标题</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="images/favicon.png" />
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>其中，head 主要包含，提供有关页面的元信息标签 <meta>，比如 针对搜索引擎 ，关键词和描述及编码类型等，网页标题，css样式文件。
一般建议，script 标签写在body 结束之前。
是不是很简单，这是一个网页的基本框架，要想制作一个内容丰富，漂亮的网页，还需要学习很多知识。
https://www.w3school.com.cn/tags/tag_meta.asp
https://www.haorooms.com/post/html_meta_ds
到此，你基本已经了解了如何制作一个网页，建议能够亲手练习下，这样加深理解。
接下来，我会大概讲下，网页如何布局并填充内容，感谢您的关注。
*请认真填写需求信息，我们会在24小时内与您取得联系。
