html+css的布局（实现特殊效果）

本文主要是介绍html+css的布局（实现特殊效果），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

css的布局

在设计页面时，我们可以通过简单的css来实现一些特殊的形状来美化我们的页面，
而这些图形都是由一些简单的基础形状通过叠加和重合等操作而得到的。

三角形

	三角形是通过（带边框）矩形来类推实现的，将矩形的宽和高进行不断变化来观察，且可将边框设成不同粗细和颜色来帮助我们更好的理解变化的过程。边框的属性：/* 边框的粗细 */border-width: 5px;/* 边框的线性 */border-style: solid;/* 边框的颜色 */border-color: blue;/* 组合写法 */border: 2px solid red;

			div{/*每个方向边框粗细和颜色 */border-top: 50px solid red;border-bottom: 50px solid yellow;border-left: 50px solid black;border-right: 50px solid pink;/*矩形高宽 */width: 100px;height: 100px;}

在这里插入图片描述
在上述代码中：
1.当宽度width趋近于0时，上下从梯形变为三角形

width: 0px;

在这里插入图片描述

    2.当高度height趋近于0时，左右从梯形变为三角形

height: 0px;

在这里插入图片描述

	即当高宽都为0时，则可以得到四个不同三角形形成的矩形，再将某几个方向的颜色处属性设为transparent（透明），则可以得到想要的方向三角形。例如正三角形，

	div{border-top: 50px solid transparent;border-bottom: 50px solid yellow;border-left: 50px solid transparent;border-right: 50px solid transparent;width: 0px;height: 0px;}

在这里插入图片描述

月亮

	由上面的三角形可以很容易联想到月亮是由两个大小圆形成父子关系而构成的，同样的可以通过调整高宽来实现月亮的弧度和缺口方向，其中要注意的属性是border-radius: 50%;	边框的四个角的弧度

<style>body{background-color: black;}#son1{width: 300px;height: 300px;background-color: yellow;border-radius: 50%;}#son2{width: 150px;height: 150px;background-color: black;border-radius: 50%;}</style>
</head>
<body><div id="son1"><div id="son2"></div></div>
</body>

在这里插入图片描述

弹幕

	我们在手机里经常看视频时，会经常看到弹幕效果，或许你会觉得使弹幕去左右移动起来很麻烦，但实际只需要一个标签就可以展示出来了。这个标签名字为“跑马灯”标签；<marquee ></marquee>其中：behavior  设置滚动的方式scroll   一直重复slide  只播放一次alternate  来回弹动direction 滚动的方向scrollamount  滚动的速度

<marquee scrollamount="30"><font size="6" color="red" face="楷体">6666666666</font></marquee>
<marquee scrollamount="25"><font size="5" color="black" face="楷体">77777</font></marquee>
<marquee behavior="alternate" direction="left" color="yellow" scrollamount="30">基本操作</marquee>