使用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>
