[置顶] 芒果XO文章CSS樣式列表(主)

Phoenix 2018.10.13 22:52 浏览(2307) 评论 (4)

這是一個測試標題

<div class="thick-left">
   <div class="thick-head"></div>
   <p>這是一個測試標題</p>
</div>

<div class="sping-square">
   <div>
      <p>1</p>
   </div>
</div>

<div class="bubble-square">
   <p>1</p>
</div>

<div class="ink-circle">
<p>01</p>
</div>

吹进消费者心中的国潮暖风

<div class="two-square">
   <div class="font-square">
      <p>01</p>
   </div>
   <div class="back-square">&nbsp;</div>
   <p>吹进消费者心中的国潮暖风</p>
</div>

這是一個測試標題

<div class="wood-board">
   <div>
      這是一個測試標題
   </div>
</div>

Test标题

<div class="yellow-lemmon">
   <p>Test标题</p>
</div>

不可避免，不代表没有办法解决

<div class="two-line">
   <div class="two-line-content">
      <div class="two-line-thick">
         <p>不可避免，不代表没有办法解决</p>
      </div>
   </div>
</div>

比赛团队构成

<div class="ink-title">
   <p>比赛团队构成</p>
</div>

以下是互聯网站大分類：

<div class="orange-dot">
   <div>
      <p>以下是互聯网站大分類：</p>
   </div>
</div>

不怕你不上套！就怕你没有爱好。—— 犯人赖昌星曾在大狱里交代

<div class="two-line-block">
   <p>
      不怕你不上套！就怕你没有爱好。—— 犯人赖昌星曾在大狱里交代
   </p>
</div>

阿里巴巴集团有限公司总部设立在杭州

相对于其他19强，大家都比较熟悉阿里

淘宝网、天猫这些电商产业就不用说了

阿里巴巴的主营业务包括核心电商云计算、

数字媒体和娱乐以及创新项目和其他业务

<div class="double-border">
   <div>

   </div>
</div>

1、行业细分网站

一般很多大型的综合网站都已经被巨头们垄断了，我们要做一个像淘宝、京东、阿里巴巴那个的站不是不可以，问题是我们根本做不过人家，用户要找这种平台当然是找流量最多的平台合作。那么我们不妨选择一个小的细分行业来做，专业性更强，目标客户更加精准。比如做一个新娘的网站，我们就专门分享结婚类的文章，然后与拍婚纱服务的商家进行合作赚钱。

2、地方性平台

地方性的用户比较集中，网站主要提供地方内的信息，那么网站要找到忠实的用户是比较容易的。比如我们只做一个县城的平台，那么这个县城的新闻、分类信息、商家店铺都会是我们需要提供的内容，只要你的平台在本地打开，那么商家是很愿意找我们合作的。

<div class="quote-like">
</div>

几乎每年夏天我们都会听到全国各地传来的溺亡新闻，除了极少数人会相信当地传说，觉得是有水怪等奇异的东西在作祟之外，大多数人都觉得这种情况只是意外。

不过同样的事情发生在日本却会有不同的反应，因为寺庙中收藏的木乃伊让他们知道这个世界上真的有河童。

<div class="ice-blue">
   <div>
      <div>
         ......
      </div>
   </div>
</div>

人的大脑本质上就是一个处理器

<div class="paw-title">
   <div class="paw-icon">&nbsp;</div>
   <p>人的大脑本质上就是一个处理器</p>
</div>

房价跌了

<div class="blue-line">
   <div>
      <p>1</p>
   </div>
   <p>房价跌了</p>
</div>

box-shadow:阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
Firefox支持Box Shadow(阴影)：-moz-box-shadow:2px 2px 5px #333333
webkit内核的Safari和Chrome支持Box Shadow(阴影)：-webkit-box-shadow:2px 2px 5px #333333
Opera支持Box Shadow(阴影)：box-shadow:2px 2px 5px #333333
IE不支持Box Shadow(阴影)

<div class="shadow-frame">
   ......
</div>

3. 熬夜两三年，25岁检查发现心梗

