整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

css3制作图形大全：简单几句代码画出漂亮的图形，一起来看看吧~

年暑假实习了四个月的前端，接触了很多前端相关的东西，觉得前端真的比后端有趣多了啊，又好玩又有趣，相比后端千篇一律的代码，前端的千变万化一瞬间俘获了我的心~~~~~

下面列举一些基础的前端图形制作代码，希望对大家有用哟。

为了让大家能轻松愉快地跟着我的代码动手测试，更为了让一点计算机基础都没有的小伙伴也能跟着我下面的代码来自己动手玩耍，我先简单给出一个基础的HTML，大家可以像我这样新建一个HTML文件，然后复制下面的代码到文件中：(不知道怎么用记事本建html的小伙伴可以去看我的另外一篇文章：使用 Notepad 或 TextEdit 来编写 HTML。)

一，正方形

<html>
<body>
<h1>有趣的前端图形</h1>
<div id="square">
</div>
<style>
 #square {
 width: 100px;
 height: 100px;
 background: red;
 }
</style>
</body>
</html>

好了，现在点击使用浏览器打开上面的文件，是不是看到了下面的图像呢：

如果你已经看到了上面的图像，那么恭喜你，你可以继续往下看下去了，下面有更多有趣的图形等着你哦。

二、圆形

将下面的代码放到<style></style>中，并把<div>中的id改为circle

#circle {
 width: 100px;
 height: 100px;
 background: red;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

你就得到了一个可爱的圆：

当然颜色啥的，可以随便改啊~

三、椭圆

#oval {
 width: 200px;
 height: 100px;
 background: red;
 -moz-border-radius: 100px / 50px;
 -webkit-border-radius: 100px / 50px;
 border-radius: 100px / 50px;
}

结果如下：

四、三角形

正三角：

#triangle-up {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
}

倒三角：

#triangle-down {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
}

五、五角星

#star-five {
 margin: 50px 0;
 position: relative;
 display: block;
 color: red;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
}
#star-five:before {
 border-bottom: 80px solid red;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -45px;
 left: -65px;
 display: block;
 content: '';
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
 
}
#star-five:after {
 position: absolute;
 display: block;
 color: red;
 top: 3px;
 left: -105px;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -webkit-transform: rotate(-70deg);
 -moz-transform: rotate(-70deg);
 -ms-transform: rotate(-70deg);
 -o-transform: rotate(-70deg);
 content: '';
}

结果：

六、六角星

#star-six {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
 position: relative;
}
#star-six:after {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
 position: absolute;
 content: "";
 top: 30px;
 left: -50px;
}

七、无穷符号

长这样：

#infinity {
 position: relative;
 width: 212px;
 height: 100px;
}
 
#infinity:before,
#infinity:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
 
#infinity:after {
 left: auto;
 right: 0;
 -moz-border-radius: 50px 50px 50px 0;
 border-radius: 50px 50px 50px 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}

八、心形~~

最后来一个爱你的形状吧~~~~

心形~~~

先放最终结果：

代码：

#heart {
 position: relative;
 width: 100px;
 height: 90px;
}
#heart:before,
#heart:after {
 position: absolute;
 content: "";
 left: 50px;
 top: 0;
 width: 50px;
 height: 80px;
 background: red;
 -moz-border-radius: 50px 50px 0 0;
 border-radius: 50px 50px 0 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
#heart:after {
 left: 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 transform-origin :100% 100%;
}

更多好玩的图形，尽在hello程序媛哦~~

当然，上面的代码我也已经整理好啦，需要的童鞋可以私信我领取代码呀。

另外，不懂如何使用电脑自带的记事本编辑html的小伙伴，也可以私信问我哦，我一定知无不答答无不尽~~

言

HTML作为前端三大基础知识点之一，是每一个前端开发人员都要掌握的部分。今天这篇文章我们来看看一些平时不太会注意，却在面试时可能会问到的题目，来看看你都会吗？

HTML

如何使用div模拟实现textarea？

我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。

但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？

首先来看看实现的效果是什么样的。

实现效果

关键属性：contenteditable

正如这个属性的字面意思，可以理解为可编辑的，如果在页面标签上设置contenteditable=true，该标签就可以进行编辑了。

可以配合user-modify属性，该属性表示的是控制用户能否对页面元素进行编辑，通过设置不同的值可以选择富文本或者纯文本内容，但是由于该属性是非标准属性，很少有人知道。

