记录一些css的具体应用

最新推荐文章于 2023-11-30 15:06:15 发布

Taojiajia0216

最新推荐文章于 2023-11-30 15:06:15 发布

阅读量192

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/weixin_47334041/article/details/119675366

版权

一.css选择器

(1).css选择器伪类的使用：

<style>
#right ul li:first-child{
	  background-color: darkred;
	  width:300px;
  }
  #right ul li:last-child{
	  background-color: coral;
	  width:250px;
  }
  #right ul li:nth-child(2){
	 background-color: forestgreen;
	 width:270px;
  }
</style>

(2).怎么加类和id：

//类选择器//<span class="f1" >我们都是发明家</span>
//id选择器//<span id="f1" >我们都是发明家</span>

(3).css选择器标签table(表格)的使用(引申效果):

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
如何实现合并单元格
<table border="1">
<tr>
  <th colspan="2">运动</th>横着的合并
  <th colspan="2">音乐</th>
</tr>
 
<tr>
  <td rowspan="3">球类</td>竖着的合并
  <td>乒乓球</td>
  <td rowspan="3">声乐</td>
  <td>美声</td>
</tr>

(4).gt选择器

:gt() 选择器选取 index 值大于指定数字的元素。
index 值从 0 开始。
语法：$(":gt(index)")
示例：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("tr:gt(1)").css("background-color", "lightblue");/*index值决定了选择器的作用范围，第一个是0，所以现在当index值为1的时候，上面两行是白的，以下的是蓝的*/
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>

<table border="1">
  <tr>
    <th>序号</th>
    <th>站点名</th>
    <th>网址</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Google</td>
    <td>google.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Runoob</td>
    <td>runoob.com</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Taobao</td>
    <td>taobao.com</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Baidu</td>
    <td>baidu.com</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Sina</td>
    <td>sina.com.cn</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Facebook</td>
    <td>facebook.com</td>
  </tr>
  <tr>
    <td>7</td>
    <td>twitter</td>
    <td>twitter.com</td>
  </tr>
  <tr>
    <td>8</td>
    <td>youtube</td>
    <td>youtube.com</td>
  </tr>
  
</table>

</body>

二.css属性

(1).css box-shadow的使用(引申效果):

<style>
.spread-negative{
            box-shadow: 0 0 20px -5px ;
            /* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/
    }
</style>

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
box-shadow: offset-x offset-y  blur         spread    color      inset;
词解释：blur:模糊 spread:伸展 inset:内凹

1.css3如何添加多层阴影：
box-shadow:  0px 0px 00px 10px #f00,0px 0px 00px 20px #fc0 , 0px 0px 00px 30px #ff0,
       0px 0px 00px 40px #0f0, 0px 0px 00px 50px #0fe, 0px 0px 00px 60px #00f, 0px 0px 00px 70px #f0f ;  
————————————————
版权声明：本文为CSDN博主「南征北战-」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40910098/article/details/78601175

2.css3添加透明阴影：
box-shadow: 0 -2px 5px 2px rgba(0,0,0,0.5) inset;//insert：有内凹效果
box-shadow: 0 -2px 5px 2px rgba(0,0,0,0.5) ;

(2).transition(过渡效果)的兼容性处理：

<style>
a
{
   color: #c52d2f;
   transition: color 3s,background-color 3s;
   /*兼容性处理,IE9以下不支持*/
    -webkit-transition: color 3s,background-color 3s;//谷歌、Safari浏览器
    -moz-transition: color 3s,background-color 3s;//火狐浏览器
    -o-transition: color 3s,background-color 3s;//欧朋浏览器
}
</style>

三.css实现具体效果

(1).去掉网页的横向滚动条，竖向滚动条

1.让竖条没有： 
<body style=`overflow:-Scroll;overflow-y:hidden` >   
</body>   

2.让横条没有： 
<body style=`overflow:-Scroll;overflow-x:hidden` >   
</body>   

4.火狐底部滚动条不显示： 
html { overflow:-moz-scrollbars-vertical; }

(2).让div倾斜显示（可以调整角度）

