css3制作圖形大全：簡單幾句代碼畫出漂亮的圖形，一起來看看吧~

年暑假實習(xí)了四個月的前端，接觸了很多前端相關(guān)的東西，覺得前端真的比后端有趣多了啊，又好玩又有趣，相比后端千篇一律的代碼，前端的千變?nèi)f化一瞬間俘獲了我的心~~~~~

下面列舉一些基礎(chǔ)的前端圖形制作代碼，希望對大家有用喲。

為了讓大家能輕松愉快地跟著我的代碼動手測試，更為了讓一點計算機基礎(chǔ)都沒有的小伙伴也能跟著我下面的代碼來自己動手玩耍，我先簡單給出一個基礎(chǔ)的HTML，大家可以像我這樣新建一個HTML文件，然后復(fù)制下面的代碼到文件中：(不知道怎么用記事本建html的小伙伴可以去看我的另外一篇文章：使用 Notepad 或 TextEdit 來編寫 HTML。)

一，正方形

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

好了，現(xiàn)在點擊使用瀏覽器打開上面的文件，是不是看到了下面的圖像呢：

如果你已經(jīng)看到了上面的圖像，那么恭喜你，你可以繼續(xù)往下看下去了，下面有更多有趣的圖形等著你哦。

二、圓形

將下面的代碼放到<style></style>中，并把<div>中的id改為circle

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

你就得到了一個可愛的圓：

當(dāng)然顏色啥的，可以隨便改啊~

三、橢圓

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

結(jié)果如下：

四、三角形

正三角：

#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: '';
}

結(jié)果：

六、六角星

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

八、心形~~

最后來一個愛你的形狀吧~~~~

心形~~~

先放最終結(jié)果：

代碼：

#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程序媛哦~~

當(dāng)然，上面的代碼我也已經(jīng)整理好啦，需要的童鞋可以私信我領(lǐng)取代碼呀。

另外，不懂如何使用電腦自帶的記事本編輯html的小伙伴，也可以私信問我哦，我一定知無不答答無不盡~~

言

HTML作為前端三大基礎(chǔ)知識點之一，是每一個前端開發(fā)人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會注意，卻在面試時可能會問到的題目，來看看你都會嗎？

HTML

如何使用div模擬實現(xiàn)textarea？

我們都知道textarea是form表單中一個很常見的元素，用于多行文本輸入，可以設(shè)置行數(shù)和列數(shù)。

但是默認的textarea樣式在頁面上看起來是很丑的，很多頁面都是采用div模擬textarea實現(xiàn)。例如QQ空間主頁面的發(fā)表說說，在你看頁面源碼后就會發(fā)現(xiàn)這個輸入框其實是一個div元素，并不是一個textarea元素，現(xiàn)在我們就來看看這是如何實現(xiàn)的吧？

首先來看看實現(xiàn)的效果是什么樣的。

實現(xiàn)效果

關(guān)鍵屬性：contenteditable

正如這個屬性的字面意思，可以理解為可編輯的，如果在頁面標簽上設(shè)置contenteditable=true，該標簽就可以進行編輯了。

可以配合user-modify屬性，該屬性表示的是控制用戶能否對頁面元素進行編輯，通過設(shè)置不同的值可以選擇富文本或者純文本內(nèi)容，但是由于該屬性是非標準屬性，很少有人知道。

首先我們來看看頁面的HTML部分代碼，就是一個很簡單的div標簽，然后設(shè)置contenteditable屬性為true。

HTML部分代碼

接下來我們就看看整個CSS代碼的完整實現(xiàn)吧。

CSS樣式

通過min-height和max-height屬性可以控制div的高度，在內(nèi)容超出max-height后會出現(xiàn)滾動條。如果想要固定div的高度，則只需要設(shè)置height屬性就可以，而不用設(shè)置min-height和max-height屬性。

src和href的區(qū)別

src和href從使用上來看都是對外部資源的一種引用，但是在具體理解上是有差異的。

href的值指定的是資源在網(wǎng)絡(luò)上的位置，定義的是當(dāng)前頁面上的某個元素與需要的資源文件的一個鏈接。比如下面一個語句。

href引用