<div class="red-stamp">
   <div>
      <div></div>
         <p>3. 熬夜两三年，25岁检查发现心梗</p>
      <div></div>
   </div>
</div>

扎不扎心?

<div class="sailing-boat">
   <div class="boat-img">&nbsp;</div>
   <div class="sailing-boat-content">
      <p>扎不扎心?</p>
      <div class="double-line">&nbsp;</div>
   </div>
</div>

希望对各位站长有所帮助

線條顏色可以自定義，你想定義什麼顏色都可以。比如現在是黑色

<div class="letter-style" style="background-color:black">
  <div>
    <p>
      線條顏色可以自定義，比如現在是黑色
    </p>
  </div>
</div>

2018年男女宝宝热名第一分别为“子墨”、“一诺”

你也可自定義陰影顏色，比如現在把它定義為黑色

<div class="frame-color-shadow">
   <div class="frame-content" style="box-shadow:black 3px 3px 1px">
      <div class="icon-1"></div>
      <div class="icon-2"></div>
      <p>你也可自定義陰影顏色，比如現在把它定義為黑色</p>
   </div>
</div>

他的儿子激动地来到医生办公室

你也可自定背景顏色，比如現在把它定義為綠色

<div class="tag-round-line">
   <div>
      <div style="background:green">
         <p>他的儿子激动地来到医生办公室</p>
      </div>
   </div>
</div>

北京时间4月22日,勇士和快船迎来系列赛第四战。此役,前三场鲜有高光表现的克莱-汤普森突然发难,他在开局阶段7投全中,首节狂砍17分,半场掠下27分,助勇士113-...

<div class="apricot-board">
   <div>
      <p>北京时间4月22日,勇士和快船迎来系列赛第四战。此役,前三场鲜有高光表现的克莱-汤普森突然发难,他在开局阶段7投全中,首节狂砍17分,半场掠下27分,助勇士113-...</p>
   </div>
</div>

经查，目前联想集团向华为公司供货正常。对于目前网上的“断供”等不实之词，我们已经对谣言传播者连夜取证，将诉诸法律手段，追究造谣者责任。

不明势力针对联想的舆论攻击在过去一年时间已经连续发起多次，谣言广度和深度远超正常商业竞争范围，已向有关方面汇报，望网友勿相信相关传言。

华为是联想PC和服务的重要客户，我们将在严格遵守联想业务所在国家和地区的相关法律及合规条例的基础上，持续向华为销售产品和服务。

多事之秋，共度难关！

你也可自定背景顏色，比如現在把它定義為粉紅色

<div class="inner-shadow" style="background-color:pink">
   <p>你也可自定背景顏色，比如現在把它定義為粉紅色</p>
</div>

亏钱怪自己，行业不“背锅”

你也可自定背景顏色，比如現在把它定義為紅色

<div class="backcolor-line">
   <div style="background-color:red">
      <p>亏钱怪自己，行业不&ldquo;背锅&rdquo;</p>
   </div>
</div>

Test标题(div)

你也可自定背景顏色，比如現在把它定義為黑色

<div class="dash-border" style="border: 1px dashed black;">
  你也可自定背景顏色，比如現在把它定義為黑色
</div>

Test标题(div)

<div class="gray-block">
  Test标题(div)
</div>

別把疼你的人弄丟了, 別丟下我不管, 療愈歌合集你的一生我只借一程

<p>
  別把疼你的人弄丟了, 別丟下我不管, <span class="code">療愈歌合集</span>你的一生我只借一程
</p>

載貨不穩膠箱橫飛

你也可自定背景顏色，比如現在把它定義為淺藍色

<div class="half-round-cornor" style="background-color:lightblue">
  你也可自定背景顏色，比如現在把它定義為淺藍色
</div>

动漫图片

<div class="maple-leaf">
  动漫图片
</div>

品牌策划

<div class="shadow-word">
   <h3>品牌策划</h3>
</div>

往数据库里出大数字时是不是都自动使用科学计数法了？怎么我冲数据库里查出来的值变成科学计数法了呢！！

