HTML介绍
1）HTML 是用来描述网页的一种语言。
2）HTML 指的是超文本标记语言: HyperText Markup Language
3）HTML 不是一种编程语言，而是一种标记语言
4）标记语言是一套标记标签 (markup tag)
5）HTML 使用标记标签来描述网页
6）HTML 文档包含了HTML 标签及文本内容
7）HTML文档也叫做 web 页面
CSS介绍
1）CSS 指层叠样式表 (Cascading Style Sheets)
2）样式定义如何显示 HTML 元素
3）样式通常存储在样式表中
4）把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5）外部样式表可以极大提高工作效率
6）外部样式表通常存储在 CSS 文件中
7）多个样式定义可层叠为一个
知识点
1）使用浏览器请求网站首页的时候，浏览器会去后台服务器上下载首页的HTML文档
2）HTML文档里面可以通过link标签引入外部的CSS文件，CSS文件的访问路径可以通过href属性设置
3）浏览器根据这些CSS文件的路径到指定的服务器上进行下载
4）浏览器根据CSS文件里面的代码对网页内容的样式进行处理
image.png
思路
1）使用HTML设计网页的内容
2）使用CSS处理网页内容的样式
3）使用CSS的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的时侯，显示对应的二级菜单
image.png
遇到的问题
问题1：
image.png
解决办法：设置顶层的行高为65个像素
#top{
background-color: lightblue;
height: 65px;
}
问题2：
image.png
解决办法：中间层向左浮动
#middle{
float: left;
border: 2px solid blue;
background-color: plum;
z-index: -1;
}
问题3
image.png
解决办法：设置无序列表的左内边距为0个像素
ul{
list-style-type: none; /*不显示列表项的项目符号*/
padding-left: 0px;
}
完整代码
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
<!--顶层-->
<div id="top">
<ul>
<li class="first"><a href="#">主站</a></li>
<div class="first">
<li><a href="#">直播</a></li>
<ul>
<li><a href="#">哔哩哔哩...</a></li>
<li><a href="#">小米粥好...</a></li>
<li><a href="#">渡渡鸟渡渡</a></li>
<li><a href="#">痒局长</a></li>
<li><a href="#">波喵喵喵</a></li>
</ul>
</div>
<li class="first"><a href="#">游戏中心</a></li>
</ul>
</div>
<!--中间层-->
<div id="middle">
<p>
6月18日，记者从商务部网站获悉，上周（6月10日至16日）全国食用农产品市场价格比前一周下降0.6%。
其中，30种蔬菜平均批发比前一周下降4%，呈加速回落趋势。
6月18日，记者从商务部网站获悉，上周（6月10日至16日）全国食用农产品市场价格比前一周下降0.6%。
其中，30种蔬菜平均批发比前一周下降4%，呈加速回落趋势。
</p>
</div>
<!--底层-->
<div id="foot"></div>
</body>
</html>
CSS代码
ul{
list-style-type: none; /*不显示列表项的项目符号*/
padding-left: 0px;
}
#top{
background-color: lightblue;
height: 65px;
}
/*设置一级菜单项的样式*/
.first{
display: inline-block; /*变成行里面的块元素*/
border: 2px solid red;
width: 32%;
line-height: 60px;
text-align: center;
}
/*设置二级菜单项的行高*/
ul ul li{
line-height: 30px;
text-align: left;
}
/*鼠标在二级菜单上面的时候，对应的样式*/
ul ul li:hover{
background-color: yellow;
}
/*设置子菜单列表的样式*/
ul ul{
display: none; /*显示方式为隐藏*/
float: left; /*向左浮动*/
background-color: lightpink;
width: 100%;
z-index: 999; /*设置叠放的顺序*/
text-indent: 2em; /*缩进2个字符*/
}
/*当鼠标在一级菜单的上面时，显示子菜单列表*/
div.first:hover ul{
display: block;
}
/*当鼠标在一级菜单的上面时，对应的背景样式*/
div.first:hover,li.first:hover{
background-color: steelblue;
}
#middle{
float: left;
border: 2px solid blue;
background-color: plum;
z-index: -1;
}
a{
text-decoration: none;
}
参考资料
[01] HTML和CSS介绍
https://blog.csdn.net/weixin_43617255/article/details/85330673
[02] CSS3 二级导航菜单的制作的示例
https://www.jb51.net/css/606302.html
[03] 纯CSS实现二级导航下拉菜单
https://blog.csdn.net/zhaiyq/article/details/81479613
[04] 块级元素和行内元素
https://www.cnblogs.com/stfei/p/9084915.html
[05] HTML行级元素和块级元素区别和转化（display属性）
https://blog.csdn.net/qingyisuo/article/details/78959942
微信扫一扫关注该公众号【测试开发者部落】
image.png
点击链接加入群聊【软件测试学习交流群】
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105
网友评论