populus
populus

用一个div及其伪类去完成各种css图形(The Shapes of CSS)

css可以渲染各种图形。我们只需要设定一个块级元素最基础的width和height属性值，就可以实现正方形、长方形。border-radius属性可以实现圆形、椭圆等，如果再加上伪类元素及其它属性，则又有更多可能。重点是我们要学会拆分，将复杂的图形拆为简单的四边形或三角形，还要计算好图形的边边角角该如何取值。

预览地址https://nidusp.github.io/css3-demo.github.io/

:root {
    --base: aqua;
    --normal: darkorange;
    --triangle: deepskyblue;
    --strange: forestgreen;
}
.wrapper {
    min-height: 100vh;
    background-color: var(--base);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

// 简单的四边形及border-radius属性变成的圆或椭圆
.square {
    width: 5rem;
    height: 5rem;
}

.rectangle {
    width: 6rem;
    height: 3rem;
}

.circle{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}

.oval {
    width: 6rem;
    height: 3rem;
    border-radius: 50%;
    border-radius: 3rem/ 1.5rem;
    border-radius: 3rem 3rem / 1.5rem 1.5rem;
}

// 伪类与标签垂直以绘制红十字
.cross {
    background-color: var(--normal);
    height: 5em;
    position: relative;
    width: 1em;
}
.cross::after {
    background-color: var(--normal);
    content: "";
    width: 5em;
    height: 1em;
    position: absolute;
    left: -2em;
    top: 2em;
}

.cone {
    width: 0;
    height: 0;
    border-left: 3.5em solid transparent;
    border-right: 3.5em solid transparent;
    border-top: 5em solid var(--normal);
    border-radius: 50%;
    background-color: transparent;
}


// 利用定位box-shadow属性画一个月亮
.moon {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    box-shadow: 1em 1em 0 0  var(--normal);
    background-color: transparent;
}

// 利用标签画镜片，伪类画握把，组合成放大镜
.magnifying-glass {
    font-size: 10em;
    width: 0.4em;
    height: 0.4em;
    border: 0.1em solid var(--normal);
    position: relative;
    border-radius: 0.35em;
    background-color: transparent;
}
.magnifying-glass::before {
    content: "";
    position: absolute;
    right: -0.25em;
    bottom: -0.1em;
    background-color: var(--normal);
    width: 0.35em;
    height: 0.08em;
    transform: rotate(45deg);
}

.chevron {
    position: relative;
    text-align: center;
    padding: 12px;
    margin-bottom: 6px;
    height: 60px;
    width: 200px;
    background-color: transparent;
}
.chevron::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background-color: var(--normal);
    transform: skew(0deg, 8deg);
}
.chevron::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background-color: var(--normal);
    transform: skew(0deg, -8deg);
}

.tv {
    position: relative;
    width: 200px;
    height: 150px;
    margin: 20px 0;
    background-color: var(--normal);
    border-radius: 50% / 10%;
    color: white;
    text-align: center;
    text-indent: .1em;
}
.tv::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: -5%;
    left: -5%;
    background-color: inherit;
    border-radius: 5% / 50%;
}



.base {
    background-color: var(--triangle);
    height: 2em;
    position: relative;
    width: 8em;
}
.base::before {
    border-bottom: 3em solid var(--triangle);
    border-left: 4em solid transparent;
    border-right: 4em solid transparent;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: -3em;
    width: 0;
}

.flag {
    width: 110px;
    height: 56px;
    box-sizing: content-box;
    padding-top: 15px;
    position: relative;
    background-color: var(--triangle);
}
.flag:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 13px solid var(--base);
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
}

.curvedarrow {
    position: relative;
    width: 0;
    height: 0;
    border-top: .75em solid transparent;
    border-right: .75em solid deeppink;
    transform: rotate(10deg);
    background-color: transparent;
}
.curvedarrow:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: .25em solid deeppink;
    border-radius: 1em 0 0 0;
    top: -.9em;
    left: -0.6em;
    width: 1em;
    height: 1em;
    transform: rotate(45deg);
}

.trapezoid {
    border-bottom: 6em solid var(--triangle);
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
    height: 0;
    width: 6em;
    background-color: transparent;
    position: relative;
}
.trapezoid::after {
    content: "";
    height: 6em;
    width: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(30deg);
    background-color: var(--strange);
}
.trapezoid::after {
    content: "";
    height: 6em;
    width: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid var(--strange);
    background-color: transparent;
    position: relative;
}
.star-six:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid  var(--strange);
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}

