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;
}

Last modification:October 27th, 2020 at 07:50 pm