HMTL5（五）

最新推荐文章于 2023-10-01 14:21:15 发布

疯狂小王子

最新推荐文章于 2023-10-01 14:21:15 发布

阅读量639

点赞数 2

分类专栏： HTML5 文章标签： html5 java 淘宝网 css

本文链接：https://blog.csdn.net/yelang0111/article/details/76038182

版权

HTML5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

今天的内容就好玩了，我们学习的html和css能用上了。

今天三个内容：

（1）用html+css画画

（2）用html+css做一个简单的购物网页，我会把源码放到下载地方，放心本系列的源码全部免费下载

（3）讲一些重要的属性用法

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

3.下面我们看看网站页面，我会把效果图放出来，因为.git图片太大了就截图了，想看的下载源码第三个就是。源码地址：http://download.csdn.net/detail/yelang0111/9909207

源码地址：http://download.csdn.net/detail/yelang0111/9909207

今天就到这里，html这个东西还是靠自己写，好多属性都是在写代码中知道的，我知识讲一些我用到的，现在的html5可以做动画，还可以做小游戏，html5的出现让flash很尴尬，它快被淘汰了，多看看html5的标签属性，网上好多。

接下来的讲的是JS就是JavaScript.这是脚本语言，也是弱类型语言，感兴趣的朋友接下来不要错过哦

疯狂小王子

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HMTL5（五）

今天的内容就好玩了，我们学习的html和css能用上了。今天三个内容：（1）用html+css画画（2）用html+css做一个简单的购物网页，我会把源码放到下载地方，放心本系列的源码全部免费下载（3）讲一些重要的属性用法1，画图我们画几个常见的图形，源代码如下：无标题文档划线后面的
复制链接

扫一扫

专栏目录