.star-five {
    position: relative;
    display: block;
    color: var(--strange);
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid var(--strange);
    border-left: 100px solid transparent;
    background-color: transparent;
    transform: rotate(35deg) scale(.65);
}
.star-five::before {
    border-bottom: 80px solid var(--strange);
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    transform: rotate(-35deg);
}
.star-five::after {
    position: absolute;
    display: block;
    color: var(--strange);
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid var(--strange);
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
    content: '';
}


.pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: sienna transparent;
    background-color: transparent;
}
.pentagon::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent sienna;
}

.hexagon {
    width: 100px;
    height: 55px;
    color: cadetblue;
    background-color: currentColor;
    position: relative;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid currentColor;
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid currentColor;
}


.octagon {
    width: 100px;
    height: 100px;
    color: black;
    background-color: currentColor;
    position: relative;
}
.octagon:before {
    content: "";
    width: 100px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid currentColor;
    border-left: 29px solid var(--base);
    border-right: 29px solid var(--base);
    box-sizing: border-box;
}
.octagon:after {
    content: "";
    width: 100px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid currentColor;
    border-left: 29px solid var(--base);
    border-right: 29px solid var(--base);
    box-sizing: border-box;
}


.heart {
    position: relative;
    width: 5em;
    height: 4em;
    background-color: transparent;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 2.5em;
    top: 0;
    width: 2.5em;
    height: 4em;
    background: darkred;
    border-radius: 2.5em 2.5em 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}


.egg {
    width: 6em;
    height: 8em;
    background-color: currentColor;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.pacman {
    width: 0;
    height: 0;
    color: black;
    border-right: 3.6em solid transparent;
    border-top: 3.6em solid currentColor;
    border-left: 3.6em solid currentColor;
    border-bottom: 3.6em solid currentColor;
    border-radius: 50%;
    background-color: var(--base);
}

.talkbubble {
    width: 8em;
    height: 6em;
    color: chartreuse;
    background-color: currentColor;
    border-radius: 10px;
    position: relative;
}
.talkbubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 2em;
    width: 0;
    height: 0;
    border-top: 1em solid transparent;
    border-right: 2em solid currentColor;
    border-bottom: 1em solid transparent;
}

.burst-12 {
    color: var(--strange);
    background-color: currentColor;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
.burst-12:before, .burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background-color: currentColor;
    transform: rotate(30deg);
}
.burst-12:after {
    transform: rotate(60deg);
}

.burst-8 {
    color: var(--strange);
    background-color: currentColor;
    width: 5em;
    height: 5em;
    position: relative;
    text-align: center;
    transform: rotate(20deg);
}
.burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: currentColor;
    transform: rotate(135deg);
    transform-origin: center center;
}

.badge-ribbon {
    position: relative;
    background-color: var(--strange);
    height: 6em;
    width: 6em;
    border-radius: 50%;
}
.badge-ribbon:before,
.badge-ribbon:after {
    content: '';
    position: absolute;
    border-bottom: 70px solid var(--strange);
    border-left: 2.5em solid transparent;
    border-right: 2.5em solid transparent;
    top: 70px;
    left: -10px;
    transform: rotate(-140deg);
}
.badge-ribbon:after {
    left: auto;
    right: -10px;
    transform: rotate(140deg);
}

利用border属性，渲染三角形

// 左右边透明，底边有颜色，则是向上的三角
.triangle-up {
    width: 0;
    height: 0;
    border-bottom: 6em solid var(--triangle);
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    background-color: transparent;
}
// 左右边透明，顶边有颜色，则是向下的三角
.triangle-down {
    width: 0;
    height: 0;
    border-top: 6em solid var(--triangle);
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    background-color: transparent;
}
// 上下边透明，右边有颜色，则是向左的三角
.triangle-left {
    width: 0;
    height: 0;
    border-top: 3em solid transparent;
    border-bottom: 3em solid transparent;
    border-right: 6em solid var(--triangle);
    background-color: transparent;
}
// 上下边透明，左边有颜色，则是向右的三角
.triangle-right {
    width: 0;
    height: 0;
    border-top: 3em solid transparent;
    border-bottom: 3em solid transparent;
    border-left: 6em solid var(--triangle);
    background-color: transparent;
}


// 一边透明，任一邻边有颜色，则是直角三角形
.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 5em solid var(--triangle);
    border-right: 5em solid transparent;
    background-color: transparent;
}
.triangle-topright {
    width: 0;
    height: 0;
    border-top: 5em solid var(--triangle);
    border-left: 5em solid transparent;
    background-color: transparent;
}
.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 5em solid var(--triangle);
    border-left: 5em solid transparent;
    background-color: transparent;
}
.triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 5em solid var(--triangle);
    border-right: 5em solid transparent;
    background-color: transparent;
}

