太极八卦图
使用HTML+CSS画太极八卦图
基本语法
CSS基本语法格式:
选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
选择符:
1.元素选择器:找到同名一系列
2.类选择器:找到同类名一系列
定义:<p class="p1">web前端开发1</p>
调用:.p1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
3.id选择器:唯一性，只能找到一个
定义:<p id="p1">web前端开发1</p>
调用:#p1{属性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;—绝对定位
//具体语法
#p1{//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>
<p class="bg">
<p id="yuan1">
<p id="wyuan1">
<p id="tbyuan"></p>
</p>
</p>
<p id="yuan2">
<p id="byuan1">
<p id="twyuan"></p>
</p>
</p>
</p>
</body>
</html>
效果
相关阅读
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和
@Html.DropDownList()的四种用法及自定义DropDownList
常用方法后台代码： public ActionResult Index() { ViewData["deptOu"] = "SOHO"; using (ISession session = new NHibe
javascript 中innerHTML的用法 语法 Object.innerHTML = “HTML”;//设置其内容 var html = Object.innerHTML;//获取其内容
使用css画个等腰直角三角形： 可以使用border来进行绘制，具体见注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。 （重点）position定位属性： relative相对定位特点是： 相对于游览最上