当前位置:首页 » 网页前端 » webdiv
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

webdiv

发布时间: 2022-01-12 13:30:21

‘壹’ CSS+DIV和HTML到底什么关系。

网页的页面源代码统称HTML标记语言
DIV 是层 css样式 都是HTML标记语言的一种标记
div+css就是用DIV标记和css样式控制来布局WEB页面,区别于另一种用TABLE来构建页面的方法

‘贰’ javaweb-div中怎么放置入一个网页

1,用iframe标签。写法如下:

<divclass="right_iframe">
<iframeid="mainframe"width="96%"style="min-height:1260px;"scrolling="no"frameborder="0"noresize="noresize"name="mainframe"src="{:U('Index/welcome')}"></iframe>
</div>

2,在iframe的src属性上设置你的网页链接。如:http://www..com。

3,我这段代码里的src写法是thinkphp的,你可以按照jsp的传值格式来写,如:

src = "<%=request.getContextPath()%>/indexServlet?method=index"

‘叁’ web设计里面div的用法

建议看看手册 一两句 说不清 即使说了 也是误导

‘肆’ 网页设计中DIV是什么意思

在HTML网页源代码中DIV是什么意思,出现很多DIV,究竟有什么作用和功能?

在网页html中查看源代码会看到很多代码,包括DIV、span、h1、b加粗、strong等标签组成。

html中div使用截图一段HTML源代码截图其中包括div span h1标签使用

培训是针对那些有条件的人来说,很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的,为了让想学习的人可以更好的学习,给大家推荐一个裙,前面是6 5 7,中间是壹 三 七,最后面就是九 0 六,这里有很多想学习的人和你一起交流,也有大牛每天晚上免费教学,想要学习的人都可以加入我们,但是我们只欢迎想学习的人,不是来学习,随便看看的就不要进了。

DIVSPNANH1是什么意思呢?
这些标签是包裹内容作用,有的是起到布局各种各样样式而使用DIV标签,有的是为了内容加粗比如strong标签、表达是标题h1标签。

div作用
让内容包裹在DIV内,实现各式各样的美化,比如对div设置边框,这样内容就区就有边框样式、对div设置字体颜色这样对应DIV内字体就有了各式各样的颜色;对div设置背景颜色或背景图片,这样内容就有了漂亮的css背景。

div标签内使用样式实现各式各样排版,对div设置不同的css样式,实现美工图布局样式。

‘伍’ 什么是DIV(网页制作要求掌握的知识)

CSS:Cascading Style Sheet(层叠样式表、级联样式表)的缩写。 w3c给予的说明是:它是一种简单的对于web文档增加样式(诸如:字体、颜色、间隔等)的机制(Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. )。标准技术文档参见W3C的文档说明。DIV是HTML中的一个标签,即层,和TABLE是同级的。
本人认为样式表的作用就是web设计中文档设计与表现分离的需要。打个比方,整个web程序就像一个人,人有头、四肢等,这是人的基本构架,也是最基本的,没有这些,人就不能称之为人;同样web文档结构就是web程序中最基本的东东。那样式表就好像人的衣服,它是web文档的衣装,有了它,web网页才显现出千姿百态。以前没有CSS说法时,web页面设计也是各式各样的,但是注意那时文档结构和表现形式是没有分离的,就好比你的文身,刺在你的肉中(也许不是很恰当,人穿上衣服可以遮住的),没法和你分开了。文档结构和表现混和就不利于web程序的继承、再开发,因为每一次web重新设计就是一次新的项目开发了。所以我们要选择web文档结构和表现形式的分离,结构由DIV来架构,形式由CSS表现,即所谓的DIV+CSS

‘陆’ C# web div 分层显示,求个例子,感谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.div_1{
width:1600px;
height:400px;
border:2px solid #000000;;

}
.div_2{
float:left;
height:150px;
padding-top:150px;
margin-top:50px;
width:250px;
margin-left:50px;
border:2px solid #ffff00;
text-align:center;
}
.div_3{
margin-top:100px;
height:100px;
width:150px;
padding-top:100px;
background-color:#00ff40;
text-align:center;
}

</style>
</head>
<body onload="loadhtml();">
<div class="div_1">
<div class="div_3" style="float:left;" onclick="before();">左</div>
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_3" style="float:left; margin-left:50px;" onclick="next();">右</div>