三角形拼接成菱形等各种形状

.pointer {
    width: 200px;
    height: 40px;
    position: relative;
    background-color: var(--strange);
}
.pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid var(--base);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.pointer::before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid  var(--strange);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

//
.diamond {
    color:  var(--triangle);
    width: 0;
    height: 0;
    border: 3.5em solid transparent;
    border-bottom-color: currentColor;
    position: relative;
    top: -3.5em;
    background-color: transparent;
}
.diamond:after {
    content: '';
    position: absolute;
    left: -3.5em;
    top: 3.5em;
    width: 0;
    height: 0;
    border: 3.5em solid transparent;
    border-top-color: currentColor;
}

//
.diamond-shield {
    color:  var(--triangle);
    width: 0;
    height: 0;
    border: 3em solid transparent;
    border-bottom: 1em solid;
    position: relative;
    top: -3em;
    background-color: transparent;
}
.diamond-shield::after {
    content: '';
    position: absolute;
    left: -3em;
    top: 1em;
    width: 0;
    height: 0;
    border: 3em solid transparent;
    border-top: 4.5em solid;
}

.diamond-narrow {
    width: 0;
    height: 0;
    color:  var(--triangle);
    border: 3em solid transparent;
    border-bottom: 4em solid;
    position: relative;
    top: -3em;
    background-color: transparent;
}
.diamond-narrow:after {
    content: '';
    position: absolute;
    left: -3em;
    top: 4em;
    width: 0;
    height: 0;
    border: 3em solid transparent;
    border-top: 4em solid;
}

// 梯形+三角形=钻石形状
.cut-diamond {
    margin-top: -3em;
    color: var(--triangle);
    border-style: solid;
    border-color: transparent transparent currentColor transparent;
    border-width: 0 2em 2em 2em;
    height: 0;
    width: 4em;
    position: relative;
    background-color: transparent;
}
.cut-diamond::after {
    content: "";
    position: absolute;
    top: 2em;
    left: -2em;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: currentColor transparent transparent transparent;
    border-width: 6em 4em 0 4em;
}

利用伪类与标签的搭配，形成各种图案

无穷符号∞

很简单，就是伪类渲染两个对称的半圆及直角拼接在一起。调整好值即可

.infinity {
    position: relative;
    width: 11em;
    height: 6em;
    background-color: transparent;
}
.infinity:before,
.infinity:after {
    content: "";
    box-sizing: content-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    border: 1em solid #000;
    border-radius: 2.5em 2.5em 0 2.5em;
    transform: rotate(-45deg);
}
.infinity:after {
    left: auto;
    right: 0;
    border-radius: 2.5em 2.5em 2.5em 0;
    transform: rotate(45deg);
}

facebook-icon

主体是一个“f”字母，再加一个背景即可

// 利用伪类画一个“f”，错位形成“facebook-icon”
.facebook-icon {
    background-color: var(--normal);
    text-indent: -999em;
    width: 6em;
    height: 6.5em;
    border-radius: .5em;
    position: relative;
    overflow: hidden;
    border: 1em solid var(--normal);
    border-bottom: 0;
}
.facebook-icon::before {
    content: "";
    position: absolute;
    background-color: var(--normal);
    width: 2.5em;
    height: 5.6em;
    bottom: -1.8em;
    right: -2.2em;
    border: 1.25em solid #eee;
    border-radius: 1.5em;
}

.facebook-icon::after {
    content: "";
    position: absolute;
    top: 2.8em;
    width: 3.6em;
    height: 1.2em;
    background: #eee;
    right: .2em;
}

画一个锁

利用border-radius画一个半圆作为锁头，再画一个锁芯

.lock {
    font-size: .35rem;
    position: relative;
    width: 18em;
    height: 13em;
    border-radius: 2em;
    top: 10em;
    box-sizing: border-box;
    border: 3.5em solid var(--strange);
    border-right-width: 7.5em;
    border-left-width: 7.5em;
    margin: 0 0 6rem 0;
    background-color: transparent;
}
.lock::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 2.5em solid var(--strange);
    width: 14em;
    height: 12em;
    left: 50%;
    margin-left: -7em;
    top: -12em;
    border-top-left-radius: 7em;
    border-top-right-radius: 7em;
}
.lock::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 1em solid var(--strange);
    width: 5em;
    height: 8em;
    border-radius: 2.5em;
    left: 50%;
    top: -1em;
    margin-left: -2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

