css样式基础部分整理

最新推荐文章于 2022-09-22 10:38:28 发布

路柳狂花

最新推荐文章于 2022-09-22 10:38:28 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： # 前端

本文链接：https://blog.youkuaiyun.com/ab31ab/article/details/83824688

前端专栏收录该内容

16 篇文章

订阅专栏

菜鸟教程https://www.runoob.com/css/css-tooltip.html

1.动画效果

animation: 1s linear infinite loadingCircle;

自定义动画

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成

2.手机自适应

当宽度小于某尺寸时，显示的样式，可用于web浏览器端

@media screen and (max-width: 767px){

}

3.列表

/**无序
ul.a {list-style-type: circle;}
/**有序
ol.d {list-style-type: lower-alpha;}
/**图像
list-style-image: url('sqpurple.gif');

4.下拉菜单

<style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

relative：相对定位会在标准流当中占位置

absolute：绝对定位不会在标准流当中占位置

绝对定位是相对于距离它最近的已经定位的祖先元素 进行定位

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。

注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单

提示工具一样的原理，显示用visibility: visible;前者在页面不占有位置，后者占有位置。

5.导航栏的分隔线

添加分隔线

li { border-right: 1px solid #bbb; }

li:last-child { border-right: none; }

6.图片的透明效果

Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明

7.搜索框动画

主要是想把这个记录下来，在我还是一个菜鸟的时候（虽然现在也是），用ionic做手机开发，

前端写了一个带动画的搜索框，一直没研究清楚（是根本没想过去研究，而且不懂css，没想过动画这玩意），没想到会在菜鸟上看到完整的解决方案，记录一下。

1.属性选择器

具有特定属性的HTML元素样式不仅仅是class和id。

例如

下面的例子是把包含标题（title）的所有元素变为蓝色：

实例

[title]

{ color:blue; }

用表单举个列子

<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('https://static.runoob.com/images/mix/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>

<p>搜索输入框带动画:</p>

<form>
  <input type="text" name="search" placeholder="搜索..">
</form>