分类目录归档:CSS

CSS

如何同时为多个css样式编写css代码呢?


摘要:
下文讲述同时为多个css样式编写css代码的方法分享,如下所示:


实现思路:
使用逗号将多个css样式分隔,然后就可以实现同时为css编写相同的样式代码,如下所示:

例:
为下面class a,b,c设置

 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com"> 
  <title>猫猫教程(www.maomao365.com)
 ---同时为多个class样式设置相同的css代码的方法分享
</title>
<style>
 .a,.b,.c{
   color:red;
}
</style>
 </head>
 <body>
   <p class="a">猫猫教程-a</p>
   <p class="b">猫猫教程-b</p>
   <p class="c">猫猫教程-c</p>
 </body>
</html>
css 为不同的className编写相同css代码的方法分享

css 为不同的className编写相同css代码的方法分享

css 如何为“一条边框显示不同的颜色”呢?


摘要:
下文讲述使用css为一条边框设置不同的颜色的功能简介说明,如下所示:

如:
为一个div的底部边框设置四段不同的颜色

实现思路:
1.编写一个div ,并将其定位到底部DIV
2.在底部DIV中,设置四个DIV,并为这些子DIV设置为宽度为25%和不同的border颜色
采用以上方式,使用背景色模拟实现一个边框不同的颜色

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com"> 
  <title>猫猫教程(www.maomao365.com)
---css 一条边框显示不同颜色的设置方法分享
</title>
<style>
 .main{
 
   position:relative;
   width:280px;
   height:300px;
}
 
.content{
   background-color:blue;
   color:white;font-weight:bold;
}

  /*元素底部对齐*/
  .bottom
   {
     position:absolute;  
     bottom: 0px;   
     width:100%;
     height:3px; /*边框宽度为3px*/ 
     overflow:hidden;
   }
 
    .bottomA,.bottomB,.bottomC,.bottomD{float:left;width:25%;height:3px;}/*边框宽度为3px*/
  
     /*模拟为底部设置不同的颜色--作为边框信息*/
    .bottomA{background-color:red;}
    .bottomB{background-color:black;}
    .bottomC{background-color:green;}
    .bottomD{background-color:blue;}

</style>
 </head>
 <body>
 <p>一条边框显示不同颜色的方法分享</p>

<div class="main">
  
 <div class="content">
  这里是内容区域<br />
  猫猫教程--1<br />
  猫猫教程--2<br />
  猫猫教程--3<br />
  猫猫教程--4<br />
  猫猫教程--5<br /> 
</div>
 
   
<div class="bottom">
  <div class="bottomA"></div>
  <div  class="bottomB"></div>
  <div  class="bottomC"></div>
  <div  class="bottomD"></div>
</div>  
</div>
 </body>
</html>

相关阅读:
html中使用css 将一个DIV处于容器的底部对齐

css_为一条边框设置不同颜色的方法分享

css_为一条边框设置不同颜色的方法分享

css 如何绘制一个浮动的提示框呢?


摘要:
下文讲述使用css绘制一个浮动的提示框的方法分享,如下所示:


实现思路:
1.绘制圆角DIV
2.使用伪元素为三角形绘制向下箭头

例:
在html中绘制文本框

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猫猫教程(www.maomao365.com)
	---文本提示框绘制方法分享
	</title>
    <style>
        .dialog{
            display:inline-block;
            padding:10px;
            border-radius: 4px;
            z-index: 2000;
            font-size: 12px;
            border:1px solid #303133;
            position: relative;
            top: 30px;
            left:50px;
        }
        .dialog .dialog_ico{
            position: relative;
            top: -31px;
        }

        .dialog_ico:after,.dialog_ico:before{
            content:'';
            display:block;
            position:absolute;
            border-style:solid;
            border-width:10px;
        }
        .dialog_ico:before{
            border-color:black transparent transparent  transparent;
            left:20px;
            top:42px;
        }
        .dialog_ico:after{
            border-color:#fff transparent transparent  transparent;
            left:20px;
            top:41px;
        }
    </style>
</head>
<body>
    <div class="dialog">
        <span class="dialog_text">猫猫教程</span>
        <div class="dialog_ico"></div>
    </div>
</body>
</html>
css 绘制提示框的方法分享

css 绘制提示框的方法分享