标签:收藏 新浪 复合 red 微软雅黑 width 天猫 margin ali
多段落分类样式:
h3{
color: green;
text-align: center;
}
h5{
color: red;
}
p{
color: blue;
text-indent: 2em; (首行缩进2个汉字)
font-size: 30px;
background-color: rgba(0,255,255,0.1);
font-family: 微软雅黑;
}
复合段落案例:
<style>
.box{
width:800px;
height:200px;
margin:0 auto;
}
.title{
text-align:center;
/*font-size:28px;
font-family:"微软雅黑";
font-weight:normal;*/
font:normal 28px "微软雅黑";
}
.sub_title{
text-align:center;
}
.sub_title .time{
color:#aabbcc;
font-size:14px;
}
.sub_title .nows_title{
color:#990000;
font-size:14px;
}
p{
text-indent:2em;
line-height:28px;
}
p span{
color:#3399cc;
}
input[type="button"]{
color: green;
font-weight:700;
}
input[type="text"]{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<div class="box">
<h2 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h2>
<div class="sub_title">
<span class="time">2014年07月16日20:11</span>
<span class="nows_title">新浪体育 评论中大奖(11人参与)</span>
<a href="#">收藏本文</a>
<input type="text" value="请输入查询条件">
<input type="button" value="搜索">
</div>
nav导航:
<style>
.nav{height: 50px;}</style>
a.one{}
a:hover{}
<div class="nav">
<a href="#" class="one" title="天猫">天猫</a>
彩色背景导航:
<head>
<style>
.one{background:url(images/bg1.png);}
.one:hover{background:url(images/bg5.png);}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
</body>
标签:收藏 新浪 复合 red 微软雅黑 width 天猫 margin ali
原文地址:https://www.cnblogs.com/zhuxiushi/p/9038693.html