</div>
</body>
</html>
<script type="text/javascript">
var _COUNT =0;
var _ARR_TEXT=['1','2','3','4','5','6','7','8','9','10'];
var _SUM=_ARR_TEXT.length;
var _ARR_DIV=document.getElementsByClassName("div_2");
function before(){
if (_COUNT > 0) {
_COUNT--;

}else if(_COUNT==0){

_COUNT=_ARR_TEXT.length-1;
}
changediv();

}
function next(){
if(_COUNT<_SUM-1){
_COUNT++;

}else if(_COUNT==_SUM-1){
_COUNT=0;
}
changediv();
}

function loadhtml(){
for(var i=0;i<_ARR_DIV.length;i++){
_ARR_DIV[i].innerHTML=_ARR_TEXT[i];

}

}
function changediv(){
var _num=_COUNT;
for (var i = 0; i < _ARR_DIV.length; i++) {
if(_num<_SUM){
_ARR_DIV[i].innerHTML=_ARR_TEXT[_num];
_num++;
}else{
_num=0;
_ARR_DIV[i].innerHTML=_ARR_TEXT[_num];
_num++;
}
}

}

</script>

这是一个图片左右移动的例子

这是嵌套图片的例子 边框啊什么都是图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="Stylesheet" href="sub.css" />
</head>
<body>
<div id="div_frame">
<div id="div_title">
<div style="float: left; margin-left: 100px; font-size: 40px; margin-top: 10px;"
id="t1">
高精细图片库</div>
<div style="float: right; margin-right: 200px; font-size: 40px; margin-top: 10px;"
id="t2">
AQUOS Life</div>
<div id="ico" style="position: absolute; top: 10px; left: 1710px;">
<img src="../Style/Image/parts/sub/4.png" />
</div>
</div>
<div id="div_body">
<div style="width: 50px; height: 492px; position: absolute; top: 293px; left: 42px;">
<img src="../Style/Image/parts/sub/2.png" />
<div style="width: 42px; height: 484px; position: absolute; top: 4px; left: 4px;">
<img src="../Style/Image/parts/sub/1.png" />
</div>
</div>
<div style="width: 527px; height: 381px; position: absolute; top: 135px; left: 134px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_bg.png" />
<div style="width: 527px; height: 381px; position: absolute; top: 0px; left: 0px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_fline.png" />
<div style="width: 500px; height: 282px; position: absolute; top: 12px; left: 13px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/phm_gallery00_f.jpg" />
<div style="position: absolute; top: 264px; left: 435px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_folder.png" />
</div>
</div>
</div>
<div style="position: absolute; top: 310px; left: 164px">
美丽的风景01
</div>
</div>
<div style="width: 527px; height: 381px; position: absolute; top: 135px; left: 697px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_bg.png" />
<div style="width: 527px; height: 381px; position: absolute; top: 0px; left: 0px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_fline.png" />
<div style="width: 500px; height: 282px; position: absolute; top: 12px; left: 13px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/phm_gallery01.jpg" />
<div style="position: absolute; top: 264px; left: 435px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_folder.png" />
</div>
</div>
</div>
<div style="position: absolute; top: 310px; left: 164px">
美丽的风景02
</div>
</div>
<div style="width: 527px; height: 381px; position: absolute; top: 135px; left: 1258px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_bg.png" />
<div style="width: 527px; height: 381px; position: absolute; top: 0px; left: 0px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_fline.png" />
<div style="width: 500px; height: 282px; position: absolute; top: 12px; left: 13px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/phm_gallery02.jpg" />
<div style="position: absolute; top: 264px; left: 435px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_folder.png" />
</div>
</div>
</div>
<div style="position: absolute; top: 310px; left: 164px">
美丽的风景03
</div>
</div>
<div style="width: 527px; height: 381px; position: absolute; top: 544px; left: 134px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_bg.png" />
<div style="width: 527px; height: 381px; position: absolute; top: 0px; left: 0px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_fline.png" />
<div style="width: 500px; height: 282px; position: absolute; top: 12px; left: 13px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/phm_gallery03.jpg" />
<div style="position: absolute; top: 264px; left: 435px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_folder.png" />
</div>
</div>
</div>
<div style="position: absolute; top: 310px; left: 164px">
美丽的风景04
</div>
</div>
<div style="width: 527px; height: 381px; position: absolute; top: 544px; left: 697px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_bg.png" />
<div style="width: 527px; height: 381px; position: absolute; top: 0px; left: 0px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_fline.png" />
<div style="width: 500px; height: 282px; position: absolute; top: 12px; left: 13px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/phm_gallery04.jpg" />
<div style="position: absolute; top: 264px; left: 435px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_folder.png" />
</div>
</div>
</div>
<div style="position: absolute; top: 310px; left: 164px">
美丽的风景05
</div>
</div>
<div style="width: 527px; height: 381px; position: absolute; top: 544px; left: 1258px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_bg.png" />
<div style="width: 527px; height: 381px; position: absolute; top: 0px; left: 0px">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_fline.png" />
<div style="width: 500px; height: 282px; position: absolute; top: 12px; left: 13px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/phm_gallery05.jpg" />
<div style="position: absolute; top: 264px; left: 435px;">
<img src="124/design/slicefiles_1080/ph_optimizeB/6_thumbnail_folder.png" />
</div>
</div>
</div>
<div style="position: absolute; top: 310px; left: 164px">
美丽的风景06
</div>
</div>
<div style="width: 50px; height: 492px; position: absolute; top: 293px; left: 1828px;">
<img src="../Style/Image/parts/sub/3.png" />
<div style="width: 42px; height: 484px; position: absolute; top: 4px; left: 4px;">
<img src="../Style/Image/parts/sub/1.png" />
</div>
</div>
<div style="position: absolute; top: 942px; left: 850px; font-size: 50px; letter-spacing: 20px;">
1/20
</div>
<div style="position: absolute; top: 959px; left: 1030px; font-size: 30px;">

