总算可以写博文了

2 篇文章 0 订阅
1 篇文章 0 订阅

在CSDN逛了这么久多没写过博文现在总算可以写了,也打算写了

希望大家支持我哦

本人的技能:

编程语言,silverlight ,asp.net,java,jsp,ssh,mvc,winform,access,mssql,mysql....

大家要支持下我哦,以上都是刚学的,属于菜鸟级的。。。。。。

 

以下是使用Tailwind CSS实现的微博博文布局示例: ```html <div class="flex items-start space-x-4"> <img src="https://via.placeholder.com/50" alt="avatar" class="w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center space-x-2"> <a href="#" class="font-medium text-gray-900">用户名</a> <span class="text-gray-500 text-sm">2小时前</span> </div> <p class="text-gray-800 leading-tight mt-1">微博内容</p> <div class="flex items-center mt-2"> <button class="text-gray-500 hover:text-blue-500 focus:outline-none focus:underline"> <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 inline-block"> <path fill-rule="evenodd" d="M13.707 5.293a1 1 0 00-1.414 0L10 7.586 8.707 6.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 000-1.414zM7 10a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zM6.293 8.707a1 1 0 000 1.414L8 12.414l1.293-1.293a1 1 0 10-1.414-1.414l-2 2z" clip-rule="evenodd"></path> </svg> <span class="ml-1">100</span> </button> <button class="text-gray-500 hover:text-red-500 focus:outline-none focus:underline ml-6"> <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 inline-block"> <path fill-rule="evenodd" d="M10 18a1 1 0 001-1v-5.586l2.293 2.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 11.414V17a1 1 0 001 1zM4 8a1 1 0 011-1h1V5a3 3 0 016 0v2h1a1 1 0 110 2H5a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> <span class="ml-1">50</span> </button> </div> </div> </div> ``` 这个示例中,我们使用了以下Tailwind CSS类: - `flex` 和 `items-start`:使头像和微博内容在一个水平线上,并且头像在微博内容的上方。 - `space-x-4`:为头像和微博内容之间添加4个单位的水平间距。 - `w-12` 和 `h-12`:将头像的宽度和高度设置为12个单位,以生成一个正方形头像。 - `rounded-full`:将头像的边角变为圆形。 - `flex-1`:将微博内容的宽度设置为尽可能多的空间,以填充余下的空间。 - `font-medium` 和 `text-gray-900`:使用户名具有中等粗细的字体,并且颜色为深灰色。 - `text-gray-500` 和 `text-sm`:为发布时间添加淡灰色文本颜色和较小的字体大小。 - `leading-tight` 和 `mt-1`:为微博内容设置较紧的行距和顶部间距。 - `flex` 和 `items-center`:使点赞和评论按钮在同一行上,并且居中对齐。 - `mt-2`:为点赞和评论按钮与微博内容之间添加2个单位的顶部间距。 - `hover:text-blue-500` 和 `hover:text-red-500`:当鼠标悬停在点赞或评论按钮上时,将其文本颜色更改为蓝色或红色。 - `focus:outline-none` 和 `focus:underline`:为点赞和评论按钮添加焦点时删除边框,并在下划线下划线下方添加下划线。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值