【趣味案例】营销号段子生成器

HTML CSS JavaScript

字数统计: 338阅读时长: 1 min

 2020/04/21   Share

今天为了复习HTML和CSS跟着一些前辈做了一些综合小案例，晚上突发奇想自己做了一个综合HTML，CSS和JavaScript的知识，生成营销号段子的小案例。

源码

源码地址

预览

预览效果图

整体思路

案例难度不大，代码思路也非常简洁，设置几个input接受源数据，然后对字符串进行拼接后赋给预设好的div。

重难点

placeholder属性的修改

placeholder 属性字体颜色和字体大小的修改，这是css3的新增属性，修改方法之前没有学过，比较麻烦，以下以input为例

input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #95a5a6;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #95a5a6;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #95a5a6;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #95a5a6;
}

button和input等标签选中后取消蓝色外边框

这个之前有学过，因为时间太长有点记不清了，实现方法为 outline: none;

CSS实现选中改变属性的伪类选择器：active

在css中实现选中后的css属性变化，使用的是active伪类选择器

实现渐变背景

background-image: linear-gradient(to bottom right, #82ccdd, #0a3d62);

以上代码的意思是从左上向右下实现从#82ccdd到#0a3d62的渐变，第一个参数也可以设置角度

Author：oCodeHoney

Date：2020-4-21

Next Post

【BLOG】自定义hexo博客分类和标签
Previous Post

【Vue】CLI4路径别名设置方法

CATALOG

1. 源码
2. 预览
3. 整体思路
4. 重难点