當(dāng)瀏覽器解析到頁面的這條語句時，會知道在這里引用了一個外部樣式文件，但并不會阻止頁面解析。這與@import有很大不同，因此在引入外部樣式時，推薦使用link標簽。

src的值表示的是頁面上必不可少的內(nèi)容，需要將指定內(nèi)容加載到當(dāng)前頁面中。比如下面一個語句。

src引用

當(dāng)瀏覽器解析到頁面上的這條語句時，瀏覽器會對這個文件進行解析，編譯和執(zhí)行，從而導(dǎo)致整個頁面加載會被暫停，這也是為什么一般會選擇將script標簽放在body結(jié)束標簽的前面。

有一種更好的理解方式，href表示的是一個資源的鏈接；src是對當(dāng)前元素的替換，內(nèi)容最終會嵌入到當(dāng)前頁面中。

DIV+CSS布局和Table布局對比

雖然目前大多數(shù)網(wǎng)頁都是采用的DIV+CSS布局的方式，但是也有少數(shù)的老式Web網(wǎng)頁采用的是Table布局，我們可以一起來看看兩種布局方式的優(yōu)劣。

布局對比

div+css布局

div+css的布局方式屬于W3C標準，而且由于CSS的存在，HTML部分的代碼會顯得很純凈，滿足行為，樣式，結(jié)構(gòu)分離的原則。
頁面加載速度更快，這是目前DIV+CSS使用更廣泛的一個非常重要的原因。
頁面編碼量相對于Table布局會少很多。
頁面內(nèi)容更容易維護，由于樣式都存在CSS文件中，只需要修改CSS文件即可，對HTML文件不會有影響。
由于DIV+CSS布局更容易進行SEO優(yōu)化，所以更方便被搜索引擎收錄。

Table布局

雖然DIV+CSS有各種各樣的優(yōu)勢，但是Table布局也并不是完全無用的。這里也可以列舉出幾個采用Table布局的優(yōu)勢。

新手學(xué)習(xí)方便（相信有很多后端RD在進行前端學(xué)習(xí)時剛開始都是從table布局開始的）。
兼容性更好，由于Table布局是從最古老的瀏覽器發(fā)展而來的，在兼容性上會滿足所有瀏覽器。而CSS3的出現(xiàn)卻要考慮瀏覽器的支持程度，一個樣式要考慮加上幾個不同瀏覽器前綴，類似于-webkit，-moz等

結(jié)束語

今天這篇文章主要講解了幾個關(guān)于HTML的知識點，大家都掌握了嗎？

shopify中，其實產(chǎn)品的上傳是非常簡單的，但是不簡單的是，我們?nèi)绾巫龊靡粋€產(chǎn)品的關(guān)鍵詞優(yōu)化。包括常見的

Title 標題
Description 描述
Keyword 關(guān)鍵詞

做好產(chǎn)品的關(guān)鍵詞優(yōu)化，可以為你的shopify店鋪帶來流量，直至轉(zhuǎn)化！

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

那么為什么產(chǎn)品頁面的標題和描述是如此重要呢？

原因有三點：

第一：搜索引擎優(yōu)化和排名

搜索到現(xiàn)在為止，依然逃脫不了靠關(guān)鍵詞來發(fā)現(xiàn)用戶想要的內(nèi)容和信息，所有的信息搜索都是靠關(guān)鍵詞來渠道，Google也是，亞馬遜也是

所以在標題中植入關(guān)鍵詞有利于搜索引擎發(fā)現(xiàn)你的網(wǎng)站，爬取你的網(wǎng)站

第二：網(wǎng)站窗口

大家打開頁面，鼠標移到網(wǎng)站的窗口（tab）就可以看到頁面的標題，如下圖：

另外大家平常會打開很多瀏覽器的窗口（比如說下面的圖片）

那么，當(dāng)你的鼠標移到窗口，就知道這個網(wǎng)站是什么類型的網(wǎng)站，方便用戶瀏覽。

第三：社交分享

比如用戶要想把一個具體的產(chǎn)品分享到社交平臺上，比如分享到facebook，Twitter，pinterest，tumblr，那么你所使用的title就會當(dāng)做社交上分享的標題來使用

今天我們來講講TDK的撰寫和注意點，希望可以幫助到大家

首先我們打開Shopify的產(chǎn)品后臺，進入Products選項，如下圖：

