弹性盒子布局flex
常用:
- display: flex;
- flex-grow: 1:在CSS Flexbox布局中用于指定flex项目的放大比例。当flex容器的空间大于其flex项目所需的总空间时,flex-grow属性允许flex项目根据它们的flex-grow值来分配额外的空间。如果所有flex项目的flex-grow值都相同(比如都是1),那么它们将等比例地增长以填充容器的剩余空间。(简单来说:就是剩余空间的分配比例,默认是0,越大分配的越多)
- align-self: flex-start; 特殊Flex项目将在交叉轴的起始位置对齐
- justify-content: center; 水平居中文本(可选)
- flex-direction: column; /*盒子内元素纵向排列*/
- border-bottom: 1px solid #f9f9f9; /*盒子底部加条线,1px:线大小,solid:实线,#f9f9f9:颜色*/
- font-weight: bold; /*黑体字,加粗*/
- text-decoration: none;超链接去掉下划线
- box-sizing: border-box;若盒子设定了高度或宽度,一般使用这个之后,盒子高度和宽度会变小,这个属性用于改变盒模型的计算方式。在CSS中,默认的盒模型是content-box,这意味着元素的宽度和高度只包括内容的宽度和高度,而不包括边框(border)、内边距(padding)和外边距(margin)。当你将box-sizing设置为border-box时,元素的宽度和高度将包括内容、内边距和边框,但不包括外边距。这样做的好处是,当你设置元素的宽度时,不需要再减去边框和内边距的宽度,从而简化了布局的计算。
- flex-wrap: wrap;是CSS Flexbox布局中的一个属性值对,用于控制flex容器中的子项(flex items)在必要时是否换行显示。一般给盒子内元素设置宽度,比如如果想要一行展示3个元素则设置30%,想要一行设置两个元素则设置40%
- align-items: center; 是CSS Flexbox布局中的一个属性值对,用于在交叉轴(cross axis)上对齐flex容器的子项(flex items)。作用:将flex容器的所有子项在交叉轴上的中点对齐。这意味着,如果flex容器的方向是行方向(即主轴是水平的),那么子项将在垂直方向上居中对齐;如果flex容器的方向是列方向(即主轴是垂直的),那么子项将在水平方向上居中对齐。
常用居中:
align-items: center;垂直居中
text-align: center;水平居中
三个组合:
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 设置或检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 限制在一个块级元素显示的文本的行数 */
-webkit-line-clamp: 2;
网格布局grid
第一步:
display: grid;
第二步:
grid:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
第三步:
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
其他样式:
grid-gap: 10px;盒内网格线粗细(不包括四周)
grid-template-columns: auto auto auto auto;如果您希望网格布局包含 4 列,则需要设置 4 列的宽度,如果所有列的宽度都是一样的,可以设置为 auto。
justify-content: 使用 justify-content 属性对齐容器内的网格。
- space-evenly;用于均匀排列每个元素,每个元素之间的间隔相等:
- space-around;均匀排列每个元素,每个元素周围分配相同的空间:
- space-between;均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点:
- center;
- start;
- end;
align-content: 属性用于设置垂直方向上的网格元素在容器中的对齐方式。
- center;
- space-evenly;
- space-around;
- space-between;
- start;
- end;
参考:https://www.runoob.com/cssref/css3-pr-justify-content.html
inline-grid和grid的区别:
1.布局方式:
grid:这个值将元素定义为一个块级网格容器。块级元素会独占一行,其宽度默认是父元素的100%,并且不会和内联元素(如、等)在同一行显示。
inline-grid:这个值将元素定义为一个内联网格容器。内联元素可以和其他内联元素(如图片、文字等)在同一行显示,其宽度不会默认占满父元素的宽度,而是根据内容自适应。
2.用途和场景:
当你需要创建一个占据全部可用宽度的网格布局,并且希望该布局不与其他内联元素混合时,应该使用grid。
如果你想要一个网格布局,但它需要和内联元素一起在同一行显示(例如,在文本流中嵌入网格),那么inline-grid是更合适的选择。
如何看到网格的线?
.home-content{
display: grid;
grid: 'content-left content-middle content-right';
background-color: #2196F3;
}
.home-content>div {
background-color: rgba(255, 255, 255, 0.8);
}
常用样式
字体
font-weight: 400; //表示设置字体的粗细为“正常”或“普通”粗细表示设置字体的粗细为“正常”或“普通”粗细。这个属性可以接受不同的值,包括关键字(如normal、bold、bolder、lighter)和数字(从100到900的整百数)。normal 的值相当于 400,表示字体粗细为普通或正常粗细。bold 的值相当于 700,表示字体加粗。
1. 鼠标悬浮选择器设置背景色和图片
.xx .xx:hover {
background-color: #ff6700;
background-image: url('images/right-jiantou2.png');
}
元素的背景上还会添加一个图片,这个图片通过url(‘images/right-jiantou2.png’)指定。这意味着在元素背景色的基础上,还会显示这张名为right-jiantou2.png的图片。这张图片可能是一个图标,比如一个向右的箭头,用于指示某种动作或方向,或者仅仅是作为装饰元素。
这里有一点需要注意:当同时使用background-color和background-image时,background-image会覆盖在background-color之上。因此,用户可能主要看到的是图片,而背景颜色则作为图片的背景或透明部分的填充色。
拓展:另一种使用技巧
.menu .item .nav {
min-width: 250px;
height: 460px;
background-color: #fff;
border: 1px solid #666;
position: absolute;
top: 0;
left: 100%;
box-sizing: border-box;
/* 六行单元格平分整个区域 */
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: 250px;
/* 排列方式设置为先列后行 */
grid-auto-flow: column;
/* 设置隐式网格宽度 */
grid-auto-columns: 250px;
padding: 20px;
/* 初始默认隐藏 */
display: none;
}
.item:hover .nav {
display: grid;
}
为了达到鼠标触碰才触发样式的效果可以使用以上代码。先display: none;然后使用.item:hover .nav这种选择器来给nav加样式display: grid;
添加阴影
box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.3);
box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.3); 是CSS中的一个属性,用于给元素添加阴影效果。这个属性接受一系列的值来定义阴影的样式,具体到这个例子中:
- 0px 0px:这两个值分别代表阴影在水平方向和垂直方向上的偏移量。在这个例子中,阴影没有在任何方向上偏移,因为它在水平和垂直方向上的偏移量都是0px。
- 6px:这个值代表阴影的模糊半径。模糊半径越大,阴影的边缘就越模糊。在这个例子中,阴影的模糊半径是6px,意味着阴影的边缘会有一定的模糊效果。
- rgba(124, 128, 172, 0.3):这个值定义了阴影的颜色和透明度。rgba是一个颜色值,其中r、g、b分别代表红色、绿色、蓝色的强度(在这个例子中是124、128、172),而a代表透明度(在这个例子中是0.3)。所以,这个阴影的颜色是接近于蓝色的淡色调,并且有一定的透明度(30%的透明度)。
综上所述,box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.3); 这行代码的意思是:给元素添加一个在其原始位置(没有偏移)、边缘模糊半径为6px、颜色为半透明淡蓝色(rgba(124, 128, 172, 0.3))的阴影效果。这样的阴影效果可以给元素增加一些视觉上的深度和层次感。
参考:债务管理系统首页
字体下加下划线
textDecoration: ‘underline’
光标移动到元素变手指
cursor: ‘pointer’
ul标签去除黑点
list-style-type: none;
案例
黑马小兔鲜项目
- 首页头部导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.topnav {
background: #333;
}
.topnav ul {
display: flex;
height: 53px;
justify-content: flex-end;
align-items: center;
list-style-type: none;
margin: 0;
}
.topnav ul li {
border-left: 2px solid #666;
}
.topnav ul li a {
padding: 0 15px;
color: #fff;
line-height: 1;
display: inline-block;
text-decoration: none;
}
</style>
</head>
<body>
<nav class = "topnav">
<div>
<ul>
<li><a href="./index.html">请先登录</a></li>
<li><a href="./index.html">免费注册</a></li>
<li><a href="./index.html">我的订单</a></li>
<li><a href="./index.html">会员中心</a></li>
<li><a href="./index.html">帮助中心</a></li>
<li><a href="./index.html">关于我们</a></li>
<li><a href="./index.html">手机版</a></li>
</ul>
</div>
</nav>
</body>
</html>
债务管理系统
首页
背景颜色渐变样式
background: linear-gradient(270deg, #FFFFFF 0%, #E3EAF9 100%);
- 参数1,270deg:表示颜色渐变的方向
0deg(或360deg)表示渐变方向是从上到下。
90deg 表示渐变方向是从左到右。
180deg 表示渐变方向是从下到上(这是0deg的反方向)。
270deg 表示渐变方向是从右到左(这是90deg的反方向,也就是从左到右的镜像)。
- 参数2,#FFFFFF 0%:起始颜色白色,0%:表示渐变的起始位置,也就是渐变线的开始处。在这个点上,渐变将采用第一个指定的颜色(在你的例子中是#FFFFFF,即白色)。100%:表示渐变的结束位置,也就是渐变线的结束处。在这个点上,渐变将采用最后一个指定的颜色(在你的例子中是#E3EAF9,即浅蓝色)。
- 参数3, #E3EAF9 100%:渐变结束颜色
背景颜色阴影
box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.6);
这行CSS代码定义了一个元素的阴影效果。具体来说,它包含了以下几个部分:
水平偏移量 (0px):这个值决定了阴影在水平方向上相对于元素的位置。0px 表示阴影在水平方向上没有偏移,即阴影会紧贴着元素的右侧(对于从左到右的阅读方向来说)或左侧(取决于元素的box-shadow属性是否受到其他CSS属性的影响,如transform或direction,但通常情况下,它紧贴着元素的边缘,并且由于阴影在元素的“后面”,所以你会看到它似乎是在元素的右侧)。
垂直偏移量 (0px):这个值决定了阴影在垂直方向上相对于元素的位置。同样地,0px 表示阴影在垂直方向上没有偏移,即阴影会紧贴着元素的底部(或顶部,取决于你如何理解“下面”这个概念,但在这个上下文中,我们通常认为它是紧贴着元素的底部边缘的)。
模糊半径 (6px):这个值决定了阴影的模糊程度。6px 的模糊半径意味着阴影的边缘会相对模糊,从而产生一种柔和的、扩散的阴影效果。模糊半径越大,阴影就越模糊,边缘就越不清晰。
颜色 (rgba(124, 128, 172, 0.6)):这个值指定了阴影的颜色和透明度。rgba 是一个颜色函数,它接受四个参数:红色(R)、绿色(G)、蓝色(B)和透明度(A)。在这个例子中,颜色是深蓝色(由RGB值124, 128, 172定义),透明度是0.6(意味着阴影颜色会与其后面的任何内容混合,形成半透明效果)。
综上所述,这行代码的意思是:在元素周围添加一个无水平偏移和垂直偏移的、模糊半径为6px的、颜色为半透明深蓝色的阴影效果。由于阴影没有偏移,它看起来就像是紧贴着元素的边缘(实际上是元素的“后面”)的一层柔和的深蓝色半透明覆盖层。
右侧顶部栏
flex:1
在CSS中,style=“flex:1” 是一个内联样式(inline style),它用于设置元素的flex属性。flex属性是flex布局(Flexible Box Layout)中的一个简写属性,用于同时设置flex-grow、flex-shrink和flex-basis三个属性的值。
当你写flex:1时,它实际上做了以下几件事情:
flex-grow: 1;:这个值定义了项目的放大比例,默认为0,即如果存在剩余空间,也不放大。设置为1意味着如果容器中有剩余空间,该项目将放大以填充剩余空间(相对于同一容器内其他flex项目的flex-grow值)。
flex-shrink: 1;:这个值定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。设置为1意味着如果容器空间不足,该项目将缩小以适应容器(相对于同一容器内其他flex项目的flex-shrink值)。
flex-basis: 0%;:这个值定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器会计算该值,并据此分配多余空间。但是,当你使用flex简写属性并只提供一个值时(如flex:1),flex-basis的默认值会被设置为0%,除非你在简写中明确指定了flex-basis的值(如flex: 1 1 auto;)。然而,在大多数现代浏览器中,当flex简写属性只包含一个值时,这个值会被同时用作flex-grow和flex-basis的值,而flex-shrink保持为1(这是一个浏览器行为上的细微差别,但通常不会影响大多数布局)。不过,为了清晰和兼容性,最好明确指定所有三个值,或者至少了解你的目标浏览器如何处理这种情况。
因此,style="flex:1"通常意味着你希望该元素能够根据需要放大以填充额外空间,并且在必要时缩小以适应容器大小,同时其基础大小(在分配额外空间之前的大小)将由其内容决定(或者更准确地说,在没有明确指定flex-basis时,其行为可能因浏览器而异)。然而,为了最佳实践,如果你想要元素基于其内容大小来分配空间,并允许它根据需要增长和缩小,你可能想要明确设置flex-basis,比如flex: 1 1 auto;。
计时器 + 周几
- 引入moment包那批,npm i moment -s,import moment from ‘moment’
代码:
<div class="date_block ccc">
<div class="rc">
<div class="date_str">{{ dateStr }}</div>
<div class="date_w">{{ weekStr }}</div>
</div>
</div>
js
data() {
return {
dateStr: moment().format('YYYY-MM-DD HH:mm:ss'),
//星期几
weekStr: '',
timer: null,
}
},
created() {
this.weekStr = this.getWeekStr()
this.timer = setInterval(() => {
this.dateStr = moment().format('YYYY年MM月DD日 HH:mm:ss')
}, 1000)
},
methods: {
getWeekStr() { // 参数时间戳
let week = moment().day()
switch (week) {
case 1:
return '周一'
case 2:
return '周二'
case 3:
return '周三'
case 4:
return '周四'
case 5:
return '周五'
case 6:
return '周六'
case 0:
return '周日'
}
},
}
css样式:
.date_block {
height: 100%;
// color: #333;
// font-size: 1rem;
// margin-right: 1rem;
.date_str {
color: #333;
font-size: 1rem;
margin-right: 1rem;
margin-top: 3px;
// margin: 0 1rem 0 0 ;
}
.date_w {
color: #333;
font-size: 1rem;
margin-right: 1rem;
// margin: 0 1rem 0 0;
}
}
// div多个元素水平居中分布
.rc{
display: flex;
flex-direction: row;
align-items: center;
}
// div单个元素垂直+水平居中
.ccc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}