css 侧边栏和背景案例20200709

最新推荐文章于 2024-09-01 12:14:53 发布

IE吃饭

最新推荐文章于 2024-09-01 12:14:53 发布

阅读量201

点赞数

文章标签： css

本文链接：https://blog.csdn.net/luojunjie1999/article/details/107232616

版权

小米侧边栏案例

<style>
    a{
      display: block;
      width: 225px;
      height: 40px;
      background-color: #8e89a3;
      font-size: 14px;
      color: #ffffff;
      text-decoration: none;
      /* 首行缩进2em */
      text-indent: 2em;
    }
    a:hover{
      background-color: #ff6700;
    }
  </style>

  <body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 显示器 平板</a>
    <a href="#">家电 插线板</a>
    <a href="#">出行 穿戴</a>
  </body>

文字垂直居中方法
在这里插入图片描述

CSS背景

1.背景图片

      background-image: url(图片地址);

2.背景平铺

      background-repeat:repeat;

在这里插入图片描述
3.背景图片位置
后面是x和y

      background-position: 0 0;

背景小图标案例

  <style>
    h3 {
      width: 118px;
      height: 41;
      background-image: url(test2.png);
      background-repeat: no-repeat;
      background-position: left;
      text-indent: 2sem;
    }
    h3 a{
      font-size: 14px;
      text-decoration: none;
      font-weight: 400;
      color: #000;
    }
    a:hover{
      color: #ffd9c8;
    }
  </style>

背景大图片案例

    body{
      background-image: url(wangzherongyaobeijing.jpg);
      background-repeat: no-repeat;
      background-position:center top;
    }
  </style>

IE吃饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 侧边栏和背景案例20200709

小米侧边栏案例<style> a{ display: block; width: 225px; height: 40px; background-color: #8e89a3; font-size: 14px; color: #ffffff; text-decoration: none; /* 首行缩进2em */ text-indent: 2em; } a:ho
复制链接

扫一扫