阴阳太极图

重点是利用两个伪类分别渲染两极的“小圆”及“中心”，还有标签border-color和background-color的属性渲染两极。


.yin-yang {
    width: 6em;
    height: 3em;
    background-color: #fff;
    color: #000;
    border: 0em solid;
    border-bottom-width: 3em;
    border-radius: 100%;
    position: relative;
}
// 伪类渲染的两点只是颜色及位置不同，所以写在一起
.yin-yang::before, .yin-yang::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #fff;
    border: 1.1em solid currentColor;
    border-radius: 50%;
    width: .8em;
    height: .8em;
}
.yin-yang::after {
    left: 50%;
    background-color: currentColor;
    border: 1.1em solid #fff;
}

太空侵略者

利用box-shadow形成“像素点”，调整位置形成最终结果。也可渲染其它各种的像素点图。

.space-invader {
    box-shadow: 0 0 0 1em var(--strange),
    0 1em 0 1em var(--strange),
    -2.5em 1.5em 0 .5em currentColor,
    2.5em 1.5em 0 .5em currentColor,
    -3em -3em 0 0 currentColor,
    3em -3em 0 0 currentColor,
    -2em -2em 0 0 currentColor,
    2em -2em 0 0 currentColor,
    -3em -1em 0 0 currentColor,
    -2em -1em 0 0 currentColor,
    2em -1em 0 0 currentColor,
    3em -1em 0 0 currentColor,
    -4em 0 0 0 currentColor,
    -3em 0 0 0 currentColor,
    3em 0 0 0 currentColor,
    4em 0 0 0 currentColor,
    -5em 1em 0 0 currentColor,
    -4em 1em 0 0 currentColor,
    4em 1em 0 0 currentColor,
    5em 1em 0 0 currentColor,
    -5em 2em 0 0 currentColor,
    5em 2em 0 0 currentColor,
    -5em 3em 0 0 currentColor,
    -3em 3em 0 0 currentColor,
    3em 3em 0 0 currentColor,
    5em 3em 0 0 currentColor,
    -2em 4em 0 0 currentColor,
    -1em 4em 0 0 currentColor,
    1em 4em 0 0 currentColor,
    2em 4em 0 0 currentColor;
    background: currentColor;
    margin: 3em 6em;
    width: 1em;
    height: 1em;
    color: var(--strange);
    overflow: hidden;
}

// RSS，一个伪类渲染圆点，另一伪类渲染两条弧线

.rss {
    width: 20em;
    height: 20em;
    border-radius: 3em;
    color: deepskyblue;
    background-color: currentColor;
    font-size: .25em;
    position: relative;
}
.rss:before {
    content: '';
    z-index: 1;
    display: block;
    height: 5em;
    width: 5em;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 11.5em;
    left: 3.5em;
}
//  box-shadow 三个inset值错位渲染弧线
.rss:after {
    content: '';
    display: block;
    background: currentColor;
    width: 13em;
    height: 13em;
    top: 3em;
    left: 3.8em;
    border-radius: 2.5em;
    position: absolute;
    box-shadow:
            -2em 2em 0 0 #fff inset,
            -4em 4em 0 0 currentColor inset,
            -6em 6em 0 0 #fff inset
}

源自the-shapes-of-css

