代碼學習群簡易教程(35)

代碼學習群簡易教程(35)

css頁內插入樣式

—製作幾何圖形

本節繼續講解css頁內插入樣式。講解的內容為:製作幾何圖形。(重點講解三角形)

css樣式與html代碼結合,不但可以製作普通的網頁,還可以製作各種漂亮的幾何圖形。

代碼學習群簡易教程(35)

一、三角形:

代碼舉例1:

<FONT style=”FONT-SIZE: 1px”>c</FONT>

<STYLE contentEditable=true>

<!–

#triangle-up1 {width: 0;

height: 0;

border-left: 150px solid #f06 ;

border-right: 0px solid #f06 ;

border-bottom: 250px solid transparent;}

–>

</STYLE>

<DIV id=triangle-up1></DIV>

上面的代碼是「直角在左上的三角形」代碼。

代碼解析:

<FONT style=”FONT-SIZE: 1px”>c</FONT>

輸入了字號為1px的一個字母:C。為的是使設置的css樣式生效。

<STYLE contentEditable=true>

設置html的contentEditable=’true’時,即可開啟該元素的編輯模式。

#triangle-up :css選擇器,定義三角形。

border-left: 150px solid #f06;左邊框線的寬度、樣式與顏色。

border-right: 0px solid #f06;右邊框線的寬度、樣式與顏色。

border-bottom: 250px solid transparent;下邊框線的寬度、樣式,邊框線透明。

注意:transparent不可省略。

效果:

c

代碼舉例2:

<DIV align=center><FONT style=”FONT-SIZE: 1px”>c</FONT>

<STYLE contentEditable=true>

<!–

#triangle-up1 {width: 0;

height: 0;

border-left: 0px solid #f06 ;

border-right: 150px solid #f06 ;

border-bottom: 250px solid transparent;}

–>

</STYLE>

<DIV id=triangle-up1></DIV></DIV>

上面的代碼是「直角在右上的三角形」代碼。

效果:

c

代碼舉例3:

<DIV align=center>

<P><FONT style=”FONT-SIZE: 24px”><STRONG>直角在右下的三角形</STRONG></FONT></P>

<DIV id=triangle-up3></DIV>

<STYLE contentEditable=true>

#triangle-up3 {width: 0;

height: 0;

border-left: 150px solid transparent;

border-right: 0px solid transparent;

border-bottom: 250px solid #f06 ;}

</STYLE>

</DIV>

上面的代碼是「直角在右下的三角形」代碼。

效果:

代碼舉例4:

<DIV align=center>

<DIV id=triangle-up4></DIV>

<STYLE contentEditable=true>

#triangle-up4 {width: 0;

height: 0;

border-left: 0px solid transparent;

border-right: 150px solid transparent;

border-bottom: 250px solid #f06 ;}

</STYLE>

</DIV>

上面的代碼是「直角在左下的三角形」代碼。

效果:

代碼舉例5:

<DIV align=center>

<DIV id=triangle-up5></DIV>

<STYLE contentEditable=true>

#triangle-up5 {width: 0;

height: 0;

border-left: 150px solid transparent;

border-right: 150px solid transparent;

border-bottom: 250px solid #f06 ;}

</STYLE>

</DIV>

上面的代碼是「等腰三角形」代碼。

效果:

代碼舉例6:

1

<DIV align=center>

<DIV id=triangle-down></DIV>

<STYLE contentEditable=true>

<!–

#triangle-down {width: 0;

height: 0;

border-left: 150px solid transparent;

border-right: 150px solid transparent;

border-top: 250px solid #f06;}

–>

</STYLE>

</DIV>

上面的代碼是「等腰三角形」代碼。

效果:

代碼舉例7:

1

<DIV align=center>

