Jadual Kandungan
回复讨论(解决方案)
Rumah hujung hadapan web html tutorial div自适应宽度的问题,求高手帮忙!_html/css_WEB-ITnose

div自适应宽度的问题,求高手帮忙!_html/css_WEB-ITnose

Jun 21, 2016 am 09:26 AM
div lebar Adaptif tuan


在左侧做了一个可以自动伸缩的菜单栏,想让菜单栏展开时,完全展开右面带地图的div,而不是被左面的菜单遮住一部分,该怎么解决?

这是菜单展开的图:搜索

这是菜单隐藏的图:

这是body:
    

        
 
        

             

        
    
    

这是样式表:

    #common_box{
     width:280px;
     height :100%;
     position:fixed;
     left:0;
     top:40px;
     border:1px solid #789;
     background:#fff;
     z-index:99
    }
    #cli_on{
     width:10px;
     height:100%;
     float:right;
     cursor:pointer;
     background:#ccc;
     text-align:center;
     line-height:180px;
     font-size:24px;
     color:#f00;
    }
    .mydiv
    {
        position:fixed;
        top:40px;
        left:0px;
        width: 100%;
        height:650px;
        }

这是伸缩菜单的js:
    <script> <br /> //左侧弹出菜单 <br /> window.onload = function () { <br /> var common_box = document.getElementById("common_box"); <br /> var cli_on = document.getElementById("cli_on"); <br /> var flag = true, r_len = 0, timer = null; <br /> cli_on.onclick = function () { <br /> if (flag) { <br /> r_len = 0; <br /> timer = setInterval(slideright, 10); <br /> <br /> } else { <br /> r_len = -270; <br /> timer = setInterval(slideleft, 10); <br /> } <br /> } <br /> function slideright() { <br /> if (r_len <= -270) { <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> clearInterval(timer); <br /> return false; <br /> <br /> } else { <br /> r_len -= 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> function slideleft() { <br /> <br /> if (r_len >= 0) { <br /> clearInterval(timer); <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> return false; <br /> } else { <br /> r_len += 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> <br /> } <br /> </script>
就是想改成像这个网站论坛首页左面菜单栏的那种感觉。


回复讨论(解决方案)

你这个页面的布局不对啊,你看你使用的是position:fixed。在控制显示位置的,这个很明显的,就会出现覆盖这个问题了。

这个你可以这么处理:
左侧的那块,使用定位处理,而右侧的那块,不使用定位,但是使用一个margin-left来控制左侧空出来的距离

当你左侧的更改时,同时改变右侧的那个margin-left的值就行了。

我这么说,能想明白吗?

