wanggang316/README.md

## README.md

      
    Raw
  

              README.md
            
          
## UITableView.html
<!--

Simple UITableView implementation using only HTML and CSS.

Created by Caleb Davenport on June 6, 2012.
http://caleb.dvnprt.me

This is free to use. I hold no copyright.

 -->

<!DOCTYPE html>
<html>
  <head>

    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" name="viewport" />

    <style type="text/css">

      * {
        box-sizing:border-box;
      }

      body {
        margin:0;
        padding:0;
        background-color:#DDD;
      }

      div {
        border:1px solid #B2B4B8;
        border-radius:10px;
        box-shadow:inset 0px 1px 0px rgba(0, 0, 0, 0.075), 0px 1px 0px rgba(255, 255, 255, 0.75);
        margin:10px;
        padding:0;
      }

      ul {
        list-style-type:none;
        font-family:"Helvetica";
        font-size:16px;
        margin:10px;
        padding:0;
      }

      ul li {
        background-color:#F7F7F7;
        padding:14px 10px;
        border-left:1px solid #B2B4B8;
        border-right:1px solid #B2B4B8;
        border-bottom:1px solid #CBCBCB;
        border-top:1px solid #FDFDFD;
        color:#385487;
      }

      ul li b {
        color:black;
      }

      ul li.value-one {
        text-align:right;
      }

      ul li.value-one b {
        float:left;
      }

      ul li:first-of-type {
        box-shadow:inset 0px 1px 0px rgba(0, 0, 0, 0.075);
        border-top:1px solid #B2B4B8;
        border-top-right-radius:10px;
        border-top-left-radius:10px;
      }

      ul li:last-of-type {
        border-bottom:1px solid #B2B4B8;
        border-bottom-right-radius:10px;
        border-bottom-left-radius:10px;
        box-shadow:0px 1px 0px rgba(255, 255, 255, 0.75);
      }

      ul li:only-of-type {
        box-shadow:inset 0px 1px 0px rgba(0, 0, 0, 0.075), 0px 1px 0px rgba(255, 255, 255, 0.75);
      }

      ul p {
        text-shadow:0px 1px 0px rgba(255, 255, 255, 0.75);
        margin:15px 10px 7px 10px;
        font-weight:bold;
        color:rgb(77,87,104);
      }

    </style>

  </head>
  <body>

    <ul>
      <p>Key Value Cells</p>
      <li class="value-one"><b>Ringtone</b>Marimba</li>
      <li class="value-one"><b>Text Tone</b>Tri-Tone</li>
      <li class="value-one"><b>New Mail</b>Ding</li>
    </ul>

    <ul>
      <p>Plain Cells</p>
      <li><b>California</b></li>
      <li><b>Arizona</b></li>
      <li><b>North Carolina</b></li>
      <li><b>Virginia</b></li>
      <li><b>Florida</b></li>
    </ul>

    <ul class="UITableView">
      <p>Light Text Cells</p>
      <li>Cells can hold text of arbitrary length</li>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed orci ligula. Vivamus non eros nec massa imperdiet imperdiet eu vel ipsum. Phasellus neque leo, lacinia sit amet mollis ut, facilisis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu libero nisl. Maecenas sed mauris augue. Ut suscipit, nunc id cursus ultrices, dolor dui facilisis neque, venenatis tincidunt eros justo eu tortor. Morbi pulvinar orci eu eros pharetra quis convallis nunc mattis. Duis enim odio, tincidunt a adipiscing vel, imperdiet quis massa.
      </li>
    </ul>

  </body>
</html>
	<!--

	Simple UITableView implementation using only HTML and CSS.

	Created by Caleb Davenport on June 6, 2012.
	http://caleb.dvnprt.me

	This is free to use. I hold no copyright.

	-->

	<!DOCTYPE html>
	<html>
	<head>

	<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" name="viewport" />

	<style type="text/css">

	* {
	box-sizing:border-box;
	}

	body {
	margin:0;
	padding:0;
	background-color:#DDD;
	}

	div {
	border:1px solid #B2B4B8;
	border-radius:10px;
	box-shadow:inset 0px 1px 0px rgba(0, 0, 0, 0.075), 0px 1px 0px rgba(255, 255, 255, 0.75);
	margin:10px;
	padding:0;
	}

	ul {
	list-style-type:none;
	font-family:"Helvetica";
	font-size:16px;
	margin:10px;
	padding:0;
	}

	ul li {
	background-color:#F7F7F7;
	padding:14px 10px;
	border-left:1px solid #B2B4B8;
	border-right:1px solid #B2B4B8;
	border-bottom:1px solid #CBCBCB;
	border-top:1px solid #FDFDFD;
	color:#385487;
	}

	ul li b {
	color:black;
	}

	ul li.value-one {
	text-align:right;
	}

	ul li.value-one b {
	float:left;
	}

	ul li:first-of-type {
	box-shadow:inset 0px 1px 0px rgba(0, 0, 0, 0.075);
	border-top:1px solid #B2B4B8;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
	}

	ul li:last-of-type {
	border-bottom:1px solid #B2B4B8;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	box-shadow:0px 1px 0px rgba(255, 255, 255, 0.75);
	}

	ul li:only-of-type {
	box-shadow:inset 0px 1px 0px rgba(0, 0, 0, 0.075), 0px 1px 0px rgba(255, 255, 255, 0.75);
	}

	ul p {
	text-shadow:0px 1px 0px rgba(255, 255, 255, 0.75);
	margin:15px 10px 7px 10px;
	font-weight:bold;
	color:rgb(77,87,104);
	}

	</style>

	</head>
	<body>

	<ul>
	<p>Key Value Cells</p>
	<li class="value-one"><b>Ringtone</b>Marimba</li>
	<li class="value-one"><b>Text Tone</b>Tri-Tone</li>
	<li class="value-one"><b>New Mail</b>Ding</li>
	</ul>

	<ul>
	<p>Plain Cells</p>
	<li><b>California</b></li>
	<li><b>Arizona</b></li>
	<li><b>North Carolina</b></li>
	<li><b>Virginia</b></li>
	<li><b>Florida</b></li>
	</ul>

	<ul class="UITableView">
	<p>Light Text Cells</p>
	<li>Cells can hold text of arbitrary length</li>
	<li>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed orci ligula. Vivamus non eros nec massa imperdiet imperdiet eu vel ipsum. Phasellus neque leo, lacinia sit amet mollis ut, facilisis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu libero nisl. Maecenas sed mauris augue. Ut suscipit, nunc id cursus ultrices, dolor dui facilisis neque, venenatis tincidunt eros justo eu tortor. Morbi pulvinar orci eu eros pharetra quis convallis nunc mattis. Duis enim odio, tincidunt a adipiscing vel, imperdiet quis massa.
	</li>
	</ul>

	</body>
	</html>