<DIV id=triangle-up6></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up6 {width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 250px solid transparent;

border-bottom: 150px solid #f06 ;}

–>

</STYLE>

</DIV>

上面的代碼是「斜三角形」的代碼。

效果:

代碼舉例8:

1

<DIV align=center>

<DIV id=triangle-up7></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up7 {width: 0;

height: 0;

border-left: 250px solid transparent;

border-right: 50px solid transparent;

border-bottom: 150px solid #f06 ;}

–>

</STYLE>

</DIV>

上面的代碼是「斜三角形」的代碼。

效果:

二、梯形:

代碼舉例1:

1

<DIV align=center>

<DIV id=triangle-upa></DIV>

<STYLE contentEditable=true>

<!–

#triangle-upa {width: 0;

height: 0;

border-left: 200px solid transparent;

border-right: 80px solid #f06;

border-bottom: 100px solid #f06;}

–>

</STYLE>

</DIV>

上面的代碼是「直角梯形」的代碼。

效果:

代碼舉例2:

1

<DIV align=center>

<DIV id=triangle-up8></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up8 {width: 0;

height: 0;

border-left: 80px solid #f06;

border-right: 200px solid transparent ;

border-bottom: 100px solid #f06;}

–>

</STYLE>

</DIV>

上面的代碼是「直角梯形」的代碼。

效果:

代碼舉例3:

<CENTER>

<DIV style=”WIDTH: 300px” align=center>

<DIV id=triangle-up9></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up9 {width: 10;

height: 0;

border-left: 100px solid transparent ;

border-right: 100px solid transparent ;

border-bottom: 100px solid #f06 ;}

–>

</STYLE>

</DIV></CENTER>

上面的代碼是「等腰梯形」的代碼。

效果:

代碼舉例4:

1<CENTER>

<DIV style=”WIDTH: 300px” align=center>

<P><FONT style=”FONT-SIZE: 24px”><STRONG>等腰梯形</STRONG></FONT></P>

<DIV id=triangle-upb></DIV>

<STYLE contentEditable=true>

<!–

#triangle-upb {width: 10;

height: 0;

border-left: 100px solid transparent ;

border-right: 100px solid transparent ;

border-top: 100px solid #f06 ;}

–>

</STYLE>

</DIV></CENTER>

上面的代碼是「等腰梯形」的代碼。

效果:

三、平行四邊形:

代碼舉例1:

1

<DIV align=center>

<DIV id=triangle-up10></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up10 {width: 0;

height: 0;

border-left: 150px solid transparent;

border-right: 0px solid transparent;

border-bottom: 150px solid #f06 ;}

–>

</STYLE>

</DIV>

<DIV align=center>

<DIV id=triangle-up11></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up11 {width: 0;

height: 0;

border-left: 150px solid #f06 ;

border-right: 0px solid #f06;

border-bottom: 150px solid transparent;}

–>

</STYLE>

</DIV>

上面的代碼是「平行四邊形」的代碼。

效果:

代碼舉例2:

1

<DIV align=center>

<DIV id=triangle-up12></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up12 {width: 0;

height: 0;

border-left: 0px solid transparent;

border-right: 150px solid transparent;

border-bottom: 150px solid #f06 ;}

–>

</STYLE>

</DIV>

<DIV align=center>

<DIV id=triangle-up13></DIV>

<STYLE contentEditable=true>

<!–

#triangle-up13 {width: 0;

height: 0;

border-left: 0px solid #f06 ;

border-right: 150px solid #f06 ;

border-bottom: 150px solid transparent;}

–>

</STYLE>

</DIV>

上面的代碼是「平行四邊形」的代碼。

效果:

四、圓形:

代碼舉例:

1

<DIV align=center>

<DIV id=perfect-circle></DIV>

<STYLE contentEditable=true>

<!–

#perfect-circle{

width: 150px;

height: 150px;

background-color: red;

color: white;

text-align: center;

border-radius: 100px;

/*-webkit-border-radius: 100px;*/

-moz-border-radius: 100px;

}

–>

</STYLE>

</DIV>

效果:

五、圓環:

代碼舉例:

1

<DIV align=center>

<DIV id=circle></DIV>

<STYLE contentEditable=true>

<!–

#circle{

width: 150px;

height: 150px;

color: black;

text-align: center;

border-radius: 100px;

/*-webkit-border-radius: 10px;*/

/*-moz-border-radius: 100px;*/

border:3px red solid;

}

–>

</STYLE>

</DIV>

效果:

六、橢圓:

代碼舉例:

1

<DIV align=center>

<DIV id=ellipse></DIV>

<STYLE contentEditable=true>

<!–

#ellipse{

width: 200px;

height: 100px;

background-color: red;

color: white;

text-align: center;

border-radius: 100px/50px;

/*-webkit-border-radius: 100px/50px;*/

/*-moz-border-radius: 100px/50px;*/

}

–>

</STYLE>

</DIV>

效果:

七、五角星:

代碼舉例:

1

<DIV align=center>

<DIV id=star-five></DIV>

<STYLE contentEditable=true>

<!–

#star-five{

width: 0;

height: 0;

color: red;

margin: 50px 0;

position: relative;

display: block;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

-moz-transfrom:rotate(35deg);

-webkit-transform:rotate(35deg);

-ms-transform:rotate(35deg);

-o-transform:rotate(35deg);

}

#star-five:before{

width: 0;

height: 0;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

border-bottom: 80px solid red;

position: absolute;

top: -45px;

left: -65px;

color: white;

display: block;

content: “”;

-moz-transform:rotate(-35deg);

-webkit-transform:rotate(-35deg);

-ms-transform:rotate(-35deg);

-o-transform:rotate(-35deg);

}