首先我们来看看页面的HTML部分代码，就是一个很简单的div标签，然后设置contenteditable属性为true。

HTML部分代码

接下来我们就看看整个CSS代码的完整实现吧。

CSS样式

通过min-height和max-height属性可以控制div的高度，在内容超出max-height后会出现滚动条。如果想要固定div的高度，则只需要设置height属性就可以，而不用设置min-height和max-height属性。

src和href的区别

src和href从使用上来看都是对外部资源的一种引用，但是在具体理解上是有差异的。

href的值指定的是资源在网络上的位置，定义的是当前页面上的某个元素与需要的资源文件的一个链接。比如下面一个语句。

href引用

当浏览器解析到页面的这条语句时，会知道在这里引用了一个外部样式文件，但并不会阻止页面解析。这与@import有很大不同，因此在引入外部样式时，推荐使用link标签。

src的值表示的是页面上必不可少的内容，需要将指定内容加载到当前页面中。比如下面一个语句。

src引用

当浏览器解析到页面上的这条语句时，浏览器会对这个文件进行解析，编译和执行，从而导致整个页面加载会被暂停，这也是为什么一般会选择将script标签放在body结束标签的前面。

有一种更好的理解方式，href表示的是一个资源的链接；src是对当前元素的替换，内容最终会嵌入到当前页面中。

DIV+CSS布局和Table布局对比

虽然目前大多数网页都是采用的DIV+CSS布局的方式，但是也有少数的老式Web网页采用的是Table布局，我们可以一起来看看两种布局方式的优劣。

布局对比

  • div+css布局

  1. div+css的布局方式属于W3C标准，而且由于CSS的存在，HTML部分的代码会显得很纯净，满足行为，样式，结构分离的原则。

  2. 页面加载速度更快，这是目前DIV+CSS使用更广泛的一个非常重要的原因。

  3. 页面编码量相对于Table布局会少很多。

  4. 页面内容更容易维护，由于样式都存在CSS文件中，只需要修改CSS文件即可，对HTML文件不会有影响。

  5. 由于DIV+CSS布局更容易进行SEO优化，所以更方便被搜索引擎收录。

  • Table布局

虽然DIV+CSS有各种各样的优势，但是Table布局也并不是完全无用的。这里也可以列举出几个采用Table布局的优势。

  1. 新手学习方便（相信有很多后端RD在进行前端学习时刚开始都是从table布局开始的）。

  2. 兼容性更好，由于Table布局是从最古老的浏览器发展而来的，在兼容性上会满足所有浏览器。而CSS3的出现却要考虑浏览器的支持程度，一个样式要考虑加上几个不同浏览器前缀，类似于-webkit，-moz等

结束语

今天这篇文章主要讲解了几个关于HTML的知识点，大家都掌握了吗？

shopify中，其实产品的上传是非常简单的，但是不简单的是，我们如何做好一个产品的关键词优化。包括常见的

  • Title 标题
  • Description 描述
  • Keyword 关键词

做好产品的关键词优化，可以为你的shopify店铺带来流量，直至转化！

原文来源顾小北博客：http://www.guxiaobei.com/shopify-product-uploading.html

那么为什么产品页面的标题和描述是如此重要呢？

原因有三点：

第一：搜索引擎优化和排名

搜索到现在为止，依然逃脱不了靠关键词来发现用户想要的内容和信息，所有的信息搜索都是靠关键词来渠道，Google也是，亚马逊也是

所以在标题中植入关键词有利于搜索引擎发现你的网站，爬取你的网站

第二：网站窗口

大家打开页面，鼠标移到网站的窗口（tab）就可以看到页面的标题，如下图：

另外大家平常会打开很多浏览器的窗口（比如说下面的图片）

那么，当你的鼠标移到窗口，就知道这个网站是什么类型的网站，方便用户浏览。

第三：社交分享

比如用户要想把一个具体的产品分享到社交平台上，比如分享到facebook，Twitter，pinterest，tumblr，那么你所使用的title就会当做社交上分享的标题来使用

今天我们来讲讲TDK的撰写和注意点，希望可以帮助到大家

首先我们打开Shopify的产品后台，进入Products选项，如下图：

点击 add product 你就可以上传产品了

在产品编辑中，产品的后台编辑主要可以分为以下几个选项，他们分别是：

  • Add product(Title,Description)—添加产品
  • Images—图片
  • Pricing—价格
  • inventory—库存
  • Shipping—运输地址
  • Weight—重量
  • Variants—变体
  • Search engine listing preview—搜索引擎展示预览