div倾斜：

<style>
#d1{
		   width:200px;
		   height:200px;
		   border:red 5px solid;
		   transform: rotate(10deg);
		   margin-top: 10%;
		   margin-left:5%;
	   }
    </style>
</head>
 <body>
	<div id="d1">
		<img src="img/p744025514.jpg" style="width:100%;">
		<p>&nbsp&nbsp;你好乔安你好乔安你好乔安</p>
	</div>
	<script>
	</script>
</body>
 不同浏览器的实现代码:
#id{position:absolute; top:37px; left:34px; z-index:9;

    transform: rotate(6.5deg);      
    -o-transform:rotate(6.5deg);    
    -webkit-transform:rotate(6.5deg);
    -moz-transform:rotate(6.5deg);  
}

(3).实现竖着的hr

<hr size=200 width=1>

(4).实现线性渐变

从上到下的线性渐变：

#grad{background-image:linear-gradient(#e66465, #9198e5); }

(5).input组件password显示提示内容

用input的属性placehoder，不要用value

(6).实现div在div中垂直水平居中

利用定位及margin:auto实现
.parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                position:relative;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;

(7).锚点链接（引申效果）

<!--锚点链接，点击“我来找你啦”，在同一页面跳转到指定位置“我在这里”-->
<a href="#ch">我来找你啦</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a name="ch">我在这里<a>
<!--超链接跳转到不同页面的锚点链接-->
  比如要从index.html页面的某个超链接调转到single.html页面的底部，则此时可在single.html页面底部添加一个锚点。然后在index.html的超链接里加上此锚点的名称即可。
  类似：
index.html页面的超链接：

<a href="single.html#CompanyProfile">企业概况</a>

single.html页面的锚点：

<h2><a name="CompanyProfile">企业概况</a></h2>

(8).<div class="clear"></div>怎么用

用来清除浮动的，浮动就是你给html元素加了float样式后，那么这个元素在文档中是不占文档流的。那样下面的元素就可能跑到你浮动元素的位置，这样文档排版会乱掉。clear的意思就是不靠近浮动元素的样子了。这种情况下往往需要像你这样加一个空的div来占位。

四.css函数

(1).hsla() 函数

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
<style>
#p1 {background-color:hsl(120,100%,50%,0.3);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%,0.3);} /* 浅绿  */
#p3 {background-color:hsl(120,100%,25%,0.3);} /* 暗绿  */
#p4 {background-color:hsl(120,60%,70%,0.3);} /* 柔和的绿色 */
</style>
HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
透明度（A） 取值 0~1 之间， 代表透明度。

五.css新知识

(1).@keyframes动画(类似transfrom)

一、transform 和@keyframes动画的区别：

@keyframes动画是循环的，而transform 只执行一遍.

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

例1.名字为gif的@keyframes ，动画完成需要的总时长为1.4s,刚开始的时候图片旋转为0度，动画完成的时候图片旋转360度

@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

@keyframes 它定义的动画并不直接执行，需要借助animation来运转。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。百分比是指动画完成一遍的时间长度的的百分比，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes animationname {keyframes-selector {css-styles;}}

<!--例1-->
<style>
.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>
例2：名字为mymove的@keyframes ，动画完成需要的总时长为1s,刚开始的时候图片距顶部距离为0px，0.25s后图片距顶部距离为200px，0.5s后图片距顶部的距离为100px，以此类推
<style>
.img {
    width: 120px;
    height: 120px;
    background: url(../images/icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: mymove 1s infinite linear;
}
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}
</style>
例3.在一个动画中改变多个 CSS 样式：
<style>

@keyframes mymove
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
</style>

(2).全新的sass

(3).CSS justify-content 属性

在弹性盒对象的 <div> 元素中的各项周围留有空白：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>

Taojiajia0216

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一些css的具体应用

一.css选择器(1).css选择器伪类的使用：<style>#right ul li:first-child{ background-color: darkred; width:300px; } #right ul li:last-child{ background-color: coral; width:250px; } #right ul li:nth-child(2){ background-color: forestgreen;
复制链接

扫一扫