點擊 add product 你就可以上傳產(chǎn)品了

在產(chǎn)品編輯中，產(chǎn)品的后臺編輯主要可以分為以下幾個選項，他們分別是：

Add product(Title,Description)—添加產(chǎn)品
Images—圖片
Pricing—價格
inventory—庫存
Shipping—運輸?shù)刂?/li>
Weight—重量
Variants—變體
Search engine listing preview—搜索引擎展示預(yù)覽

下面我們分別來說說這幾個主要的功能

Title & Description

關(guān)于Title & Description 這塊，shopify官方是這樣說的：

標題和描述在SEO中幾乎是最重要的元素！

關(guān)于標題（Title）：

那么在做標題的撰寫方面，你應(yīng)該要遵循以下幾點：

第一：標題必須和你所展示的內(nèi)容相一致（不然會導(dǎo)致你的網(wǎng)站跳出率極高，用戶體驗要額不好）

第二：植入關(guān)鍵詞在標題中

第三：標題中的關(guān)鍵詞越靠前越好

我不是太建議產(chǎn)品頁面是這樣的寫法：

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

這樣的標題用戶第一眼看上去，其實和你的很多產(chǎn)品的內(nèi)頁都是差不多的，與此同時，如果Google在搜索引擎中不展示后半部分的話，那么你的這個寫法就有巨大的問題。

第四：不要做關(guān)鍵詞的堆砌

在標題中做關(guān)鍵詞的撰寫，千萬不要做關(guān)鍵詞堆砌，比如，你要推廣Bells 這個關(guān)鍵詞，如果你寫成：

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

顯然這樣的標題布局是不合理的，因為有太多的關(guān)鍵詞堆砌.Google非常的聰明，已經(jīng)過了那種靠關(guān)鍵詞堆砌的時代，而且Google也很清楚的知道你這個標題寫的是什么，不需要浪費關(guān)鍵詞的空間

那么要怎么寫比較好呢？

建議你可以這樣寫：

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]

第六：標題要有吸引力

把競爭對手的標題羅列出來，和他們相比，你覺得你自己的標題怎么樣？

另外還要記住一點：你的標題不止是給搜索引擎看的，也是給用戶看的，所以你應(yīng)該更多的以用戶的口吻去寫產(chǎn)品

第七：標題是有字符數(shù)限制的

建議標題中的字符控制在70個字符之內(nèi)，包括空格。超過的字符會被Google展示為……..

如下圖：

關(guān)于描述（Description）：

我們在撰寫描述的時候要注意幾點呢？

為每個頁面撰寫?yīng)氁粺o二的描述
描述中可包含關(guān)鍵詞
關(guān)鍵詞不要堆砌
描述中更應(yīng)該包含你產(chǎn)品的特色，吸引力和從要點概括
可以對描述中的關(guān)鍵詞使用，長尾詞，變體，同義詞
描述應(yīng)該具有號召下（call to action）
注意描述部分是有字符的限制（建議控制在156個字符之內(nèi)）

關(guān)于URL

在shopify中，URL可以選擇默認的，也可以選擇自定義關(guān)鍵詞鏈接(同樣建議URL中的關(guān)鍵詞不能堆砌)

那么標題和描述在Google中的展示是上面樣子的呢？，如下圖：

上面的圖片已經(jīng)很清晰的標出了產(chǎn)品的標題，描述，還有SEO鏈接。

另外需要特別說明的是：

第一：在description上，并不是你上面寫了description，Google就一定會按你的description來展示。絕大多數(shù)情況下，google會采用，但不能保證一定100%

因為不同的用戶搜索不同的關(guān)鍵詞，有時候Google會把該頁面上其他的內(nèi)容作為description，換句話說Google會把他認為最相關(guān)的描述展示給用戶看，這點請大家注意。

第二：很多做B2C的人，為了圖方便，上傳產(chǎn)品的時候，圖片，標題，描述都是直接從工廠那邊拿過來直接抄襲的，這一點，絕對不可行，對你的網(wǎng)站優(yōu)化和排名并沒有任何的幫助

另外這里提供幾個工具，用來判斷你在寫shopify 標題，描述的時候會不會超出字符數(shù)，這樣的工具有：

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小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商