使用HTML+CSS画太极八卦图

最新推荐文章于 2024-05-05 19:27:00 发布

YuBingbai

最新推荐文章于 2024-05-05 19:27:00 发布

阅读量4.6k

点赞数 4

文章标签： HTML5 CSS

本文链接：https://blog.csdn.net/wangwangshuibingbing/article/details/96178570

版权

使用HTML+CSS画太极八卦图

基本语法

CSS基本语法格式:

选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}

选择符:

1.元素选择器:找到同名一系列
2.类选择器:找到同类名一系列
    定义:<div class="div1">web前端开发1</div>
    调用:.div1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
3.id选择器:唯一性，只能找到一个
    定义:<div id="div1">web前端开发1</div>
    调用:#div1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}

CSS使用方式:

内嵌:使用<style></style>标签放在<head></head>中

CSS常用属性:

width:300px;---宽度
height:---高度
border:1px solid red;----复合属性 
    1px:border-width:1px;
    solid:border-style:solid;
    red:border-color:red;
background-color:---背景颜色
background-image:url(图片路径--使用相对路径)
background-repeat:平铺
background-size:背景图片的大小

字体阴影

text-shhadow:5px(水平方向偏移，可以为负) 6px(竖直方向偏移，可以为负) 5px(阴影效果,不能为负) black;

border-radius:圆角属性

圆:前提-正方形
值:大于等于二分之一的宽度即可

position: absolute;—绝对定位

//具体语法
           #div1{//Id选择器
			position: absolute;
            left: 90px;
            top: 100px;
           }

堆叠覆盖

z-index: 300;//在有绝对定位的条件下使用 即在 position: absolute;

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>圆</title>
        <style>
            .bg{
                background-color:goldenrod;
            }
            #yuan1{
                width: 200px; height: 400px;
                background-color: black;
                border-radius: 200px 0px 0px 200px ;
            }
            #yuan2{
                width: 200px; height: 400px;
                background-color:white;
                border-radius: 0px 200px 200px 0px ;
                position:absolute;
                left: 208px;
                top: 8px;
            }
            #wyuan1{
                width: 200px;height: 200px;
                background-color: white;
                border-radius: 100px;
                position: absolute;
                left: 100px;
            }
            #byuan1{
                width: 200px;height: 200px;
                background-color:black;
                border-radius: 100px;
                position: absolute;
                left: -100px;
                top: 200px;
            }
            #tbyuan{
                width: 20px;
                height: 20Px;
                background-color: black;
                border-radius: 10px;
                position: absolute;
                left: 100px;
                top: 93px;
                z-index: 200;
            }
            #twyuan{
                width: 20px;
                height: 20Px;
                background-color: white;
                border-radius: 10px;
                position: absolute;
                left: 90px;
                top: 100px;
                z-index: 300;
            }
        </style>
    </head>
    <body>
        <div class="bg">
                <div id="yuan1">
                    <div id="wyuan1">
                        <div id="tbyuan"></div>
                    </div>
                </div>
                <div id="yuan2">
                    <div id="byuan1">
                        <div id="twyuan"></div>
                    </div>
                </div>
        </div>
        
    </body>
</html>

效果

s实现效果

YuBingbai

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
使用HTML+CSS画太极八卦图

使用HTML+CSS画太极八卦图基本语法CSS基本语法格式:选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}选择符:1.元素选择器:找到同名一系列2.类选择器:找到同类名一系列定义:<div class="div1">web前端开发1</div> 调用:.div1{属性1:属性值1;属性2:属性值2;属性3:属性值...
复制链接

扫一扫