#star-five:after{

width: 0;

height: 0;

display: block;

position: absolute;

color: red;

top: 3px;

left: -105px;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

content: “”;

-moz-transform:rotate(-70deg);

-webkit-transform:rotate(-70deg);

-ms-transform:rotate(-70deg);

-o-transform:rotate(-70deg);

}

–>

</STYLE>

</DIV>

效果:

八、六角星:

代碼舉例:

1

<DIV align=center>

<DIV id=star-six></DIV>

<STYLE contentEditable=true>

<!–

#star-six{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

#star-six:after{

width: 0;

height: 0;

border-top: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

position: absolute;

content: “”;

top: 30px;

left: -50px;

}

–>

</STYLE>

</DIV>

效果:

九、五邊形:

代碼舉例:

1

<DIV align=center>

<DIV id=pentagon></DIV>

<STYLE contentEditable=true>

<!–

#pentagon{

width: 54px;

position: relative;

border-width: 50px 18px 0;

border-style: solid;

border-color: red transparent;

}

#pentagon:before{

content: “”;

position: absolute;

width: 0;

height: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent red;

}

–>

</STYLE>

</DIV>

效果:

十、六邊形:

代碼舉例:

1

<DIV align=center>

<DIV id=hexagon></DIV>

<STYLE contentEditable=true>

<!–

#hexagon{

width: 100px;

height: 55px;

background-color: red;

position: relative;

}

#hexagon:before{

content: “”;

position: absolute;

top: -25px;

left: 0;

width: 0;

height: ;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid red;

}

#hexagon:after{

content: “”;

left: 0;

width: 0;

height: 0;

bottom: -25px;

position: absolute;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid red;

}

–>

</STYLE>

</DIV>

效果:

十一、八邊形:

代碼舉例:

1

<DIV align=center>

<DIV id=octagon></DIV>

<STYLE contentEditable=true>

<!–

#octagon{

width: 100px;

height: 100px;

background-color: red;

position: relative;

}

#octagon:before{

width: 42px;

height: 0;

top: 0;

left: 0;

position: absolute;

content: “”;

border-left: 29px solid #fff;

border-right: 29px solid #fff;

border-bottom: 29px solid red;

}

#octagon:after{

width: 42px;

height: 0;

left: 0;

bottom: 0;

position: absolute;

content: “”;

border-left: 29px solid #fff;

border-right: 29px solid #fff;

border-top: 29px solid red;

}

–>

</STYLE>

</DIV>

效果:

十二、心形:

代碼舉例:

1

<DIV align=center>

<DIV id=heart></DIV>

<STYLE contentEditable=true>

<!–

#heart{

width: 100px;

height: 90px;

position: relative;

}

#heart:before,#heart:after{

width: 50px;

height: 80px;

left: 50px;

top: 0;

background-color: red;

position: absolute;

content: “”;

-moz-border-radius:50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-o-transform:rotate(-45deg);

transform:rotate(-45deg);

-webkit-transform-origin:0 100%;

-ms-transform-origin:0 100%;

-moz-transform-origin:0 100%;

-o-transform-origin:0 100%;

tansform-origin:0 100%;

}

#heart:after{

left: 0;

-webkit-transform:rotate(45deg);

-ms-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-o-transform:rotate(45deg);

transform:rotate(45deg);

-webkit-transform-origin:100% 100%;

-ms-transform-origin:100% 100%;

-moz-transform-origin:100% 100%;

-o-transform-origin:100% 100%;

transform-origin:100% 100%;

}

–>

</STYLE>

</DIV>

效果:

十三、八字形:

代碼舉例:

1

<DIV align=center>

<DIV id=infinity></DIV>

<STYLE contentEditable=true>

<!–

#infinity{

