zoukankan      html  css  js  c++  java
  • 如何实现一个既简单又漂亮的列表

    相信大家对列表展示早已不陌生了,工作中也经常会有这样的需求。那我们如何实现一个既简单又美观的列表展示呢?

    首先让我们来看一下效果:

    上面是普通的展示列表,而下面则是我们处理过的展示列表,是不是感觉美观了很多啊。

    实现:

      核心属性: linear-gradient(线性渐变)

      思路:绝对定位一个盒子到图片的上方,并对盒子的背景使用 linear-gradient渐变。

    下面我们来看看具体的实现代码(可复制的代码依旧在文章最下方)

    APP.js文件

     APP.css

    APP.js

    import React, {Component} from 'react'
    import './App.css'
    class App extends Component{
      render() {
        return (
          <ul className='mylist'>
            <li>
              <img src="https://s2.ax1x.com/2019/12/23/l9GN7t.jpg" alt=""/>
              <div className='li-content'>
                我是列表项
              </div>
            </li>
            <li>
              <div className='mongolia'></div>
              <img src="https://s2.ax1x.com/2019/12/23/l9Gm01.jpg" alt=""/>
              <div className='li-content'>
                我是列表项
              </div>
            </li>
          </ul>
        );
      }
    }
    export default App

    APP.css

    .mylist{
      padding-top: 200px;
      padding-left: 300px;
      background-color: #EEE;
      height: 500px;
    }
    .mylist>li{
      position: relative;
      margin-top: 20px;
      width: 600px;
      height: 80px;
      background-color: #fff;
      display: flex;
    }
    .mylist>li>img{
      width: 200px;
      height: 80px;
    }
    .mylist>li>.li-content{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .mylist>li>.mongolia{
      position: absolute;
      width: 200px;
      height: 80px;
      background-image: linear-gradient(to right, rgb(255,255,255,0), #ffffff);
    }
  • 相关阅读:
    判断图片是否存在,不存在则显示默认图片
    移动端开发时代理手机http访问查看效果(iphone)
    VS Code搭建TypeScript开发环境
    map,foreach和for的使用
    记一些常用的git命令
    js中创建对象的5种方法
    vuex简单使用
    记一下Slot的使用
    ES6中的箭头函数和普通函数有什么区别?
    计算属性、方法、侦听属性的区别
  • 原文地址:https://www.cnblogs.com/suihang/p/12089228.html
Copyright © 2011-2022 走看看