Utools 十分方便的快捷工具集 快捷键alt+空格 插件安装界面 顺便一提，它的插件是用html+css+javascript写的，也就是说学完网页和小程序后甚至可以尝试着自己写插件
.
Utools
十分方便的快捷工具集
快捷键alt+空格
插件安装界面
顺便一提，它的插件是用html+css+javascript写的，也就是说学完网页和小程序后甚至可以尝试着自己写插件
groupy
给窗口分组
像这样给任意窗口分组，当打开窗口很多的时候不用再一个一个切换，直接点击标签就可以了
steam上有正版 ¥22，破解版可以自己去找
Eartrumpet
可以给软件单独设置音量
微软商店里面有
下面制作列表部分，因为都是重复性的，所以做一个，后面的都是套用
添加这部分代码
<div class="div_content_img">
<div class="div_opacity"></div>
<div class="div_post_item" >
</div>
</div>
然后在css里面写样式
首先准备一张文章的背景图
像前面一样，将其设为背景图
.div_content_img{
background-image: url(../img/post.png);
width: 50%;
height: 300px;
background-size: cover;
}这样这个div的宽度为浏览器一般宽度，高度为300px
下面我们使其居中
然后我们给图片加上一层暗淡的特效
.div_opacity {
width: 100%;
height: 100%;
background: #000000;
opacity: 0.4; /* 透明度 0到1的小数 */
}
然后我们写文章封面内的文字介绍
<div class="div_content_img">
<div class="div_opacity"></div>
<div class="div_post_item" >
<a class="post_title">LPL夺冠</a>
<p class="post_text">2020-10-31</p>
<p class="post_tag">lol 赛事</p>
</div>
</div>
可以看到文字都在图片下面 ，我们要让它们在封面上
添加下面几句
简单美化一下
但是文字之间显得十分紧凑，我们让它们之间有一些距离，方便阅读
然后这个<a></a> 标签是干啥的
通过<a></a>标签我们可以跳转到别的界面 也就是超链接
用过远古IE浏览器的同学应该有体会 有下划线的蓝色文字 点击后变成紫色
那么如何跳转链接
href后面写跳转的网址 target=“_blank”表示在新界面打开
<a class="post_title" href="https://bilibili.com" target="_blank">LPL夺冠</a>修改超链接的样式
/* 默认状态的超链接 */
.post_title:link {
text-decoration: none;
color: white;
}
/* 访问过的超链接 */
.post_title:visited {
color: white;
}
/* 鼠标悬浮在上面时的超链接 */
.post_title:hover {
color: #1ABC9C;
}这样鼠标悬浮在超链接上会改变颜色
既然是文章列表肯定不能只有一篇文章，我们直接在下面多复制几个
<div class="div_content_img">
<div class="div_opacity"></div>
<div class="div_post_item" >
<a class="post_title" href="https://bilibili.com" target="_blank">LPL夺冠</a>
<p class="post_text">2020-10-31</p>
<p class="post_tag">lol 赛事</p>
</div>
</div>这样就会出现三个一模一样的内容
他们之间是没有间距的，我们再为其增加间距
然后背景颜色纯白色 有些突兀
假如我们文章比较多，我们可以增加一个“下一页”的按钮
<div class="div_next">
<div class="div_button">
<a class="next" href="#" target="_blank">下一页</a>
</div>
</div>
然后在css里为其增加样式
.div_next{
margin: auto; /* 使其居中 */
margin-top: 50px;
width: 50%;
height: 40px;
}
改变超链接的样式
.next:link{
text-decoration: none; /* 下划线 */
font-size: 15px; /* 文字大小 */
color: white; /* 文字颜色 */
}
.next:visited{
color: white;
}
.next:hover{
color: #1ABC9C;
}
然后给“下一页”增加一个按钮的效果
.div_button{
float: right;
width: 120px;
height: 40px;
background: #ff0004;
}
但是现在很难看，我们尝试把它变成圆角矩形
.div_button{
float: right;
width: 120px;
height: 40px;
background: #ff0004;
border-radius: 40px 40px 40px 40px; /* 四个边框角的圆角半径*/
border-style: solid; /* 边框的样式 */
border-width: 1px; /* 边框宽度 */
border-color: white; /* 边框颜色 */
}
最后再改一下按钮的颜色
background: #2c2a2a;
然后 做了一个网页当然要有署名了
接着在下面写
然后修改样式
.div_footer {
margin: auto;
margin-top: 50px;
height: 30px;
width: 50%;
}
.text_footer {
font-size: 10px;
color: #CCCCCC;
}
ok，这样我们的一个最简单的网页就制作好了，下节课教大家如何把它放到服务器上，让别人通过浏览器访问
本文分享自微信公众号 - 两耳的速食汤包（gh_84c0fe6a460d）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
