Skip to content

Instantly share code, notes, and snippets.

@charleehu

charleehu/tie.html

Last active November 30, 2015 07:39
Show Gist options
  • Save charleehu/f25ca384c406b91fa836 to your computer and use it in GitHub Desktop.
Save charleehu/f25ca384c406b91fa836 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我是标题</title>
<style>
body {
padding-top: 2.5em;
background-color: #666;
color: #333;
font-size: 84%;
font-family: "微软雅黑", "Yahei Mono";
}
a {
color: #fff;
position:absolute;
right: 1%;
top: 5px;
}
.title {
margin: 15px 0;
text-align:center;
}
.page {
width: 600px;
line-height: 30px;
margin: 0 auto;
padding: 15px 0 29px;
background-color: #f4f39e;
-moz-border-radius-bottomleft: 20px 500px;
-moz-border-radius-bottomright: 500px 30px;
-moz-border-radius-topright: 5px 100px;
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 30px;
-webkit-border-top-right-radius: 5px 100px;
border-bottom-left-radius: 20px 500px;
border-bottom-right-radius: 500px 30px;
border-top-right-radius: 5px 100px;
background:
-moz-repeating-linear-gradient(
top,
#fcf59b,
#fcf59b 29px,
#81cbbc 30px
);
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#81cbbc),
color-stop(2%, #fcf59b)
);
background:
repeating-linear-gradient(
top,
#fcf59b,
#fcf59b 29px,
#81cbbc 30px
);
-webkit-background-size: 100% 30px;
-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #F6EF97;
position: relative;
}
.page:after {
width: 180px;
height: 30px;
content: " ";
margin-left: -90px;
border: 1px solid rgba(200, 200, 200, .8);
background: rgba(254, 254, 254, .6);
-moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
position: absolute;
left: 50%;
top: -15px;
}
.page p {
margin: 30px 0;
padding: 0 2em;
}
#to {
}
#from {
text-align:right;
}
</style>
</head>
<body>
<a href="http://charleehu.me">« return</a>
<div class="page">
<h2 class="title">标题</h2>
<p id="to">XX:</p>
<p>我是内容<p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment