pc端手机网站 样式没居中广州专业网站建设价格

pc端手机网站 样式没居中,广州专业网站建设价格,永久免费白嫖云服务器,阿里云网站部署一#xff1a;前言 为什么要使用tailwindcss? 主要是因为可以减少命名和选择器的烦恼#xff0c;不用去定义class类名了#xff0c;每次要定义类名都想的头疼。然后使用tailwindcss来开发#xff0c;可以减少 CSS 文件大小#xff0c;只生成实际使用的样式#xff0c;通…一前言为什么要使用tailwindcss? 主要是因为可以减少命名和选择器的烦恼不用去定义class类名了每次要定义类名都想的头疼。然后使用tailwindcss来开发可以减少 CSS 文件大小只生成实际使用的样式通过 PurgeCSS 移除未使用的 CSS生产环境文件体积极小。最后就是内置了响应式设计内置响应式前缀sm:, md:, lg:, xl:, 2xl:可以轻松创建移动优先的响应式布局。二安装参考文档https://tailwindcss.com/docs/installation/using-vite我这边使用的是vite那么就跟着vite的安装文档来走就行了最好大家跟着文档来走a.安装命令npm install tailwindcss tailwindcss/viteb.在vite.config.ts中配置它import{defineConfig}fromviteimporttailwindcssfromtailwindcss/viteexportdefaultdefineConfig({plugins:[tailwindcss(),],})c.导入importtailwindcss;d.在main.tsx中导入它注意把normalize.css和reset.css都可以干掉了因为tailwindcss里面内置了基础样式重置系统e.插件安装使用tailwindcss一定一定要安装插件因为tailwindcss的内置样式实在太多了不需要记也记不得这么全这里我们使用Tailwind CSS IntelliSense这样子写的时候就有提示了三使用安装完成之后就可以这样子使用它了四一些常用的css样式在tailwind中的写法a.最常用的margin和paddingp-4设置元素的内边距padding为 1rem相当于padding: 16px。m-8设置元素的外边距margin为 2rem 相当于 padding: 32px。mt-4设置元素的上外边距为 1rem相当于 margin-top: 16px。my-1: 相当于:margin-top:4px和margin-bottom:4px的组合。mx-1: 相当于:margin-left:4px和margin-right:4px的组合。注意这里的单位是rem如果不去更改html的font-size的大小话一般就是1rem16px所以在不更改大小的前提下 p-1就代表设置内边距为4px。但是有个问题就是上面很多都是预设值但是ui有时候给的没有这个值要使用自定义的值怎么办那么就用mt-[188px]这种格式这就代表了:margin-top:188px。所有需要自定义的都是使用[]这个来自定义记得要带上单位注意这里一定要学会看文档还有两个要记住的就是mx-auto 和 my-automy-auto常用场景在 flex 容器中垂直居中元素/* my-auto 相当于 */.my-auto{margin-top:auto;margin-bottom:auto;}mx-auto常用场景水平居中块级元素/* mx-auto 相当于 */.mx-auto{margin-left:auto;margin-right:auto;}b.设置宽高这里只写高度宽度同理**h-**_**number**_height: calc(var(--spacing) * _number_);**h-full**height: 100%;**h-screen**height: 100vh;**h-dvh**height: 100dvh;**h-dvw**height: 100dvw;**h-[**_**value**_**]**height: _value_;h-1:代表了height:0.25rem也就是 height:4pxh-[5188px]代表了height:5188px高度继承可以使用h-full来进行继承c.文字颜色和背景颜色文字颜色跟背景颜色没什么好说的虽然预设了很多值但是能用的没几个因为ui有自己的审美所以一般都是用text-[#xxxxxx] bg-[#xxxxxx]div classNamemt-10 text-[#50d71e] bg-blue-400测试tailwindcss/div文字加粗:一般就是用font-normal 和 font-bold**font-thin**font-weight: 100;**font-normal**font-weight: 400;**font-medium**font-weight: 500;**font-bold**font-weight: 700;**font-[**_**value**_**]**font-weight: _value_;d.hover更改状态buttonclassbg-sky-500 hover:bg-sky-700 ...Save changes/buttone.定位positon是我常忘记的直接写属性值就行了div classNamepointer-events-none fixed bottom-0 left-0{process.env.DEPLOY_TIME}/divf.鼠标样式一般就用到这两个**cursor-pointer**cursor: pointer;**cursor-not-allowed**cursor: not-allowed;g.border样式圆角我们在css经常写border-radius50%来画圆 这里可以用rounded-full来处理。如果只是一些圆角那么可以使用预设值或者自定义值来处理**rounded-xs**border-radius: var(--radius-xs); _/* 0.125rem (2px) */_**rounded-sm**border-radius: var(--radius-sm); _/* 0.25rem (4px) */_**rounded-md**border-radius: var(--radius-md); _/* 0.375rem (6px) */_**rounded-lg**border-radius: var(--radius-lg); _/* 0.5rem (8px) */_**rounded-xl**border-radius: var(--radius-xl); _/* 0.75rem (12px) */_**rounded-2xl**border-radius: var(--radius-2xl); _/* 1rem (16px) */_**rounded-none**border-radius: 0;**rounded-full**border-radius: calc(infinity * 1px);**rounded-[**_**value**_**]**border-radius: _value_;如果是需要画一条红色的虚线,则比原来的boder-bottom:1px dash red麻烦点这里分成了三个属性分别是border-width负责宽度和哪个方向的边框border-color负责颜色和border-style负责虚线还是实线。下面是一个2px的虚线红色的下边框div classNamemt-10 border-b-2 border-red-500 border-dashed测试红色虚线/divh.单行多行文本超出显示…传统css.my-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}在tailwind中有两种可以使用简写的也可以使用完整的三个属性div classNametruncate长文本.../divdiv classNamewhitespace-nowrap overflow-hidden text-ellipsis长文本.../div多行的传统css.text-ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;/* 显示3行 */overflow:hidden;}Tailwind CSS 提供了 line-clamp 工具类div classNameline-clamp-3多行文本内容.../div常用的 line-clamp 类line-clamp-1 - 显示1行line-clamp-2 - 显示2行line-clamp-3 - 显示3行line-clamp-4 - 显示4行line-clamp-5 - 显示5行line-clamp-6 - 显示6行line-clamp-none - 取消行数限制i:响应式布局前缀屏幕宽度CSS 媒体查询font stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);sm/font≥640pxfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);media (min-width: 640px)/fontfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);md/font≥768pxfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);media (min-width: 768px)/fontfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);lg/font≥1024pxfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);media (min-width: 1024px)/fontfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);xl/font≥1280pxfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);media (min-width: 1280px)/fontfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);2xl/font≥1536pxfont stylecolor:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);media (min-width: 1536px)/fontdivclasstext-sm md:text-base lg:text-lg!--移动端:小号字,平板:基础字号,桌面:大号字--/divj:最重要的布局类flex和grid布局1.flex布局flex这里不多讲一般大家都是用的比较多主要是看看在tailwind里面是怎么写的display:flex.(原来css) flex在tailwindcss里面justify-content主轴排列方式**justify-start**justify-content: flex-start;**justify-end**justify-content: flex-end;**justify-center**justify-content: center;**justify-between**justify-content: space-between;**justify-around**justify-content: space-around;**justify-evenly**justify-content: space-evenly;**justify-stretch**justify-content: stretch;align-items侧轴排列方式**items-start**align-items: flex-start;**items-end**align-items: flex-end;**items-center**align-items: center;**items-baseline**align-items: baseline;**items-stretch**align-items: stretch;flex方向**flex-row**flex-direction: row;**flex-row-reverse**flex-direction: row-reverse;**flex-col**flex-direction: column;**flex-col-reverse**flex-direction: column-reverse;flex换行**flex-nowrap**flex-wrap: nowrap;**flex-wrap**flex-wrap: wrap;**flex-wrap-reverse**flex-wrap: wrap-reverse;flex属性flex 是 CSS Flexbox 中的简写属性用于同时设置 flex-grow、flex-shrink 和 flex-basis控制弹性项目在容器中如何伸缩以适应可用空间这里面最常用的就是flex-1允许弹性物品根据需要大小变化意思就是比如在一个flex盒子中里面有3个子盒子有两个子盒子设置了flex-1还有一个没有设置那么当宽度变化时这个没设置的盒子的宽度是固定的两个flex-1的盒子宽度会随着父盒子宽度的增加而增加减小而减小。gap用于设置flex和grid布局中子盒子的间距这个gap用的很多**gap-**_**number**_gap: calc(var(--spacing) * _value_);**gap-[**_**value**_**]**gap: _value_;**gap-x-**_**number**_column-gap: calc(var(--spacing) * _value_);**gap-x-[**_**value**_**]**column-gap: _value_;**gap-y-**_**number**_row-gap: calc(var(--spacing) * _value_);**gap-y-[**_**value**_**]**row-gap: _value_;如下图主要就是用于子盒子之间的间距的可以使用gap-来设置统一的间距也可以gap-x-来设置x轴的间距2.grid布局gird真的很好用能省写很多盒子嵌套虽然使用flex都能解决布局问题但是有时候使用grid布局会更加的优雅。这里建议去学习一下阮一峰老师的grid的文档https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html举两个例子说明grid的好用例子1三列等宽布局这里写一个三列等宽的grid布局 这里的1fr相当于flex布局中子盒子的宽度设置为flex1的效果display:grid;grid-template-columns:repeat(3,1fr);在flex布局中有点麻烦原因盒子肯定不止3个所以子盒子不能使用flex:1得使用百分比超过3个就要使用flex-wrap: wrap;而且要考虑到盒子之间的间距.flex-container{display:flex;flex-wrap:wrap;gap:6px;}.flex-item{flex:00calc(33.333%-12px);/* 减去 gap 的影响 */}例子2:项目实际例子如图实现上面这个效果如果要flex要用多少盒子嵌套大家想一想应该有个基本的思维。但是使用flex布局只需要定义4列两行的布局。div classNamegrid grid-flow-col grid-cols-4 grid-rows-[repeat(2,auto)] gap-2 border-b py-4span classNametext-s-body-m text-body-mCustomer Name/spanspan{detailData?.clientName}/spanspan classNametext-s-body-m text-body-mCustomerID/spanspan{detailData?.customerId}/spanspan classNametext-s-body-m text-body-mBankCIF/spanspan{detailData?.cif}/spanspan classNametext-s-body-m text-body-mAsset/Network/spanspan{detailData?.assetCode}({detailData?.chainCode})/span/div可以看到我这里基本上没有多余的盒子。解释一下\3.列一下原类和在taiwindcss里面的写法grid-template-columns属性定义每一列的列宽**grid-cols-**_**number**_grid-template-columns: repeat(_number_, minmax(0, 1fr));**grid-cols-none**grid-template-columns: none;**grid-cols-subgrid**grid-template-columns: subgrid;**grid-cols-[**_**value**_**]**grid-template-columns: _value_;**grid-cols-(**_**custom-property**_**)**grid-template-columns: var(_custom-property_);grid-template-rows属性定义每一行的行高。**grid-rows-**_**number**_grid-template-rows: repeat(_number_, minmax(0, 1fr));**grid-rows-none**grid-template-rows: none;**grid-rows-subgrid**grid-template-rows: subgrid;**grid-rows-[**_**value**_**]**grid-template-rows: _value_;**grid-rows-(**_**custom-property**_**)**grid-template-rows: var(_custom-property_);grid-auto-flow默认的放置顺序是先行后列即先填满第一行再开始放入第二行假设定义了3行3列则从第一行从左到右排列过去。 默认值为row如果设置的是column那么就是先列后行**grid-flow-row**grid-auto-flow: row;**grid-flow-col**grid-auto-flow: column;**grid-flow-dense**grid-auto-flow: dense;**grid-flow-row-dense**grid-auto-flow: row dense;**grid-flow-col-dense**grid-auto-flow: column dense;justify-items属性设置单元格内容的水平位置左中右align-items属性设置单元格内容的垂直位置上中下**justify-items-start**justify-items: start;**justify-items-end**justify-items: end;**justify-items-center**justify-items: center;**justify-items-stretch**justify-items: stretch;**items-start**align-items: flex-start;**items-end**align-items: flex-end;**items-center**align-items: center;**items-baseline**align-items: baseline;**items-stretch**align-items: stretch;justify-content属性是整个内容区域在容器里面的水平位置左中右align-content属性是整个内容区域的垂直位置上中下。这个的属性跟flex上的属性基本上是一致的就不列了主要是要知道这个属性是干嘛的。l.使用!来达到最高等级在css中使用!important来强制该样式为最高等级在tailwindcss中只需要在对应的css样式前面加一个!div classNamebg-[#0094fc] h-20 mt-10 !bg-[#917d35]/div背景色bg-[#917d35]会覆盖bg-[#0094fc]m.复用类名各种指令的效果请查看官方文档只需要在index.css文件中使用apply字段来应用多个样式使用时这样子就行了效果注意这里有个问题就是虽然可以这样子复用类名但是在输入的时候没有提示相对来说没有特别友好。n.自定义类名tailwindcss. v4版本较v3版本有较大的升级之前v3是在tailwind.config.js中自定义自己的样式。但是现在v4版本不需要了只需要在统一的css文件里面进行定义即可。现在使用theme来自定义类名theme{/* 颜色扩展 - 这些会生成 text-brand-color, bg-brand-color 等类 */--color-brand-color:#c5d535;--color-bg-blue:#0094ff;/* 间距扩展 - 这些会生成 m-72, w-100 等类 */--spacing-100:400px;/* 字体大小扩展 - 这些会生成 text-menu-choice, text-title-l 等类 */--font-size-title-l:1.5rem;/* 阴影扩展 - 这些会生成 shadow-d-base, shadow-d-button 等类 */--shadow-d-button:04px4px0rgb(000/0.2);}使用这里定义了颜色那么不管是文字还是背景则都可以使用这个自定义类名的颜色div classNamebg-bg-blue mt-5123/divdiv classNamebg-brand-color mt-5 text-brand-color123/div使用theme来定义的在输入时就有提示相对来说就友好很多了。以下是可以定义的内容文档https://tailwindcss.com/docs/theme#theme-variable-namespacesNamespaceUtility classes**--color-***Color utilities like**bg-red-500**,**text-sky-300**, and many more**--font-***Font family utilities like**font-sans****--text-***Font size utilities like**text-xl****--font-weight-***Font weight utilities like**font-bold****--tracking-***Letter spacing utilities like**tracking-wide****--leading-***Line height utilities like**leading-tight****--breakpoint-***Responsive breakpoint variants like**sm:*****--container-***Container query variants like**sm:***and size utilities like**max-w-md****--spacing-***Spacing and sizing utilities like**px-4**,**max-h-16**, and many more**--radius-***Border radius utilities like**rounded-sm****--shadow-***Box shadow utilities like**shadow-md****--inset-shadow-***Inset box shadow utilities like**inset-shadow-xs****--drop-shadow-***Drop shadow filter utilities like**drop-shadow-md****--blur-***Blur filter utilities like**blur-md****--perspective-***Perspective utilities like**perspective-near****--aspect-***Aspect ratio utilities like**aspect-video****--ease-***Transition timing function utilities like**ease-out****--animate-***Animation utilities like**animate-spin**o.自定义主题tailwindcss中主题切换的原理这里的主题切换主要是通过theme中定义css变量然后切换时就切换html上的类名来实现官方文档importtailwindcss;theme{/* 主题切换的一些变量 */--color-main-color:var(--main-color);--color-secondary-color:var(--secondary-color);}/* 主题切换 CSS 变量定义 */:root{--main-color:rgba(232,176,176,0.87);--secondary-color:rgba(51,183,159,0.87);}.dark{--main-color:rgba(19,18,18,0.87);--secondary-color:rgba(52,5,5,0.87);}consttoggleTheme(){document.documentElement.classList.toggle(dark);};div切换下面的主题盒子/divButton typeprimaryonClick{()toggleTheme()}Button/Buttondiv classNamebg-main-color w-100 h-100 text-secondary-color主题相关的盒子/div