Css 基本使用
Last updated
Last updated
<div class="content">
<h1 class="title-1">H1</h1>
<h2 class="title-2">H2</h2>
<h3 class="title-3">H3</h3>
</div>.title-1{
background: yellow;
}
.title-2{
background: #ddd;
}
.title-3{
background:red;
}
<div class="content">
<h1 id="Title-1">H1</h1>
<h2 id="Title-2">H2</h2>
<h3 id="Title-3">H3</h3>
</div>.title-1{
background: yellow;
}
.title-2{
background: #ddd;
}
.title-3{
background:red;
}
<ul class="list1">
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ul>
<ul class="list2">
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ul>
<ul class="list3">
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ul> .list1 li{
list-style: decimal;
}
.list2 li{
list-style: square;
}
.list3 li{
list-style: lower-alpha;
} <div class="img-inner">
<img class="img-resp" src="images/reason1" >
<img class="img-resp" src="images/reason2" alt="" >
<img class="img-resp" src="images/reason3" >
</div>.img-resp{
width: 25%;
display: block;
padding: 10px;
margin: 10px;
border: solid 1px #ddd;
}
.img-resp[alt]{
border-color:#000;
} <a href="javascript:;">link</a> a{
display: block;
width: 500px;
padding: 1em;
margin-left: auto;
margin-right: auto;
border: 5px;
}
a:link{
color:#fff;
background-color: #269aff;
}
a:visited{
color:#fff;
background-color: #027;
}
a:hover{
color:#a0b9ff;
background-color: #4c69ba;
}
a:active{
color:#fff;
background-color: #3b55a0;
}
a:focus{
color:#000;
background-color: #ccc;
}