W3SCHOOL上为啥没有DIV教程?只看到了CSS教程,没有DIV教程.为啥???????

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了W3SCHOOL上为啥没有DIV教程?只看到了CSS教程,没有DIV教程.为啥???????相关的知识,希望对你有一定的参考价值。

div (division)就是html的一个标签而已。就和html里的其他标签如ul(无序列表),p(段落),table(表格),b(粗体)等等是一样的,只不过其他标签都是有语义的,div只是一个块级元素的代表,它在某种意义上代表html,所以一般教程会叫div+css,因为css是要结合html标签才能发挥作用的。
一个标签怎么会有一个单独的教程呢?
参考技术A div属于html教程中的一部分
况且,div没有什么教程可言,他无非就是一个标签<div></div>最多你给他加个样式名:<div class="abc"></div>
然后你给这个样式进行定义,也就是css
说到底,重点在css,而不是div追问

我在HTML教程中没找到DIV

本回答被提问者和网友采纳
参考技术B DIV就是跟css相关连的 你直接看css也是一样的 你就是要学网页布局吧 看css就可以了 参考技术C DIV是标签的统称,就像盖人的骨架,
CSS是标签的样式,就像是人的肉啊穿衣化妆啥的,赋予骨架样式。

为啥我在使用 ThreeJS 和 VueJS 时只看到黑色背景?

【中文标题】为啥我在使用 ThreeJS 和 VueJS 时只看到黑色背景?【英文标题】:Why am I only seeing a black background using ThreeJS with VueJS?为什么我在使用 ThreeJS 和 VueJS 时只看到黑色背景? 【发布时间】:2021-08-10 12:39:09 【问题描述】:

我在我的项目中添加了一个组件,我打算在其中使用 ThreeJS。 我想用我的两个盒子看到一个“浅色”背景。 我尝试添加一些代码来在我的窗口中呈现两个框,但我只看到黑色背景,你知道我做错了什么吗?

这是我的组件代码:

<template>
<body>
<div id='change'>    
    <router-link class="changepage" to='/OrdreCouches'> >Retour </router-link>    
</div> 
  <div id="container"></div>
</body>
</template>



<script>
import * as THREE from 'three'
import * as dat from 'dat.gui'

export default 
  name: 'Visualisation',
  data() 
    return 
      cube: null,
      cube2: null,
      renderer: null,
      scene: null,
      camera: null,
      group: null
    
  ,
  mounted() 
    this.scene = new THREE.Scene()
    this.scene.background = new THREE.Color( 0xf0f0f0)
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      1,
      10000
    )

    this.renderer = new THREE.WebGLRenderer( antialias:true )
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(this.renderer.domElement)

    const geometry2 = new THREE.BoxGeometry(390, 155, 240)
    const material2 = new THREE.MeshBasicMaterial( color: 0x0246464 )
    const geometry = new THREE.BoxGeometry(390, 155, 240)
    const material = new THREE.MeshBasicMaterial( color: 0x00ff00 )
    this.cube = new THREE.Mesh(geometry, material)
    this.cube2 = new THREE.Mesh(geometry2, material2)
    
    this.cube.position.set(170,0,485)
    this.cube2.position.set(80,0,195)

    this.group = new THREE.Group()
    this.group.add(this.cube)
    this.group.add(this.cube2)

    this.scene.add(this.group)

    const gui = new dat.GUI()
    const camerafolder = gui.addFolder("camera")
    camerafolder.add(this.camera.position, "x", 0, 300, 0.01)
    camerafolder.add(this.camera.position, "y", 0, 300, 0.01)
    camerafolder.add(this.camera.position, "z", 0, 1500, 0.01)
    camerafolder.open()
  

</script>

<style>
* padding: 0; margin: 0

.changepage
  position: absolute;
  color: rgb(0, 0, 0);
  font-size: 30px;

.changepage:hover
  position: absolute;
  color: rgb(53, 20, 199);
  font-size: 30px;

</style>

感谢您的帮助!

【问题讨论】:

【参考方案1】:

您可以使用 vue ref 来引用 DOM 元素,而不是使用 document.body.appendxxx。 BoxGeometry 的尺寸太大而无法显示,您忘记设置相机和渲染场景。

这是基于您的代码的代码框示例:

https://codesandbox.io/s/charming-water-52r64?file=/src/components/HelloWorld.vue:863-874

// use ref to get reference of element instead of using document.getxxx/queryxxxx
this.$refs.container.appendChild(renderer.domElement);

// render
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 3;
renderer.render(scene, camera);

【讨论】:

太棒了!谢谢!但现在我有另一个问题。我想在挂载的末尾添加一个名为 animate 的方法,但我不知道如何访问我在挂载部分中创建的多维数据集、组等 如果你想在 vue 方法中访问多维数据集和分组,只需使用这个。更新了代码框供您查看 当我尝试做你所做的事情时,我得到了TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#&lt;Matrix4&gt;' but got '[object Object]') codesandbox.io/s/infallible-sinoussi-h9hld?file=/src/components/… 在代码框上我没有收到 TypeError 消息,我不知道为什么。我的项目中有完全相同的脚本。当我启动页面时会出现 TypeError 代码没有错误,如何重现你的问题?

以上是关于W3SCHOOL上为啥没有DIV教程?只看到了CSS教程,没有DIV教程.为啥???????的主要内容,如果未能解决你的问题,请参考以下文章

CSS为啥我设置了缩进但是没效果

在W3School网上教程为什么找不到javascript的showmodalDialog方法?

[Spring]IOC控制反转

为啥我在张量板上只看到大约一百个边界框?

css 相对定位 绝对定位 浮动 分析

用ps cs5做好的水印,添加到图片上的时候为啥会这么大,请详细解答!