mydiv{	margin-top:40px;	background-color:#eee;	height:650px;	margin-left:280px;}
Salin selepas log masuk
Salin selepas log masuk


window.onload = function () {	var common_box = document.getElementById("common_box");	var cli_on = document.getElementById("cli_on");	var mapDiv = document.getElementById("mapDiv");	//zheli	var flag = true, r_len = 0, timer = null;	cli_on.onclick = function () {		if (flag) {			r_len = 0;			timer = setInterval(slideright, 10);		} else {			r_len = -270;			timer = setInterval(slideleft, 10);		}	}	function slideright() {		if (r_len <= -270) {			flag = !flag;			cli_on.innerHTML = "";			clearInterval(timer);			return false;		} else {			r_len -= 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}	function slideleft() {		if (r_len >= 0) {			clearInterval(timer);			flag = !flag;			cli_on.innerHTML = "";			return false;		} else {			r_len += 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}}
Salin selepas log masuk
Salin selepas log masuk


在你的基础上,稍微改了一点。试试是你要的效果吗?没有测兼容性。

不过,一些效果的话,html部分的布局也是很重要的,先想好布局,之后的js和css写起来,才会更简单的。

感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk


嗯,按照你的帮助修改运行了一下代码,果真左面的菜单栏不会覆盖右面的地图了,但在菜单栏隐藏时,右面的地图会在右面留出15%的空白,没法被自动填充


感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk


嗯,按照你的帮助修改运行了一下代码,果真左面的菜单栏不会覆盖右面的地图了,但在菜单栏隐藏时,右面的地图会在右面留出15%的空白,没法被自动填充


我写的效果就是需要手动重绘地图的,你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码,这样地图才能自动适应画面变化。

mydiv{	margin-top:40px;	background-color:#eee;	height:650px;	margin-left:280px;}
Salin selepas log masuk
Salin selepas log masuk


window.onload = function () {	var common_box = document.getElementById("common_box");	var cli_on = document.getElementById("cli_on");	var mapDiv = document.getElementById("mapDiv");	//zheli	var flag = true, r_len = 0, timer = null;	cli_on.onclick = function () {		if (flag) {			r_len = 0;			timer = setInterval(slideright, 10);		} else {			r_len = -270;			timer = setInterval(slideleft, 10);		}	}	function slideright() {		if (r_len <= -270) {			flag = !flag;			cli_on.innerHTML = "";			clearInterval(timer);			return false;		} else {			r_len -= 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}	function slideleft() {		if (r_len >= 0) {			clearInterval(timer);			flag = !flag;			cli_on.innerHTML = "";			return false;		} else {			r_len += 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}}
Salin selepas log masuk
Salin selepas log masuk


在你的基础上,稍微改了一点。试试是你要的效果吗?没有测兼容性。

不过,一些效果的话,html部分的布局也是很重要的,先想好布局,之后的js和css写起来,才会更简单的。


试了一下,效果实现了!是不是用position:fixed;直接固定位置挺不好的?



感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图,由于之前它们已经绘制完毕了,左右移动时,不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的),就是由于初始时加载的画面太小已经固定,不能动态适应宽度变化(当你向左侧移动地图时,右侧新增的部分应该不会被自动填充)。
因此,我建议应该在timer的事件中改变两侧div的宽度,同时重新填充div中的内容,使其适应宽度的变化。

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk


嗯,按照你的帮助修改运行了一下代码,果真左面的菜单栏不会覆盖右面的地图了,但在菜单栏隐藏时,右面的地图会在右面留出15%的空白,没法被自动填充
我写的效果就是需要手动重绘地图的,你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码,这样地图才能自动适应画面变化。
地图这个只在mapDiv里加载,想要完全加载只能靠改变div的宽度来实现了

定位浮动什么的,我会觉得,能少用,就尽量少用,如果用的太多,以后添加功能,更改样式时,都会变得更难。

当然,有时候也不得不用,只要不是把所有的布局,都用float,position这样就好了。

也算是个人习惯。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengkonfigurasi kecerahan penyesuaian kandungan pada Windows 11 Bagaimana untuk mengkonfigurasi kecerahan penyesuaian kandungan pada Windows 11 Apr 14, 2023 pm 12:37 PM

Kecerahan penyesuaian ialah ciri pada komputer Windows 11 yang melaraskan tahap kecerahan skrin anda berdasarkan kandungan yang dipaparkan atau keadaan pencahayaan. Memandangkan sesetengah pengguna masih membiasakan diri dengan antara muka baharu Windows 11, Adaptive Brightness tidak dapat ditemui dengan mudah, malah ada yang mengatakan ciri Adaptive Brightness tiada pada Windows 11, jadi tutorial ini akan membersihkan semuanya. Contohnya, jika anda menonton video YouTube dan video itu tiba-tiba menunjukkan pemandangan gelap, Kecerahan Suaian akan menjadikan skrin lebih cerah dan meningkatkan tahap kontras. Ini berbeza daripada kecerahan automatik, iaitu tetapan skrin yang membolehkan komputer, telefon pintar atau peranti anda melaraskan tahap kecerahan berdasarkan pencahayaan ambien. Terdapat yang istimewa di kamera hadapan

Cara menggunakan css untuk menyedari bahawa div tiada sudut Cara menggunakan css untuk menyedari bahawa div tiada sudut Jan 30, 2023 am 09:23 AM

Kaedah CSS untuk menyedari bahawa div tiada sudut: 1. Buat fail sampel HTML dan tentukan div 2. Tetapkan warna latar lebar dan ketinggian untuk div 3. Tambah kelas pseudo pada div yang perlu dipadamkan; sudut, dan tetapkan kelas pseudo kepada Gunakan warna yang sama dengan warna latar belakang, kemudian putarkannya 45 darjah, dan kemudian letakkannya ke sudut yang perlu dialih keluar.

Bagaimana untuk membina antara muka mudah alih adaptif dengan Vue? Bagaimana untuk membina antara muka mudah alih adaptif dengan Vue? Jun 27, 2023 am 11:05 AM

Dengan populariti Internet mudah alih, semakin banyak laman web dan aplikasi perlu mempertimbangkan pengalaman mudah alih. Sebagai rangka kerja bahagian hadapan yang popular, Vue mempunyai reka letak responsif dan keupayaan penyesuaian, yang boleh membantu kami membina antara muka mudah alih adaptif. Artikel ini akan memperkenalkan cara menggunakan Vue untuk membina antara muka mudah alih adaptif. Menggunakan rem dan bukannya px sebagai unit dan menggunakan px sebagai unit dalam antara muka mudah alih boleh mengakibatkan kesan paparan yang tidak konsisten pada peranti yang berbeza. Oleh itu, adalah disyorkan untuk menggunakan rem dan bukannya px sebagai unit. rem adalah relatif

Bagaimana untuk melaksanakan saiz imej penyesuaian menggunakan unit CSS Viewport vmin dan vw Bagaimana untuk melaksanakan saiz imej penyesuaian menggunakan unit CSS Viewport vmin dan vw Sep 13, 2023 am 08:18 AM

Cara menggunakan unit CSSViewport vmin dan vw untuk melaksanakan saiz imej adaptif Dalam reka bentuk web, kita sering menghadapi situasi di mana imej perlu disesuaikan dengan saiz skrin. Untuk mencapai matlamat ini, CSS menyediakan unit berkuasa - unit port pandang. Antaranya, vmin mewakili peratusan sisi yang lebih kecil lebar viewport, dan vw mewakili peratusan lebar viewport. Oleh itu, kita boleh menggunakan kedua-dua unit ini untuk mencapai kesan saiz imej penyesuaian. Khususnya akan diperkenalkan di bawah

Pelaksanaan skrip pelayar terjemahan penanda perkataan berdasarkan API ChatGPT Pelaksanaan skrip pelayar terjemahan penanda perkataan berdasarkan API ChatGPT May 01, 2023 pm 03:28 PM

Prakata Baru-baru ini, terdapat skrip pelayar berdasarkan ChatGPTAPI di GitHub, openai-translator Dalam tempoh yang singkat, bintang itu telah mencapai 12k Selain menyokong terjemahan, ia juga menyokong fungsi penggilap dan ringkasan -in, ia juga menggunakan pembungkusan tauri Jika anda mempunyai klien desktop, selain daripada fakta bahawa tauri menggunakan bahagian karat, bahagian pelayar masih agak mudah untuk dilaksanakan Hari ini kami akan melaksanakannya secara manual. Antara muka yang disediakan oleh openAI, sebagai contoh, kita boleh menyalin kod berikut dan memulakan permintaan dalam konsol penyemak imbas untuk melengkapkan terjemahan //Const constOPENAI_API_KEY="s

Apakah model kotak div Apakah model kotak div Oct 09, 2023 pm 05:15 PM

Model kotak div ialah model yang digunakan untuk reka letak halaman web Ia menganggap elemen dalam halaman web sebagai kotak segi empat tepat Model ini mengandungi empat bahagian: kawasan kandungan, padding, sempadan dan margin. Kelebihan model kotak div ialah ia boleh mengawal reka letak halaman web dengan mudah dan jarak antara elemen Dengan melaraskan saiz kawasan kandungan, jidar dalam, jidar dan jidar luar, pelbagai kesan susun atur boleh dicapai model kotak juga menyediakan beberapa Sifat dan kaedah boleh mengubah gaya dan tingkah laku kotak secara dinamik melalui CSS dan JavaScript.

Apakah perbezaan antara iframe dan div Apakah perbezaan antara iframe dan div Aug 28, 2023 am 11:46 AM

Perbezaan antara iframe dan div ialah iframe digunakan terutamanya untuk memperkenalkan kandungan luaran, yang boleh memuatkan kandungan dari tapak web lain atau membahagikan halaman web kepada berbilang kawasan Setiap kawasan mempunyai konteks penyemakan imbas bebasnya sendiri, manakala div digunakan terutamanya untuk membahagikan dan mengatur kandungan untuk reka letak dan kawalan gaya.

Bolehkah vue menjadi adaptif? Bolehkah vue menjadi adaptif? Dec 30, 2022 pm 03:25 PM

Vue boleh mencapai penyesuaian diri Kaedah untuk mencapai penyesuaian diri ialah: 1. Pasang komponen "kotak skala" melalui arahan "pemasangan npm" atau "tambah benang", dan gunakan "kotak skala" untuk mencapai penskalaan penyesuaian. ; 2. Melalui Tetapkan nisbah piksel peranti untuk mencapai penyesuaian diri 3. Tetapkan atribut zum melalui JS untuk melaraskan nisbah zum untuk mencapai penyesuaian diri.

See all articles