【前端】实践中常用css样式总结

最新推荐文章于 2024-07-27 00:11:03 发布

loyd3

最新推荐文章于 2024-07-27 00:11:03 发布

阅读量335

点赞数

分类专栏：前端实用工具集文章标签： CSS drop-shadow

本文链接：https://blog.csdn.net/loyd3/article/details/108149311

版权

前端实用工具集专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Eric Reset Css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

清除浮动

.clearfix{
	*zoom:1;
}
.clearfix:before,
.clearfix:after{
	display: table;
	content: "";
}
.clearfix:after{
	clear: both;
}

文字隐藏

.reader-main-action li{
	text-indent: -9999px;
}

实现下拉菜单的箭头

.navbar .nav>li>.dropdown-menu:before{
	position: absolute;
	top: -7px;
	left: 9px;
	display: inline-block;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #ccc;
	border-left: 7px solid transparent;
	border-bottom-color: rgba(0,0,0.2);
	content: '';
}

.navbar .nav>li>.dropdown-menu:after{
	position: absolute;
	top: -6px;
	left: 10px;
	display: inline-block;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #fff;
	border-left: 6px solid transparent;
	content: '';
}

JS排序方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/css/style.css" rel="stylesheet">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-for</title>
</head>
<body>
    <h1>v-for</h1>
    <hr>
    <div id="app">
        <ol>
            <li v-for="item in sortitems">
                {{item}}
            </li>
            <li v-for="(student,index) in sortstudents">
                {{index+1}}:{{student.name}}-{{student.age}}
            </li>
        </ol>

    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el:"#app",
            data:{
                items:[3,24,32,2,22,37],
                students:[
                    {name:'yan',age:32},
                    {name:'joe',age:12},
                    {name:'loyd',age:223},
                ]
            },
            computed:{
                sortitems:function(){
                    return this.items.sort(sortNumber);
                },
                sortstudents:function(){
                    return sortByKey(this.students,'age');
                }
            }
        });
        // 该方法作为参数传入sort()方法中
        function sortNumber(a,b){
            return a-b;
        }

        //将要排序的列表和需要排序的键传入该方法，然后直接返回该方法
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        }
    </script>
</body>
</html>

设置超出文本显示

.textOverflow{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;   /*clip 剪切文本  ellipsis 省略号  string  使用给定的字符串*/
}

多行文本溢出显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

用filter:drop-shadow实现尖角带阴影的提示面板

/*CSS代码：*/
.box {
    margin: 40px; padding: 50px;
    background-color: #fff;
    position: relative;
    font-size: 24px;
}
.cor {
    position: absolute;
    left: -40px;
    widtd: 0; height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-right-color: #fff;
}
.box-shadow {
    box-shadow: 5px 5px 10px black;
}
.drop-shadow {
    filter: drop-shadow(5px 5px 10px black);
}
/*HTML代码：*/
<div class="box box-shadow">
    <i class="cor"></i>
    box-shadow
</div>
<div class="box drop-shadow">
    <i class="cor"></i>
    filter: drop-shadow
</div>

使用了CSS3滤镜filter中的drop-shadow改变svg img的颜色

/*HTML代码：*/
<section>
  <div className={styles.image}>
    <img src={item.icon} alt="Advantage" />
  </div>
  <p>{item.line1}</p>
  <p>{item.line2}</p>
</section>

/* CSS代码：*/
section{
      .image{
        display: inline-block;
        overflow: hidden;
      }
      img{
        position: relative;
        left: 0;
        margin-bottom: .1rem;
        filter: drop-shadow(#ffffff 80px 0);　　　　　　　　
         border-left: 30px solid transparent;　 //防止drop-shadow主体超出视线隐藏后阴影消失　　　 
         border-right: 30px solid transparent;
} &:hover{ background-color: gray; img{ left: -80px; } } }

主要的实现原理就是设置需要的阴影效果，并隐藏，hover时切换显示就好。

css绝对定位居中

使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

让position: fixed定位的DIV元素居中

.zxbm_xf{
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin:auto;
}

浮动后的 `<li>` 在 `<ul>` 中居中显示

html标签

<div id="footer">
      <ul>
            <li>内容</li>
      </ul>
</div>

css样式

#footer {
    text-align: center;
}
#footer ul {
    display: inline-block;
    overflow: auto;
}

#footer ul li {
    display: inline;
    float: left;
}

css cursor 鼠标样式

cursor: pointer; // 光标呈现为指示链接的指针（一只手）
cursor:no-drop; //是一个红色的圈加一个斜杠，表示禁止的意思
cursor:not-allowed; //是一个红色的圈加一个斜杠，表示禁止的意思
cursor: move; //指示某对象可被移动
cursor: help; //指示可用的帮助
在这里插入图片描述

loyd3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】实践中常用css样式总结

Eric Reset Css/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del,
复制链接

扫一扫