免费建站网站一区黄在线国产,公司做网站多,交易网站建设需要学什么软件,网络设计初步方案包括如果让你来实现下面这种页面#xff0c;该怎么实现呢 原子化和css组件化方式写法#xff0c;可以搭配起来使用#xff0c;常用的css
原子css
比如 下面这些类似flex 布局#xff0c;lstn curser-pointer 等常用的或者 具备一定规律性的padding margin 样式可以抽取为单独…如果让你来实现下面这种页面该怎么实现呢 原子化和css组件化方式写法可以搭配起来使用常用的css
原子css
比如 下面这些类似flex 布局lstn curser-pointer 等常用的或者 具备一定规律性的padding margin 样式可以抽取为单独的原子类使用 // 移除ul的点
.lstn {list-style-type: none;
}// 高度满屏
.h100vh {height: 100vh;
}// 透明度
.opacity-30 {opacity: 0.3;
}.opacity-50 {opacity: 0.5;
}.opacity-70 {opacity: 0.7;
}// 横向排列
.flex {display: flex;flex-wrap: wrap;
}.flex-grow {flex-grow: 1;
}// 纵向排列
.flex-col {flex-direction: column;flex-wrap: wrap;
}.text-white {color: #fff;
}.bg-red {background-color: red;
}.bg-orange {background-color: orange;
}.justify-around {justify-content: space-around;
}.justify-between {justify-content: space-between;
}.justify-center {justify-content: center;
}.nowrap {flex-wrap: nowrap;
}.color-white {color: white;
}.fw-600 {font-weight: 600;
}// 字体大小
.fz16 {font-size: 16px;
}.fz20 {font-size: 20px;
}.fz25 {font-size: 25px;
}.fz40 {font-size: 40px;
}//内边距.pt50 {padding-top: 50px;
}.px5 {padding: 0 5px;
}.px40 {padding: 0 40px;
}.py15 {padding: 0 15px;
}.py40 {padding: 0 40px;
}.p20 {padding: 20px;
}.p25 {padding: 25px;
}//外边距
.mt15 {margin-top: 15px;
}.mr10 {margin-right: 10px;
}.my15 {margin: 0 15px;
}.my20 {margin: 20px auto;
}// 宽度相关
.w100 {width: 100%;
}.w23 {width: 23px;
}// 图标相关
.icon20 {width: 20px;height: 20px;
}.icon80 {width: 80px;height: 80px;
}.position-relative {position: relative;
}.position-absolute {position: absolute;
}.ovh {overflow: hidden;
}
.radius50 {border-radius: 50%;
}
// 箭头指向
.cursor-pointer {cursor: pointer;
}// 文字居中
.text-center {text-align: center;
}对于比较大的公共类比如一些比较通用的组件可以抽取为一个大的组件类
.card {background-color: var(--card-bg);margin-bottom: 30px;border-radius: var(--card-radius);box-shadow: 0 0 33px 2px rgba($color: #000000, $alpha: .1);
}而一些比如字体17px 背景颜色非特别的红白蓝绿这种颜色的或者阴影这些可以在组件化代码当中编写
// 第二屏
.section2 {// 文章列表.article {.article_item {height: 240px;// 图片在右边.article_item--right {flex-direction: row-reverse;}.article_item_img {height: 240px;width: 370px;img {transition: transform .6s ease-in-out;transform-origin: center;:hover {transform: scale(1.2)}}}}}// 导航相关.nav_info {//作者信息.author_info {.name {font-size: 22px;}.follow_btn {height: 35px;background-color: var(--btn-bg);}}}section classcontainer h100vh section2 pt50div classrow!--文章列表--div classarticle col-md-9 px5!--文章项--div classarticle_item card flex article_item--leftdiv classarticle_item_img flex ovh flex-col justify-centerimg src./img/404.jpg classw100 alt/divdiv class flex flex-col justify-center flex-grow py40div Mac 切换 github 账号/divdiv发表于 1 个月前 |工具 |mac•github/divdiv本文详细讲述了如何在 Mac 环境下 切换 github 账号/div/div/divdiv classarticle_item card flex nowrap article_item--rightdiv classarticle_item_img ovh flex flex-col justify-centerimg src./img/404.jpg classw100 alt/divdiv class flex flex-col justify-center flex-grow py40div Mac 切换 github 账号/divdiv发表于 1 个月前 |工具 |mac•github/divdiv本文详细讲述了如何在 Mac 环境下 切换 github 账号/div/div/div/div!--导航信息--div classcol-md-3 px5div classnav_info!--站长信息--div class author_info card p25div class icon80 radius50 bg-orange my20/divdiv class text-center 毛竹/divp classtext-center怕什么真理无穷进一寸有一寸的欢喜。/pdiv class flex justify-betweendiv class text-centerp文章/pp classfz20159/p/divdiv class text-centerp标签/pp classfz20517/p/divdiv class text-centerp分类/pp classfz2057/p/div/divdiv classfollow_btn content-center cursor-pointer text-whiteimg src./img/icon/github.png classicon20 mr10 alt Follow Me/divdiv class content-center mt15img src./img/icon/github.png classcursor-pointer w23 altimg src./img/icon/email.png classcursor-pointer w23 my15 altimg src./img/icon/twitter.png classcursor-pointer w23 alt/div/div!--公告信息--div classp25 carddiv classfz16公告/divdiv class text-centerAsk Me Anything/divimg class w100 src./img/202109211725265.png alt/div!--最新文章--div classcard p25div classfz16最新文章/divdiv classdiv class/divdiv class/divdiv class/div/div/div/div/div/div/section写代码思路 1、提取出原子类有哪些常用类哪些类名可以抽取出来 2、提取公共组件类有哪些公共组件类 3、针对特殊没有规律不需要复用的样式进行组件化编写
简单点就是先用原子类搭建好基本结构然后再进行组件化样式的编写