width: 212px;

height: 100px;

position: relative;

}

#infinity:before,#infinity:after{

width: 60px;

height: 60px;

top: 0;

left: 0;

border: 20px solid red;

position: absolute;

content: “”;

border-radius: 50px 50px 0 50px;

-webkit-border-radius:50px 50px 0 50px;

-moz-border-radius:50px 50px 0 50px;

transform:rotate(-45deg);

-webkit-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-o-transform:rotate(-45deg);

}

#infinity:after{

left: auto;

right: 0;

border-radius: 50px 50px 50px 0;

-webkit-border-radius:50px 50px 50px 0;

-moz-border-radius:50px 50px 50px 0;

transform:rotate(45deg);

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-ms-transform:rotate(45deg);

-o-transform:rotate(45deg);

}

–>

</STYLE>

</DIV>

效果:

十四、蛋形:

代碼舉例:

1

<DIV align=center>

<DIV id=egg></DIV>

<STYLE contentEditable=true>

<!–

#egg{

width: 126px;

height: 180px;

background-color: red;

display: block;

border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/

}–>

</STYLE>

</DIV>

效果:

十五、扇形:

代碼舉例:

1

<DIV align=center>

<DIV id=pacman></DIV>

<STYLE contentEditable=true>

<!–

#pacman{

width: 0;

height: 0;

border-right: 100px solid transparent;

border-left: 100px solid transparent;

border-top: 100px solid red ;

border-bottom: 100px solid transparent;

border-top-left-radius: 100px;

border-top-right-radius: 100px;

border-bottom-left-radius: 100px;

border-bottom-right-radius: 100px;

}

–>

</STYLE>

</DIV>

效果:

十六、對話框:

代碼舉例:

1

<DIV align=center>

<DIV id=talkbubble></DIV>

<STYLE contentEditable=true>

<!–

#talkbubble{

width: 200px;

height: 100px;

background-color: red;

position: relative;

border-radius: 10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

-ms-border-radius:10px;

-o-border-radius:10px;

}

#talkbubble:before{

width: 0;

height: 0;

right: 100%;

top: 30px;

position: absolute;

content: “”;

border-top: 15px solid transparent;

border-right: 30px solid red;

border-bottom: 15px solid transparent;

}

–>

</STYLE>

</DIV>

效果:

十七、十二角星:

代碼舉例:

1

<DIV align=center>

<DIV id=burst-12></DIV>

<STYLE contentEditable=true>

<!–

#burst-12{

width: 80px;

height: 80px;

background-color: red;

position: relative;

text-align: center;

}

#burst-12:before,#burst-12:after{

width: 80px;

height: 80px;

top: 0;

left: 0;

background-color: red;

position: absolute;

content: “”;

}

#burst-12:before{

transform:rotate(30deg);

-webkit-transform:rotate(30deg);

-ms-transform:rotate(30deg);

-moz-transform:rotate(30deg);

-o-transform:rotate(30deg);

}

#burst-12:after{

transform:rotate(60deg);

-webkit-transform:rotate(60deg);

-ms-transform:rotate(60deg);

-moz-transform:rotate(60deg);

-o-transform:rotate(60deg);

}

–>

</STYLE>

</DIV>

效果:

十八、八角星:

代碼舉例:

1

<DIV align=center>

<DIV id=burst-8></DIV>

<STYLE contentEditable=true>

<!–

#burst-8{

width: 80px;

height: 80px;

background-color: red;

text-align: center;

position: relative;

transform:rotate(20deg);

-webkit-transform:rotate(20deg);

-ms-transform:rotate(20deg);

-moz-transform:rotate(20deg);

-o-transform:rotate(20deg);

}

#burst-8:before{

width: 80px;

height: 80px;

top: 0;

left: 0;

background-color: red;

position: absolute;

content: “”;

transform:rotate(135deg);

-webkit-transform:rotate(135deg);

-ms-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-o-transform:rotate(135deg);

}

–>

</STYLE>

</DIV>

效果:

十九、鑽石:

代碼舉例:

<BR>

<CENTER>

<DIV style=”BORDER-BOTTOM: 2px solid; TEXT-ALIGN: left; BORDER-LEFT: 2px solid; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 477px; PADDING-RIGHT: 0px; FONT-FAMILY: 黑體; DIRECTION: inherit; HEIGHT: 103px; COLOR: rgb(0,250,0); FONT-SIZE: 18px; OVERFLOW: auto; BORDER-TOP: 2px solid; BORDER-RIGHT: 2px solid; PADDING-TOP: 0px” align=left>

