分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

CSS笔记——第一阶段

发布时间:2023-09-06 01:54责任编辑:顾先生关键词:CSS

多段落分类样式:
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笔记——第一阶段

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved