CSS背景实例

body{
background-image: url(  ' ' );
background-repeat: repeat-x   repeat-y   no-repeat;

background-position: 100px  100px;

/*x: left  center  right*/
/*y: top  center bottom*/

height: 1500px; /*高度, 长了可以滚动*/

background-attachment: fixed;/*背景是否滚动*/


/*也可以放在一起写*/
background:  color:red  url: ( ' ' )   no-repeat   fixed   100px 100px
  }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个使用 CSS Box Orient 布局的示例: HTML 代码: ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> ``` CSS 代码: ```css .container { display: flex; flex-wrap: wrap; gap: 10px; box-orient: horizontal; box-pack: center; box-align: center; height: 200px; background-color: #f1f1f1; } .item { width: 80px; height: 80px; background-color: #333; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 24px; } ``` 解释: - `display: flex;` 启用 Flexbox 布局。 - `flex-wrap: wrap;` 让子元素在一行放不下时换行。 - `gap: 10px;` 为子元素之间添加间距。 - `box-orient: horizontal;` 指定主轴方向为水平方向。 - `box-pack: center;` 指定在主轴方向上如何对齐子元素,这里是居中对齐。 - `box-align: center;` 指定在交叉轴方向上如何对齐子元素,这里是居中对齐。 - `height: 200px;` 指定容器的高度。 - `background-color: #f1f1f1;` 设置容器的背景色。 - `.item` 类是子元素的样式。 - `width: 80px;` 设置子元素的宽度。 - `height: 80px;` 设置子元素的高度。 - `background-color: #333;` 设置子元素的背景色。 - `color: #fff;` 设置子元素的文本颜色。 - `display: flex;` 让子元素也启用 Flexbox 布局。 - `justify-content: center;` 指定子元素在主轴方向上如何对齐,这里是居中对齐。 - `align-items: center;` 指定子元素在交叉轴方向上如何对齐,这里是居中对齐。 - `font-size: 24px;` 设置子元素的字体大小。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值