1，畫圖

我們畫幾個常見的圖形，源代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>

<link rel="stylesheet" type="text/css" href="../css/homework5.css"/>
</head>

<body>
	
	<div class="div11"></div>
	<br>
	<br>
	<div class="div12"></div>
	<br>
	<br>
	<div class="div13"></div>
	<br>
	<br>
	<div class="div14"></div>
	
	
	
	
<hr>劃線後面的可以不看，有好多屬性可能還不太瞭解，可以先看前面的四個圖形
	
   <div id="d1"></div>
   
   <div id="d2"></div>
   
   <div class="tip-hint"></div>
   <br>
   <br>
   <br>
   <div id="heart"></div>
   
   
</body>
</html>

下面是樣式.css,等我們到公司裏做項目的時候html代碼和.css都是分開的這樣的好處很多，你可以試試寫在一起看看項目經理怎麼幹你吧。

.div11{
	width: 100px; 
	height: 100px; 
	background-color:yellow;
	border-radius: 50px;
	border: 2px solid black;
	 }
.div12{
	width: 100px; 
	height: 100px; 
	background-color:yellow; 
	border-radius:50px 0 0 0;
	border: 2px solid black;
	}
.div13{
	width: 100px; 
	height: 100px; 
	background-color:yellow; 
	border-radius:50px 0 50px 0;
	border: 2px solid black;
	}
.div14{
	width: 100px; 
	height: 100px; 
	background-color:yellow; 
	border-radius:50px 50px 50px 0;
	border: 2px solid black;
	}














/*圓*/
#d1{
	
	width: 200px;
	height: 200px;
	
	border: 3px solid black;
	background-color: yellow;
	border-radius: 100px;
}


#d2{
	
height: 110px;
width: 172px;
border: 8px solid #B4E3EF;
text-align: center;
border-radius: 50%
	
}








/*氣球*/


.tip-hint {
  width: 90px;
  height: 90px;
}


.tip-hint:first-child {
  margin-left: 0;
}  
.tip-hint {
	border-radius: 1000%;
  background: yellow;
  overflow-x: visible;
  
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}


.tip-hint::before {
  content:  '';
  position: absolute;
  width: 110%;
  height: 110%;
  background: lightgreen;
  border-top-left-radius: 50%;
  border-top-right-radius: 50% 80%;
  border-bottom-left-radius: 90% 50%;
  border-bottom-right-radius: 0%;
}




#heart {
    position: relative;
}
  
#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
  
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

效果圖如下

：

2.一個帶樣式的小頁面，源代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@import url("../css/homework4.css");
		</style>
	</head>
	<body>
		<h4>請把鼠標放在黃色部分</h4>
		<div class="div1">
				<div id="div2">
					<div id="div22"></div>
					老地方</div>
				<div id="div3">
					<div id="div33"></div>
					老地方</div>
				<div id="div4">
					<div id="div44"></div>
					老地方</div>
				<div id="div5">
					<div id="div55"></div>
					
					老地方</div>
				
			
			
		</div>
	</body>
</html>

下面是.css樣式:

.div1{
	position:relative;
	height: 500px;
	width: 800px;
	background-color:  #999999 ;
	position: relative;
	text-align: right;
	line-height: 60px;
	letter-spacing: 5px;
	font-size: 30px;
	
}


div div{
	height: 60px;
	width: 500px;
	background-color: #6633FF;
	position: absolute;
	left: 30px;
	right: 30px;
	
}




#div2{
	
	top: 60px;
	
	
}


#div2:hover{
	background-color: #FFCC00;
	
}
#div22:hover{
	
	background-color: #0000FF;
	width: 30px;
}




#div3{
	top: 160px;
	
}


#div3:hover{
	background-color: #FFCC00;
}


#div33:hover{
	
	background-color: #0000FF;
	width: 30px;
}




#div4{
	
	top: 260px;
	
}


#div4:hover{
	background-color: #FFCC00;
}


#div44:hover{
	
	background-color: #0000FF;
	width: 30px;
}




#div5{
	
	top: 360px;
	
	
}


#div5:hover{
	background-color: #FFCC00;
	
	
}


#div55:hover{
	background-color: #0000FF;
	width: 30px;
}




 div div div{
	
	width: 50px;
	height: 60px;
	background-color: #FFCC00;
	left: 0;
	
}