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布局

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

Table布局

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

新手學習方便（相信有很多后端RD在進行前端學習時剛開始都是從table布局開始的）。
兼容性更好，由于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）：

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

為每個頁面撰寫獨一無二的描述
描述中可包含關鍵詞
關鍵詞不要堆砌
描述中更應該包含你產品的特色，吸引力和從要點概括
可以對描述中的關鍵詞使用，長尾詞，變體，同義詞
描述應該具有號召下（call to action）
注意描述部分是有字符的限制（建議控制在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小時內與您取得聯系。

整合營銷服務商