todolist案例---静态组件

import React, { Component } from 'react'
import "./index.css"
export default class Item extends Component {
  render() {
    return (
      <ul className="todo-main">
      <li>
        <label>
          <input type="checkbox"/>
          <span>xxxxx</span>
        </label>
        <button className="btn btn-danger" style={{display:'none'}}>删除</button>
      </li>
      <li>
        <label>
          <input type="checkbox"/>
          <span>yyyy</span>
        </label>
        <button className="btn btn-danger" style={{display:'none'}}>删除</button>
      </li>
    </ul>
    )
  }
}

/*item*/
li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }
  li label {
    float: left;
    cursor: pointer;
  }
  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }
  li:before {
    content: initial;
  }
  li:last-child {
    border-bottom: none;
  }

// import React from 'react'
// className App extends React.Component{
//     render(){
//         return(<p>娟宝我爱你</p>)
//     }
// }
// export default App
import React,{Component} from 'react'
import "./App.css"
import Header from "./Component/Header"
import Footer from "./Component/Footer"
import List from "./Component/List"
export default class App extends Component{
    render(){
        return(
    <div className="todo-container">
    <div className="todo-wrap">
      <Header/>
      <Footer/>
      <List/>
    </div>
  </div>)
    }
}

/*base*/
body {
  background: #fff;
}
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}
.btn:focus {
  outline: none;
}
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}