码迷,mamicode.com
首页 > Web开发 > 详细

CSS笔记——第一阶段

时间:2018-05-15 00:31:29      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:收藏   新浪   复合   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>

CSS笔记——第一阶段

标签:收藏   新浪   复合   red   微软雅黑   width   天猫   margin   ali   

原文地址:https://www.cnblogs.com/zhuxiushi/p/9038693.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!