</div>
<div id="div_bottom" style="position: absolute; left: 0px; top: 962px;">
<img src="../Style/Image/parts/blackgradation.png" />
<table width="100%" class="statusBar" cellpadding="0" style="position: absolute;
top: 80px; left: 0px;" cellspacing="0" border="0">
<tr>
<td>
<img src="../Style/Image/parts/guidance_01_cross.png" style="margin-left: 33px;" />
<div class="content" style="width: 141px">
○○○○</div>
<img src="../Style/Image/parts/guidance_02_internet.png" style="margin-left: 15px;" />
<div class="content">
退出:BesTV</div>
<img class="img_color" src="../Style/Image/parts/guidance_03_green.png" style="margin-left: 151px;" />
<div class="content_color">
○○○○</div>
<img class="img_color" src="../Style/Image/parts/guidance_04_red.png" />
<div class="content_color">
○○○○</div>
<img class="img_color" src="../Style/Image/parts/guidance_05_yellow.png" />
<div class="content_color">
○○○○</div>
<img class="img_color" src="../Style/Image/parts/guidance_06_blue.png" />
<div class="content_color">
○○○○</div>
</td>
<td align="right">
<div id="div_datetime" style="margin-right: 33px;">
12月6日 16时30分</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

图片就没有script 布局是可以的 就看你有相对应的素材没了

‘柒’ web前端如何实现一个div固定在某个位置

在前端里面,如何将一个div固定在某个位置,属于css内position定位的内容。position定位属性有五种类型,分别如下:
1.static 定位。html元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
2.fixed 定位。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
3.relative 定位。相对定位元素的定位是相对其正常位置。
4.absolute 定位。绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于整个页面。
5.sticky 定位。粘性定位是基于用户的滚动位置来定位。它依赖于用户的滚动,在position:relative与position:fixed定位之间切换。

‘捌’ javaweb div干嘛的

你好:说白了就是化模块的,你去淘宝看的那些一个一个的类别都是用div分的模块,或者你现在按F12你看看底下都是div分的页面结构

‘玖’ 网页设计的html是什么意思div+css是什么意思我不懂,求详细解答

html是 超文本标记语言或超文本链接标示语言
DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。

通俗点解释,html页面通过div+css展示内容。html搭台,css唱戏。
html中div搭起一个个“区块”,“区块”的宽高位置背景等属性由css来控制。

‘拾’ HTML中如何让两个div并排显示,举个例子

在HTML中让两个div并排显示,通常情况下有三种实现方式,包括:

(1)设置为行内样式,display:inline-block

(2)设置float浮动

(3)设置position定位属性为absolute

以下为三种方式的具体实现代码:

1、设置每个div的展现属性为行内样式,示例代码为:

<div class="app">

<div style="display:inline-block;background:#f00;">div1</div>

<div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div>

</div>