使用HTML+CSS画太极八卦图
基本语法
CSS基本语法格式:
选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
选择符:
1.元素选择器:找到同名一系列
2.类选择器:找到同类名一系列
定义:
web前端开发1
调用:.div1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
3.id选择器:唯一性,只能找到一个
定义:
web前端开发1
调用:#div1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
CSS使用方式:
内嵌:使用标签放在中
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;
代码
圆
效果