css权威指南

by xu xiaofei

HTML

<h1>hello <span>fucking </span>world</h1>
<ul>
    <li>主页</li>
</ul>
<div>
    <p class='autoLeft'>this is a fucking paragraph.</p>
</div>

<div class="wider-inner">
    <p>
        this is another funcking paragraph.
    </p>
</div>
<p class="span-outer">
<span>this is a span<strong>and this is some strong words </strong></span>
this is some word out of span
</p>
<input type="date">
<input type="checkbox">复选框

CSS

* {
 	/* background:url(https://s-media-cache-ak0.pinimg.com/564x/18/d6/f6/18d6f601f79917498df187f1c760143d.jpg) no-repeat fixed center; */
     font-family: cursive;
     font-size: 18px;
     /* border: 1px solid #ccc; */
 }
 
 h1 {
     color: olive;
     font-weight: bold;
 }
 
 h1 span {
     display: inline;
     background: tomato;
     padding: 50px;
     margin: 100px;
 }
 
 ul li {
 	border:1px solid #ccc;
     font: caption;
 }
 
 .autoLeft {
     background: tomato;
     margin-left: auto;
     width: 50px;
 }
 
 .wider-inner {
     width: 200px;
 }
 
 .wider-inner p {
     width: 150px;
     margin-left: auto;
     margin-right: 100px;
     background: maron;
 }
 
 .span-outer {
     background: red;
	 margin-left:50px;
	 border:2px dashed #fff;
	 padding-left:50px;
	 
 }
 
 .span-outer span {
     background: silver;
     padding: 10px;
     margin: 50px 0;
	 line-height:20px;
	 font-size:12px;
	 border:3px dashed red;
	 /* height:100px; */
	 /* margin-left:100px; */
 }
 .span-outer span strong{
 	float:left;
 }
input{
	padding:5px;
	background:yellow;
	color:navy;
	border:1px solid;
}
input[type="checkbox"]{
	color:yellow;
	background:yellow;
	border:5px solid;
}