<div class="three-line">
   <div class="icon-1"></div>
   <div class="three-line-content">
      <div>
         <div>
            <p>往数据库里出大数字时是不是都自动使用科学计数法了？怎么我冲数据库里查出来的值变成科学计数法了呢！！</p>
         </div>
      </div>
   </div>
   <div class="icon-2"></div>
</div>

警方提示

商家一定要看管好自己的财物，不要将货物放到视线看不到的地方，给犯罪分子有机可乘。发生盗窃或其他危险情况，请立即报警！

<div class="police-star">
   <div class="star-icon">警方提示</div>
   <div class="content-frame">
      <p>商家一定要看管好自己的财物，不要将货物放到视线看不到的地方，给犯罪分子有机可乘。发生盗窃或其他危险情况，请立即报警！</p>
   </div>
</div>

往数据库里出大数字时是不是都自动使用科学计数法了？怎么我冲数据库里查出来的值变成科学计数法了呢！！

<div class="love-line">
   <div class="icon-1"></div>
   <div class="love-line-content">
      <p>往数据库里出大数字时是不是都自动使用科学计数法了？怎么我冲数据库里查出来的值变成科学计数法了呢！！</p>
   </div>
   <div class="icon-2"></div>
</div>

所谓“白名单国家”，是指日本从国家安全保障角度认定的友好国家，对这些国家在出口重要战略性技术和物资时赋予简化出口手续的优待措施。这一名单包含27个国家，韩国2004年加入，此前一直是“白名单”里唯一的亚洲国家，享受优惠待遇。被除名后，韩国进口日本相关产品时，须经过日本一定时间的审查并得到许可后，方可进口。

<div class="left-quote">
   <div class="icon-1"></div>
   <div class="left-quote-content">
      <p>所谓“白名单国家”，是指日本从国家安全保障角度认定的友好国家，对这些国家在出口重要战略性技术和物资时赋予简化出口手续的优待措施。这一名单包含27个国家，韩国2004年加入，此前一直是“白名单”里唯一的亚洲国家，享受优惠待遇。被除名后，韩国进口日本相关产品时，须经过日本一定时间的审查并得到许可后，方可进口。</p>
   </div>
</div>

你也可以把边線改為其他顏色你也可以把边線改為其他顏色

你也可以把边線改為其他顏色

<div class="left-quote">
   <div class="icon-1"></div>
   <div class="left-quote-content" style="border-color:bisque">
      <p>你也可以把边線改為其他顏色</p>
   </div>
</div>

2019-9-20新增

转给身边的大小朋友狗狗教你如何正确过马路！

<div class="four-square-block">
   <div class="icon-block">
      <div class="icon-1"></div>
      <div class="icon-2"></div>
   </div>
   <div class="text-block">转给身边的大小朋友狗狗教你如何正确过马路！</div>
   <div class="icon-block">
      <div class="icon-3"></div>
      <div class="icon-4"></div>
   </div>
</div>

《三国演义》里的中秋节

<div class="dancing-rabbit">
   <div class="dancing-rabbit-content">《三国演义》里的中秋节</div>
</div>

没有金九银十的楼市，有人在深夜痛哭。

<div class="square-slash">
   <div class="square-slash-content">
      <div class="slash-1">
         <div></div>
      </div>
      <div class="order">1</div>
      <div class="slash-2">
         <div></div>
      </div>
   </div>
   <p>没有金九银十的楼市，有人在深夜痛哭。</p>
</div>

你可以清晰考量付钱顾客的核心因素。有误讲解重要数剧将会造成销售计划的错误，反之就会驱使销售计划的完成。

<div class="red-string">
   <div class="icon-block">
      <div class="icon-1 red-string-icon">&nbsp;</div>
      <div class="icon-2 red-string-icon">&nbsp;</div>
   </div>
   <div class="content-text">
      <p>你可以清晰考量付钱顾客的核心因素。有误讲解重要数剧将会造成销售计划的错误，反之就会驱使销售计划的完成。</p>
   </div>
   <div class="icon-block">
      <div class="icon-3 red-string-icon">&nbsp;</div>
      <div class="icon-4 red-string-icon">&nbsp;</div>
   </div>
