導航:首頁 > 萬維百科 > 網頁設計盒子的使用方法

網頁設計盒子的使用方法

發布時間:2021-01-22 09:34:29

1、網頁設計,點擊彈出div 盒子

效果圖:


簡單的代碼:


<html>

<head>

<style>

*{margin:0;padding:0;}

#_outs{margin:0 auto;height:50px;width:200px;margin-top:200px;position:relative;}

#_ins{position:absolute;height:50px;width:200px;border:1px solid green;top:15px;left:100px;border-radius:5px;display:none;text-


align:center;line-height:50px;}

</style>


<script>

function tanchu(){

document.getElementById("_ins").style.display="block";


}

function guanbi(){

document.getElementById("_ins").style.display="none";


}

</script>

</head>

<body>

<div id="_outs">

<input type="button" value="點擊按鈕彈出div" onclick="tanchu()"></input>

<div id="_ins">彈出div

<input type="button" value="點擊按鈕關閉div" onclick="guanbi()"></input>

</div>


</div>



</body>

</html>



自己可以復制代碼運行下, 應該是你要弄的效果吧。有不理解的可以追問我哦!記得採納哦。或者選為優質。謝謝啦。。。。。

2、CSS盒子模型有什麼用處,怎麼用

css中的盒子模型是為了讓你你充分理解div+css模型的定位功能,就是利用盒子模型這樣的回布局方式代替答了傳統的表格布局方式。所以盒子模型是在學習div+css布局方式中必須要學習的一個模型,通過這個模型你就可以明白網頁中div和div之間的相對位置是如何布局的。
補充:
網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。
這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也就是能裝東西的一種箱子,也具有這些屬性,所以叫它盒子模式。
CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型

3、網頁設計,用div盒子製作網頁,要怎麼樣才能把綠色盒子放到紅色盒子下面,把綠色盒子的圖片當做背景來

想讓綠色盒子當做背景,可以讓綠色盒子的div包含紅色盒子的div,就是紅色盒子的div是綠色盒子的div的一部分。

4、DW2019怎麼在設計頁面插入盒子?

頁面的布局用 width(寬) height(高)比如設置一個盒子是寬120px,高200px,代碼是<div style="width:120px;height:200px;">這是一個120*200的盒子</div>,字體大小設置用font 比如字體大小為18像素<font size="18px"></font> 。

5、怎樣使網頁設計中的css盒子內容居中?

css盒子內容居中的方法:

css盒子內容水平居中的text-align:center ;或 margin:0 auto;

代碼:

效果:

垂直居中的line-height;

代碼:

效果:

絕對定位水平垂直居中,position:absolute;top:50%;left:50%;

代碼:

效果:

6、網頁設計怎樣在一個盒子點鏈接,在另一個盒子調入外部網頁

調入外部網頁,請用iframe標簽,使用div盒子是沒這個效果的

7、網頁設計:如何讓新點擊的鏈接在主頁面的某個盒子中打開

用<iframe>框架就可以了,上面鏈接的目標就是框架的名稱

8、網頁設計CSS和盒子相關問題,詳細見圖

第一題:float:right; right:30px; (right: 30px;是定位的屬性)
第二題:div1四個方向各10px外邊距,div2四個方向各5px外邊距,當div1、2左右排列時,兩者之間為10px+5px,當div1、2上下排列時,正常情況下就不是10px+5px了,5px被合並到10px裡面去了,這個叫:外邊距自動合並
外邊距自動合並主要是用來解決上下排版(特別是段落之間)的美觀問題,你可以自行百度下,不過有時候外邊距自動合並會失效,需要給其中一個div加內邊距或邊框才能解決。

9、如何實現網頁設計立體盒子效果

這是一個正在逐漸流行的創意的趨勢。事實上它非常容易實現,只需要增加了一個額外的元素和獨特的設計。讓我們看一下該如何實現立體盒子的效果吧,然後,我們將會給大家展示一些很好的例子。准備先准備好你的頁面和圖片,我們使用這張圖片:我們簡單的將HTML寫成這樣: <p id="container"> <img id="logo" src="logo.png" alt="Lee Munroe" /> </p>CSS樣式可能會是這個樣子的:body{background:#999;} #container{ width:960px; background:#fff; margin:20px auto; padding:10px; }下面是一個效果預覽:設置為相對定位當我們定位logo的時候,我們希望它的位置是相對於容器的,因此使用相對定位:#container{ width:960px; background:#fff; margin:20px auto; padding:10px; position:relative; }將它定位到盒子的外面現在你需要做的就僅僅是定位logo,將其水平定位,讓它從容器中突出出來。

與網頁設計盒子的使用方法相關的知識