下面我们分别来说说这几个主要的功能

Title & Description

关于Title & Description 这块，shopify官方是这样说的：

标题和描述在SEO中几乎是最重要的元素！

关于标题（Title）：

那么在做标题的撰写方面，你应该要遵循以下几点：

第一：标题必须和你所展示的内容相一致（不然会导致你的网站跳出率极高，用户体验要额不好）

第二：植入关键词在标题中

第三：标题中的关键词越靠前越好

我不是太建议产品页面是这样的写法：

Brand Name | Major Product Category – Minor Product Category – Name of Product

这样的标题用户第一眼看上去，其实和你的很多产品的内页都是差不多的，与此同时，如果Google在搜索引擎中不展示后半部分的话，那么你的这个写法就有巨大的问题。

第四：不要做关键词的堆砌

在标题中做关键词的撰写，千万不要做关键词堆砌，比如，你要推广Bells 这个关键词，如果你写成：

Blue Bells, Yellow Bells, All Types of Bells | Bells Bells and More | Doors.com

显然这样的标题布局是不合理的，因为有太多的关键词堆砌.Google非常的聪明，已经过了那种靠关键词堆砌的时代，而且Google也很清楚的知道你这个标题写的是什么，不需要浪费关键词的空间

那么要怎么写比较好呢？

建议你可以这样写：

Blue & Yellow Bells | Doorbells | Doors.com

所以：

错误的写法：Blue Bells, Yellow Bells, All Types of Bells | Bells Bells and More | Doors.com

正确的写法：Blue & Yellow Bells | Doorbells | Doors.com

第五：在标题的最后可以加入品牌名，一般的展示为 ………………… | Brand name

如果你的品牌名很强的话，一定要利用品牌名的力量。这个会对你的搜索是有帮助的。品牌名的撰写一般是放在标题的后面。

可以像这样来撰写：

[Product Name] – [Product Category] | [Brand Name]

第六：标题要有吸引力

把竞争对手的标题罗列出来，和他们相比，你觉得你自己的标题怎么样？

另外还要记住一点：你的标题不止是给搜索引擎看的，也是给用户看的，所以你应该更多的以用户的口吻去写产品

第七：标题是有字符数限制的

建议标题中的字符控制在70个字符之内，包括空格。超过的字符会被Google展示为……..

如下图：

关于描述（Description）：

我们在撰写描述的时候要注意几点呢？

  1. 为每个页面撰写独一无二的描述
  2. 描述中可包含关键词
  3. 关键词不要堆砌
  4. 描述中更应该包含你产品的特色，吸引力和从要点概括
  5. 可以对描述中的关键词使用，长尾词，变体，同义词
  6. 描述应该具有号召下（call to action）
  7. 注意描述部分是有字符的限制（建议控制在156个字符之内）

关于URL

在shopify中，URL可以选择默认的，也可以选择自定义关键词链接(同样建议URL中的关键词不能堆砌)

那么标题和描述在Google中的展示是上面样子的呢？，如下图：

上面的图片已经很清晰的标出了产品的标题，描述，还有SEO链接。

另外需要特别说明的是：

第一：在description上，并不是你上面写了description，Google就一定会按你的description来展示。绝大多数情况下，google会采用，但不能保证一定100%

因为不同的用户搜索不同的关键词，有时候Google会把该页面上其他的内容作为description，换句话说Google会把他认为最相关的描述展示给用户看，这点请大家注意。

第二：很多做B2C的人，为了图方便，上传产品的时候，图片，标题，描述都是直接从工厂那边拿过来直接抄袭的，这一点，绝对不可行，对你的网站优化和排名并没有任何的帮助

另外这里提供几个工具，用来判断你在写shopify 标题，描述的时候会不会超出字符数，这样的工具有：

Portent：https://www.portent.com/serp-preview-tool

seomofo：http://www.seomofo.com/snippet-optimizer.html

Moz: https://moz.com/learn/seo/title-tag

这些也都是我常用的工具，如果你们也有好用的分析工具，欢迎交流分享。


在线咨询
上一篇：详细说说JavaScript 键盘事件keydown、keypress、keyup
下一篇：方便友好的C#.NET万能工具库

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 玉门市 屏山县 融水苗族自治县 仓山区 东兴区 淮安 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服