</div>

1.時刻明确客户需求

<div class="red-string-title">
   <div class="red-string-title-wrap">
      <div class="icon-1 red-string-title-icon"></div>
      <div class="content-text">
         <p>1.時刻明确客户需求</p>
      </div>
      <div class="icon-2 red-string-title-icon"></div>
   </div>
</div>

思想精髓

<div class="four-leaf">
   <div class="four-leaf-content">
      <div class="four-leaf-icon icon-1"></div>
      <p>思想精髓</p>
      <div class="four-leaf-icon icon-2"></div>
   </div>
</div>

一个公司的例会上，店长和员工小王因为一项工作的方法问题，发生了激烈地争论，双方谁也说服不了谁，争得面红耳赤。这时，经理感到自己领导地位受到了挑战，突然站了起来，指着小王的鼻子愤怒地说：“你以为你很聪明是吧？你不要自以为是！我跟你说，你提出的方法简直是井底之蛙，鼠目寸光，你见没见过世面啊……”

<div class="doodle-line">
   <p>一个公司的例会上...</p>
</div>

2019-10-30新增

<div class="green-van"></div>

记住，一定要执行，一定要执行，一定要执行。

<div class="lake-blue-border">
   <div class="left-top-icon-wrap">
      <div class="lake-blue-icon">
         <div class="icon-inner"></div>
      </div>
   </div>
   <p>记住，一定要执行，一定要执行，一定要执行。</p>
   <div class="right-bottom-icon-wrap">
      <div class="lake-blue-icon"></div>
   </div>
</div>

挖掘被深藏的内容

<div class="lake-blue-title">
   <div class="title-back">
      <div class="title-frame">
         <div class="icon1"></div>
         <div class="icon2"></div>
         <div class="content">挖掘被深藏的内容</div>
         <div class="icon3"></div>
         <div class="icon4"></div>
      </div>
   </div>
</div>

Get治疗牙齿新技能✔

<div class="balloon-title">
   <div class="title-icon">&nbsp;</div>
   <div class="title-content">Get治疗牙齿新技能✔</div>
</div>

Lovely Memories

<div class="pink-ink-title">
   <p>Lovely Memories</p>
</div>

小小牙医点评

<div class="button-shadow-title">
   <div class="back">
      <div class="face">
         <div class="face-inner">小小牙医点评</div>
      </div>
   </div>
</div>

每一天都是“爱牙日”

小小牙医刘先泽 7岁童园实验小学二年级一班

9月20日是“全国爱牙日”，而我在这天，成为了一名“小牙医”。冒着小雨，妈妈带我来到了维乐口腔，在漂亮阿姨的带领下，我换上了白大褂，开始了一天的“牙医”工作。

牙医要做的第一件事情就是要检查牙齿。让“小病人”躺到“小飞船”上，系上围兜，我戴上口罩、手套，拿着专门检查牙齿的小镜子，开始给“小病人”检查牙齿。“小病人”的牙齿上有小黑洞洞，还有黄黄的东西，医生说：“这都是刷牙不干净的后果，所以我们每天都要早晚两次仔细刷牙。”

我的牙齿上也有小黑洞洞，想想我每天刷牙的时候也不是很认真，经常早上刚起来闭着眼睛就把牙刷完了。

<div class="check-block">
   <div class="block-wrap">
      <div class="block-title">
         <p>每一天都是“爱牙日”</p>
         <p>小小牙医 刘先泽 7岁 童园实验小学二年级一班</p>
      </div>
      <div class="block-content"><p>9月20日是“全国爱牙日”，而我在这天，成为了一名“小牙医”。 冒着小雨，妈妈带我来到了维乐口腔，在漂亮阿姨的带领下，我换上了白大褂，开始了一天的“牙医”工作。...</p>
      </div>
   </div>
</div>

喜欢 (2) 转发

加载评论中

品牌策划

热门文章