太极八卦图

使用HTML+CSS画太极八卦图

基本语法

CSS基本语法格式:选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}

选择符:1.元素选择器:找到同名一系列

2.类选择器:找到同类名一系列

定义:

web前端开发1

调用:.p1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}

3.id选择器:唯一性，只能找到一个

定义:

web前端开发1

调用:#p1{属性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;—绝对定位//具体语法

#p1{//Id选择器

position: absolute;

left: 90px;

top: 100px;

}

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

圆

.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;

}

效果

相关阅读

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和

常用方法后台代码：

public ActionResult Index()

{

ViewData["deptOu"] = "SOHO";

using (ISession session = new NHibe

javascript 中innerHTML的用法

语法

Object.innerHTML = “HTML”;//设置其内容

var html = Object.innerHTML;//获取其内容

使用css画个等腰直角三角形：

可以使用border来进行绘制，具体见注释

QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。

(重点)position定位属性： relative相对定位特点是：

相对于游览最上