使用CSS的提示框
基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html/CSS的应用(4)</title>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #fff;
color:black;
text-align: center;
border-radius: 5px;
padding: 0px 0;
/* 定位 */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">菜单
<span class="tooltiptext">←菜单栏</span>
</div>
</body>
</html>
网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo
菜单导航区域 菜单导航条包含了一些链接，可以引导用户浏览其他页面
内容区域 内容区域一般有三种形式:
1 列：一般用于移动端 2 列：一般用于平板设备 3 列：一般用于 PC 桌面设备 底部区域 底部区域在网页的最下方，一般包含版权信息和联系方式等
响应式网页布局 通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整
--Html/CSS的应用学习成品代码-- 以下代码为ITX（2年前）的个人网页，内容自己更改哦o(￣▽￣)o
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Interstellar-X</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
h1
{
text-shadow: 10px 10px 10px rgb(0,0,0);
}
/* 头部标题 */
.header {
padding: 30px;
text-align: center;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#e66465, #9198e5);
}
.header h1 {
font-size: 50px;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.card2{
background-image: linear-gradient(to left, rgba(0,225,225,0), rgb(0,225,255,1));
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
a{
text-decoration:none
}
</style>
<script src="js.js">
</script>
</head>
<body>
<div class="header">
<h1>ITX Personal website</h1>
<marquee direction="left">Welcome to ITX Personal website!</marquee>
</div>
<div class="topnav">
<a href="Me.html">首页</a>
<a onclick="g()">文章点赞查看</a>
<a onclick="helpc()" style="float:right">Help</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div><h2>IT行业未来趋势总结</h2><button style="font-size:15px"><i class="fa fa-bell" onclick="article++;alert('点赞成功');"></i></button></div>
<h5>2022 年 5 月 14日</h5>
<div class="fakeimg" style="height:200px;"><img src="IT.webp"height="180px" width="270px"></div>
<p>一、IT行业概况</p>
<p>当今世界，信息技术日新月异，正在有力地推动着社会生产力的发展。一是微电子技术的高速发展，导致芯片的运算能力及性能价格比继续按几何级数的定律增长，从而为大规模、多领域的数字化信息的加工处理、传递交流创造了条件；二是软件技术的高速发展，使芯片和计算机硬件具有了智能，从而成倍地扩大了计算机技术的功能和应用范围；三是在微电子、软件和激光三大技术的推动下，通信技术加快了从模拟向数字、从低速向高速、从单一语言媒体向多媒体的转变；四是计算机、通信与媒体技术的相互渗透与融合，正在将通信与信息技术的发展推向一个崭新的阶段。</p>
<p>以ip技术为特征的新一代公用信息网将在不断演进中迅速发展，成为下一代信息服务网的统一平台。基于该网络上的电子商务、远程教育、远程诊疗、电子政府、移动办公和家庭办公等计算机互联网的新应用不断涌现并得到大力发展。信息技术日益广泛地深入社会生产、生活的各个领域将使it产业在数字化革命大潮中，以更高的速度向前发展。</p>
</div>
<div class="card">
<div><h2>2022年C++编程技术行业趋势</h2><button style="font-size:15px"><i class="fa fa-bell"onclick="article++;alert('点赞成功');"></i></button></div>
<h5>2022 年 5 月 14日</h5>
<div class="fakeimg" style="height:200px;">图片</div>
<p>随着软件行业不断发展，各种编程语言百花齐放，ios、android、java等都是移动互联网时代比较流行的语言，从业者越来越多，但目前市场占有率最高的还是传统的C/C++，很多人跃跃欲试，但又对此了解不多，难免会迟疑，不知道现在学C++还能拿到年薪10万吗?就业怎么样?</p>
<b>值得一提的是，C++仍然广泛受到关注。</b>
<p>发展趋势</p>
<p>需要看到的是两个趋势，一个趋势是C++变得更加复杂，通过模板等有潜力的语法因素构造越来越精巧的库成为了现代C++的热点，虽然在利用库实现新的编程范式，乃至设计模式等方面很有开创意义，也确实产生了一些能够便捷开发的工具，但是更多的是把C++变得更加强大，更加复杂难懂，不得不说它正在向边缘化道路发展。</p>
</div>
</div>
<div class="rightcolumn">
<div class="card2">
<h2>关于Interstellar-X</h2>
<div class="fakeimg" style="height:100px;">创立于2020-9</div>
</div>
<div class="card">
<h3>热门文章</h3>
<div class="fakeimg"><p>IT行业未来趋势总结</p></div>
<div class="fakeimg"><p>2022年C++编程技术行业趋势</p></div>
</div>
<div class="card">
<h3>关注我</h3>
<a href="https://blog.csdn.net/InterspaceITX">CSDN:InterspaceITX</a>
</div>
</div>
</div>
<div class="footer">
<center><div>e-mail:daviduu@126.com</div></center>
<center><div>版权所有:ITX</div></center>
</div>
</body>
</html>