你可能感兴趣的:(css,box-shadow,border-radius,border,伪类)

  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • 清除 Conda 缓存 Dmatteratall conda缓存
    清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 前端HTML+CSS+JS的入门学习 俊昭喜喜里 前端htmlcss
    一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个
  • 10/24 每周学习总结5 木木ainiks 1024程序员节
    1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return
  • HTML5概述 WFIT~SKY Web前端html5前端html
    1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
  • CSS中如何实现鼠标悬停效果？ 神明木佑 css前端
    在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
  • js的书写位置和css的书写位置的区别？为什么要这样写？ 李是啥也不会 javascriptcss开发语言
    JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
  • 【H2O2|全栈】关于CSS（3）CSS基础（三） 过期的H2O2 【H2O2】CSS入门css前端
    目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
  • css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
    css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
  • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
  • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
  • 基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板 abments 实用小工具javascript前端html
    效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
  • unocss 一直热更新打印[vite] hot updated: /__uno.css 柳雾青烟紫燕穿 csscss3vue
    控制台持续打印了几千条这条信息，页面逐渐卡死client.ts:450[vite]hotupdated:/__uno.css找出的原因是：依赖出问题了，重新安装unocss，执行命令npmiunocss后修复。但奇怪的是，删除node_modules重新全部安装依赖却不能修复，tmd。还有一种解决方法是切换分支，切去其它分支，再切回来，也不会再打印了。一开始还怀疑了是哪里的unocss类名一直在监
  • 强大的销售团队背后 竟然是大数据分析的身影 蓝儿唯美 数据分析
    Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。 大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
  • Haproxy+Keepalived高可用双机单活 bylijinnan 负载均衡keepalivedhaproxy高可用
    我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过 服务器资源 10.7
  • eclipse编辑器中文乱码问题解决 0624chenhong eclipse乱码
    使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码 格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g
  • 基础篇--resources资源 不懂事的小屁孩 android
    最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml    字符串资源   涉及国际化问题  http://www.2cto.com/kf/201302/190394.html   string-array
  • 接上篇补上window平台自动上传证书文件的批处理问卷 酷的飞上天空 window
    @echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s
  • 企业物联网大潮涌动：如何做好准备？ 蓝儿唯美 企业
    物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。 尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全
  • spring学习——数据库（mybatis持久化框架配置） a-john mybatis
    Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba
  • Java静态代理、动态代理实例 aijuans Java静态代理
    采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。 按照代理类的创建时期，可以分为：静态代理和动态代理。 所谓静态代理：　指程序员创建好代理类，编译时直接生成代理类的字节码文件。 所谓动态代理：　在程序运行时，通过反射机制动态生成代理类。   一、静态代理类实例： 1、Serivce.ja
  • Struts1与Struts2的12点区别 asia007 Struts1与Struts2
    1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P
  • 初学者要多看看帮助文档 不要用js来写Jquery的代码 百合不是茶 jqueryjs
    解析json数据的时候需要将解析的数据写到文本框中,  出现了用js来写Jquery代码的问题;   1, JQuery的赋值  有问题    代码如下: data.username 表示的是:  网易            $("#use
  • 经理怎么和员工搞好关系和信任 bijian1013 团队项目管理管理
            产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通
  • 如何为rich:tree不同类型节点设置右键菜单 sunjing contextMenutreeRichfaces
    组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu
  • 【Redis二】Redis2.8.17搭建主从复制环境 bit1129 redis
    开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。   Ubuntu上安装Red
  • JSONObject转换JSON--将Date转换为指定格式 白糖_ JSONObject
    项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式：   {"nanos":0,"time":-27076233600000,
  • JavaScript语言精粹读书笔记 braveCS JavaScript
    【经典用法】：   //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对
  • 编程之美-找符合条件的整数 用字符串来表示大整数避免溢出 bylijinnan 编程之美
    import java.util.LinkedList; public class FindInteger { /** * 编程之美 找符合条件的整数 用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数
  • 读书笔记 chengxuyuancsdn 读书笔记
    1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
  • [通讯与电力]光网城市建设的一些问题 comsci 问题
          信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系       我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........     
  • oracle 空间RESUMABLE daizj oracle空间不足RESUMABLE错误挂起
    空间RESUMABLE操作  转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。 这一篇简单介绍空间RESUMABLE的例子。 第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D
  • 重构第一次写的线程池 dieslrae 线程池 python
    最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*-
  • C语言学习六指针 dcj3sjt126com c
    初识指针，简单示例程序： /* 指针就是地址，地址就是指针 地址就是内存单元的编号 指针变量是存放地址的变量 指针和指针变量是两个不同的概念 但是要注意： 通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int *
  • yii2 beforeSave afterSave beforeDelete dcj3sjt126com delete
    public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } }  
  • timertask shuizhaosi888 timertask
    java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new
  • Spring Security（13）——session管理 234390216 sessionSpring Security攻击保护超时
    session管理 目录   1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护         
  • 公司项目NODEJS实践0.3[ mongo / session ...] 逐行分析JS源代码 mongodbsessionnodejs
        http://www.upopen.cn   一、前言         书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /
  • pojo.vo.po.domain区别 LiaoJuncai javaVOPOJOjavabeandomain
    　　POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。 　　 　　即POJO是一个简单的普通的Java对象，它包含业务逻辑
  • Windows Error Code OhMyCC windows
    0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系
  • 在storm集群环境下发布Topology roadrunners 集群stormtopologyspoutbolt
    storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。   1、打包 打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.
  • 为什么不允许代码里出现“魔数” tomcat_oracle java
    　　在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。 　　迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。 　　很多开发者在这个检查方面都有问题，这可以从结果
  • zoj 3511 Cake Robbery(线段树) 阿尔萨斯 线段树
    题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。 解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他