<P>1<BR><DIV align=center><BR><DIV id=diamond></DIV><BR><STYLE contentEditable=true> <BR><!–<BR>#diamond{<BR>width: 50px;<BR>height: 0;<BR>border-style: solid;<BR>border-color: transparent transparent red transparent;<BR>border-width: 0 25px 25px 25px;<BR>position: relative;<BR>margin: 20px 0 50px 0;<BR>}<BR>#diamond:after{<BR>width: 0;<BR>height: 0;<BR>top: 25px;<BR>left: -25px;<BR>border-style: solid;<BR>border-color: red transparent transparent transparent;<BR>border-width: 70px 50px 0 50px;<BR>position: absolute;<BR>content: “”;<BR>}</P>

<P>–><BR></STYLE><BR></DIV></P></DIV></CENTER><BR><!–上面是滾動條–>

效果:

二十、陰陽魚:

代碼舉例:

<BR>

<CENTER>

<DIV style=”BORDER-BOTTOM: 2px solid; TEXT-ALIGN: left; BORDER-LEFT: 2px solid; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 477px; PADDING-RIGHT: 0px; FONT-FAMILY: 黑體; DIRECTION: inherit; HEIGHT: 103px; COLOR: rgb(0,250,0); FONT-SIZE: 18px; OVERFLOW: auto; BORDER-TOP: 2px solid; BORDER-RIGHT: 2px solid; PADDING-TOP: 0px” align=left>

<P>1 <BR><DIV align=center><BR><DIV id=yin-yang></DIV><BR><STYLE contentEditable=true> <BR><!–<BR>#yin-yang{<BR>width: 96px; <BR>height: 48px; <BR>background-color: #fff; <BR>border-color: red; <BR>border-style: solid; <BR>border-width: 2px 2px 50px 2px; <BR>border-radius: 100%; <BR>position: relative; <BR>}<BR>#yin-yang:before {<BR>width: 12px; <BR>height: 12px;<BR>top: 50%; <BR>left: 0; <BR>content: “”; <BR>position: absolute; <BR>background-color: #fff; <BR>border: 18px solid red; <BR>border-radius: 100%; <BR>} <BR>#yin-yang:after {<BR>width: 12px; <BR>height: 12px;<BR>top: 50%; <BR>left: 50%;<BR>background-color: red;<BR>border: 18px solid #fff; <BR>border-radius:100%; <BR>content: “”; <BR>position: absolute; <BR>} </P>

<P>–><BR></STYLE><BR></DIV></P></DIV></CENTER><BR><!–上面是滾動條–>

效果:

代碼學習群簡易教程(35)

★本節《教程》的重點在於認識、熟悉與掌握頁內插入css樣式的方法。頁內插入css樣式的步驟如下:

1、先輸入幾個字母或者文字。

2、設置樣式標籤。

3、設置註釋標籤。

4、在註釋標籤中放入你設置的css樣式。

css樣式分為選擇器與聲明兩部分。選擇器在大括號的前面,聲明在大括號裡面。聲明可以由多個屬性與屬值組成。各屬性之間用分號隔開,屬性與屬值之間用冒號連接。如果綜合設置某個屬性,各屬值之間用空格隔開。

5、前面的兩節《教程》中應用的選擇器是「類選擇器」,類選擇器的標識是一個小圓點「.」。本節教程應用的選擇器是「序號選擇器」,或者叫做「身份選擇器」。這種選擇器的標識是「#」符號。

一種「類選擇器」,在一篇網頁中可以使用多次。例如,教程(33)代碼舉例(1)中,表格的第一行與第三行都使用了class=s選擇器,第二行與第四行都使用了class=e選擇器。而一種「序號選擇器」,在一篇網頁中只能使用一次。

6、設置塊區標籤或者段落標籤,標籤中要設置:class=?或者id=?屬性。「?」處是選擇器的名稱。

代碼學習群簡易教程(35)

作業:

一、簡述頁內插入css樣式的方法。

二、認真閱讀本節《教程》中各種圖形的css樣式。深刻體會頁內插入css樣式的方法。

三、試著修改本節講解的幾種圖形。在修改過程中進一步領會頁內插入css樣式的方法。

「春天沒來」編撰

2014年9月18日於北京