鹿白运维 - 无畏者的分享平台
主页 » Typecho教程 » 正文

主题使用Html实现高级布局,方便自己发文章套用

/ in Typecho教程

Typecho默认markdown可以使用!!!包裹来实现文章中插入html,于是乎就可以用主题框架的css来实现更有趣的布局了。本文出自泽泽之手。

>布局1

bg-pink-50
bg-pink-50
bg-pink-50
bg-pink-100
bg-pink-100
bg-pink-100
bg-pink-200
bg-pink-200
bg-pink-200
bg-pink-300
bg-pink-300
bg-pink-400
三个!
<div class="grid grid-cols-3 gap-1 mb-5 dark:text-gray-900">
<div class="font-semibold bg-pink-50 p-2">bg-pink-50</div>
<div class="font-semibold bg-pink-50 p-2">bg-pink-50</div>
<div class="font-semibold bg-pink-50 p-2">bg-pink-50</div>
<div class="bg-pink-100 p-2">bg-pink-100</div>
<div class="bg-pink-100 p-2">bg-pink-100</div>
<div class="bg-pink-100 p-2">bg-pink-100</div>
<div class="bg-pink-200 p-2">bg-pink-200</div>
<div class="bg-pink-200 p-2">bg-pink-200</div>
<div class="bg-pink-200 p-2">bg-pink-200</div>
<div class="col-span-2 bg-pink-300 p-2">bg-pink-300</div>
<div class="col-span-1 bg-pink-300 p-2">bg-pink-300</div>
<div class="col-span-3 bg-pink-400 p-2">bg-pink-400</div>
</div>
三个!


font-semibold是文字加粗,bg-pink-50是背景色,50是深浅度可选值有50,100,200,300,400,500,600,700,800,900,pink是颜色可选值有gray,red,yellow,green,blue,indigo,purple,pink,色域不全的显示器某些浅色可能直接显示成白色。

>布局2

绿
三个!
<div class="grid grid-cols-4 gap-1 mb-5 text-white">
<div class="bg-red-600 flex items-center justify-center h-16 w-full">红</div>
<div class="bg-yellow-600 flex items-center justify-center h-16 w-full">黄</div>
<div class="bg-green-600 flex items-center justify-center h-16 w-full">绿</div>
<div class="bg-blue-600 flex items-center justify-center h-16 w-full">蓝</div>
</div>
三个!

>布局3

加粗标题
这是是其他文字内容
三个!
<div class="border-8 border-blue-200 bg-blue-50 text-blue-600">
<div class="p-2">
<div class="font-semibold">加粗标题</div>
这是是其他文字内容
</div>
</div>
三个!

>布局4

标题1
内容1
内容2
标题2
内容1
内容2
标题3
内容1
内容2
三个!
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

<div class="bg-blue-200 text-center">
<div class="bg-blue-500 h-12 flex items-center justify-center px-3 text-white text-base mx">标题1</div>
<div class="p-3 text-base">
    <div class="block">内容1</div>
    <div class="block">内容2</div>
    </div>
</div>

<div class="bg-blue-200 text-center">
<div class="bg-blue-500 h-12 flex items-center justify-center px-3 text-white text-base mx">标题2</div>
<div class="p-3 text-base">
    <div class="block">内容1</div>
    <div class="block">内容2</div>
    </div>
</div>

<div class="bg-blue-200 text-center">
<div class="bg-blue-500 h-12 flex items-center justify-center px-3 text-white text-base mx">标题3</div>
<div class="p-3 text-base">
    <div class="block">内容1</div>
    <div class="block">内容2</div>
    </div>
</div>

</div>
三个!

>布局5

Q:typecho主题好用吗?
A:
王婆卖瓜自卖自夸,当然好用啦!!!
三个!

<div class="px-4 py-3 bg-white border-2 border-grey-200 rounded-md shadow-sm hover:shadow-md mb-6 lg:mb-10 dark:bg-black dark:border-gray-700">
<div class="text-lg font-semibold border-b-2 border-gray-100 pb-1 mb-3 dark:border-gray-700">
<span class="text-red-500">Q:</span>typecho主题好用吗?</div>
<div class="flex">
<span class="flex-none text-lg text-red-500 font-semibold">A:</span>
<div class="flex-grow">王婆卖瓜自卖自夸,当然好用啦!!!</div>
</div>
</div>
三个!

>时间线

2015年6月初:

想起自己初高中时期想建立网站的愿望

2015年6月6日:

购入域名,并确立网站类型为个人博客

2020年12月3日

网站域名与数据卖了,并更换新域名数据照旧

{timeline}

**2015年6月初:**
想起自己初高中时期想建立网站的愿望

**2015年6月6日:**
购入域名,并确立网站类型为个人博客

**2020年12月3日**
网站域名与数据卖了,并更换新域名数据照旧

{/timeline}
猜你喜欢
评论 (0)
隐私评论
搜索
0:00