只使用div能不能完成一个页面

最新推荐文章于 2022-11-25 15:54:11 发布

zzw_99

最新推荐文章于 2022-11-25 15:54:11 发布

阅读量271

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42615057/article/details/98173691

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

只使用div能不能完成一个页面

问题描述

使用div能不能实现一个页面，第一，我们要了解什么样的网页算是一个完整的页面；第二，一个完整的页面需要具备什么；第三：div有什么特性、功能；

一个完整的成功的页面首先需要有友好美观的界面显示，首先第一眼要吸引用户继续浏览你的网页，这需要舒适的色彩搭配，恰当的图文格式的编排，避免设计的东西看上去像广告，以及大块的文字区域，图片应该简洁、易理解。
其次，网页应尽可能准确的描述这个网站是关于什么的，如果它需要让浏览者花费更多的时间去弄明白此网站是关于什么的，他将放弃并离开。浏览者或用户首先是大体浏览一下。
然后，这就需要你引导用户去你想要让他们去的地方。它可能是个按钮、搜索、输入、轮播图（动画）、或图片等等。对于一个网站最重要的就是要了解网站的架构，以及每个网页里面位置权重。网站的左上角是最明显的位置，这是大家公认的事实。主要原因是大家都是用这种习惯方式来读书读文章的（从左上角的位置开始），另外早期的网站和应用软件也是基于此方法进行设计开发的。也要有良好的交互效果。
是一个块级元素，其默认样式是独占一行,它的内容会自动地开始一个新行。一个div相当于一个容器，通过它可以实现对内容样式控制及实现不同的布局效果。他的常用属性border,display,float,background等等。

所以，判断使用div能不能实现一个页面，除了页面的设计布局，我们只需要证明使用div能实现按钮、搜索、输入、轮播图（动画）、图片的功能即可推理出div能实现一个完整的页面，否则不能实现。

1.按钮实现：

div实现按钮功能

<html>
<body>	
<div class="btn" onclick="btnClick()" id="btn">
   我是按钮
</div>
<style type="text/css">
	.btn{ 
		width: 150px;
		height: 50px;
		border-radius: 10px;
		background: #FE952C;
		text-align: center;
         line-height: 50px;
		 color: #FFFFFF;
	}
	.btn:active {
		background-color: #F18E2A;
	}
</style>
</body>
<script>
	var btnClickEffect = document.getElementById("btn")
	function btnClick(){
		console.log("我被点击了")
	}
</script>
</html>

2.输入实现：contenteditable属性定义了是否可编辑元素的内容；

div实现输入功能

<html>
<body>	
<div class="input" contenteditable="true" value="" onblur="inputBlur()" onfocus="inputFocus()" id="input">
   请输入内容
</div>
<style type="text/css">
	.input{ 
		width: 180px;
		height: 30px;
		border-radius: 5px;
        line-height: 30px;
		padding-left: 10px;
		border: 1px solid #000;
		color: #000;
		overflow: hidden;
		 white-space:nowrap;
	}
</style>
</body>
<script>
	var inputClickEffect = document.getElementById("input")
	function inputFocus(){
		inputClickEffect.innerHTML="";
	}
	function inputBlur(){
		if(inputClickEffect.innerHTML.replace(/(^\s*)|(\s*$)/g, "")==''||inputClickEffect.innerHTML==null){
			inputClickEffect.innerHTML="请输入内容";
		}
	}
</script>
</html>

3.图片实现：

div{background:url(图片路径) no-repeat 40px 50px}

4.动画实现：昨天看了CSS3的新特性，看到很多动画效果都可以通过CSS3实现，给一个div设置动画效果比之前更加便捷。

该div滑块会自己移动

<!DOCTYPE html>
<html>  
<head>  
<style>   
	div{  
		width:100px;  
		height:100px;  
		background:red;  
		position:relative;  
		animation:myfirst 5s infinite alternate;  
	}
	@keyframes myfirst  
	{  
		0%   {background:red; left:0px; top:0px;}  
		25%  {background:yellow; left:200px; top:0px;}  
		50%  {background:blue; left:200px; top:200px;}  
		75%  {background:green; left:0px; top:200px;}  
		100% {background:red; left:0px; top:0px;}  
	}  
</style>  
</head>  
<body> 
    <div></div>  
</body>  
</html>

总结：

综上所述，只要有合理的布局与颜色搭配，只需要div就可以实现一个页面。

zzw_99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
只使用div能不能完成一个页面

只使用div能不能完成一个页面问题描述1.按钮实现：2.输入实现：contenteditable属性定义了是否可编辑元素的内容；3.图片实现：4.动画实现：昨天看了CSS3的新特性，看到很多动画效果都可以通过CSS3实现，给一个div设置动画效果比之前更加便捷。总结：问题描述使用div能不能实现一个页面，第一，我们要了解什么样的网页算是一个完整的页面；第二，一个完整的页面需要具备什么；第三：d...
复制链接

扫一扫