導航:首頁 > 萬維百科 > divcss網頁設計視頻

divcss網頁設計視頻

發布時間:2020-11-18 21:30:20

1、誰有網頁設計、網頁切割、DIV+CSS的文字教程和視頻教程啊?

到w3c在線教程網學習吧。
先學HTML語言和XHTML語言——一星期就能學完,再學CSS和JavaScript——一星期也內能學完,再學些容ASP或者PHP——一個月就能學完。

w3c在線教程網網址:
http://www.w3school.com.cn/

2、求教學一個div+css網頁製作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>教學</title>
<style>
*{
  margin:0;
  padding:0;
}
.wrap{
  width:960px;
  margin:0 auto;
}
a{
  text-decoration:none;
}
.top{
  width:100%;
  height:5px;
  background-color:#039;
}
.header{
  width:100%;
  height:200px;
  position:relative;
  background-color:#6F3;
}
.header .logo{
  color:#000000;
  margin:20px 100px;
}
.header p{
  position:absolute;
  right:0;
  top:0;
  background-color:rgba(0,0,0,.3);
}
.header p a{
  margin:5px 10px;
  display:inline-block;
}
.header a{
  margin-left:15px;
  color:#ffffff;
}
.nav{
  height:30px;
  background-color:#C60;
}
.nav ul{
  overflow:hidden;
  width:90%;
  margin:0 auto;
}
.nav ul li{
  list-style:none;
  float:left;
  width:9%;
  text-align:center;
  border-right:1px solid #ffffff;
}
.nav ul li a{
  line-height:30px;
  color:#ffffff;
}
.nav ul li a:hover{
  color:#F00;
}
</style>
</head>

<body>
<div class="top">
</div>
<div class="wrap">
    <div class="header">
        <a href="#" class="logo">logo</a>
        <p>
            <a href="#">加入收藏</a>
            <a href="#">設為首頁</a>
        </p>
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">技術文章</a></li>
            <li><a href="#">行業動態</a></li>
            <li><a href="#">IT行業</a></li>
            <li><a href="#">資源下載</a></li>
            <li><a href="#">酷圖欣賞</a></li>
            <li><a href="#">程序開發</a></li>
            <li><a href="#">設計資訊</a></li>
            <li><a href="#">論壇</a></li>
            <li><a href="#">素材下載</a></li>
            <li><a href="#">English</a></li>
        </ul>
    </div>
</div>
</body>
</html>

大概就是這個意思,要想精確製作,都是需要psd源文件的。

3、誰能給我一個div+css製作的網頁實例視頻啊,最好能清晰的解析的,一步步操作的....

一個頁面如果你會做的話,就算是新手3小時內包括切圖+布局足夠做一個簡單的頁面出來了
如果連一個基本的頁面都不會做,那我只能告訴你,面試的公司不會跟你多說話,因為面試的人首先是先問你一些專業上的問題,你練做都不會做的話,怎麼可能回答的出來或者回答的准確?!我也曾經幫公司面試過網頁美工,公司是想招個剛畢業的培養一下幫我減輕負擔,我也清楚現在很多剛畢業的學生是什麼狀況,因為我也才畢業3年而已,當初也是不太會後來慢慢學習才提高能力的,當我面試好幾個人的時候,我也是希望能給他們一些機會,但實在是沒辦法,我問的問題都是最基本的
比如:
1、平常用什麼軟體做網頁?
2、解釋一下「用戶體驗」,怎麼做好「用戶體驗」
3、看了對方做的網站後,我問了一下對方的構架思路,面試了幾個人都是講不出所以然來的或者講的跟寫的頁面完全不一樣,而且我用Firefox看頁面的布局及樣式一看就知道不是他寫的,就知道肯定是別處搞來的,碰到這樣的我都會問一下:「這個都是你一個人寫的么?」
當然問的問題不只這些,面試的時候有時候也會瞎聊,是金子是鐵很容易看出來的,最後我給老闆推薦了2個人,其中有一個是不太會的畢業生,但是當我問是不是他做的時候,他的回答是:「這個是我對照網上的模板修改的」,最終老闆聽了我給這2個人的介紹後選了這個不會的,原因很簡單,他雖然「作弊」了,但是能夠承認錯誤,而且面試的時候能夠感覺出來他是個能學習的,還一個原因,就是要的工資不高;
現在他還在公司做呢,已經3個月了,確實學習的很快

最後給樓主一個建議,你專門話一兩天時間惡補一下基礎,然後對著網上的一些頁面模仿的做一個出來,可以模仿和參考,但不要抄襲,面試的時候謙虛一點,完全不會的就說不會,很多公司真正要招人的話都是找幾年工作經驗的,能讓剛畢業的去面試就說明不太在意是不是很精通,但至少要有上進心

4、DW (dreamweaver)網頁製作DIV CSS布局詳解視頻教程

DIV+CSS 網頁製作,建議還是先多了解一下他的基本實現原理,頁面實現基本機制,從基礎的學起,可以先看看 http://www.w3school.com.cn/ 上面關於 XHTML 以及 CSS 的內容,當然,有時間的話,也可以先看看 HTML 的內容。
里邊,講解的過程中會有示例在線練習,預覽效果,很是方便。
大概了解基本原理,會有一些簡單標簽屬性之後,可以多看看別人寫的。
至於視頻教程,又不是 photoshop , 講解太慢,而且沒必要哈。

5、div+css製作一個小網頁

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>
.selected{
background: #ffda44;
color: #fff;
}
</style>
</head>
<body>

<ul class="question1">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question3">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question4">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question5">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<button>交卷</button>

<script>
$(function(){
// 正確答案
var answerArr = ["1","4","3","2","2"];
// 考生答案
var arr = ['','','','',''];
//選擇答案
$("ul li").click(function(event) {
//選中的答案添加樣式
$(this).addClass('selected').siblings().removeClass('selected');
//獲取題目的索引
var ulIndex = $(this).parent().index();
//獲取選中選項的索引並賦值到arr中
var selectedIndex = $("ul").eq(ulIndex).find("li.selected").index()+1;
arr[ulIndex] = selectedIndex;
});
$("button").click(function(event) {
//分數
var grade = 0;
//判斷答案是否正確, 正確加一分
var ulLength = $("ul").length;
for (var i = 0; i < ulLength; i++) {
if (arr[i]==answerArr[i]) {
grade++;

}
alert(grade);
});
})
</script>
</body>
</html>

看看合適不

6、用div+css製作網頁時怎麼在網頁中插入音樂啊,代碼?謝謝各位高手大神們幫幫忙

背景音樂代碼精簡 1、<embed src="背景音樂網址" hidden="true" autostart="true" loop="true"> --------hidden="true"表示隱藏播放,即不顯示播放器的外觀,若要想顯示,把"true" 替換為"false"即可,這樣為默認是最小化播放,若還想具體顯示播放器的大小,另加上height="高度值" width="寬度值" 就可以了。 -------autostart="true"表示當前頁一載入則自動播放,若不希望播放改為autostart="false" 即可... ------ loop="true"表示無限次循環播放音樂直到當前頁關閉為止,不想循環播放替換為 loop="false"就OK了 2、<embed src="背景音樂網址" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" > -----------loop="-1" 表示無限次循環播放,可設置播放次數,用具體數字代替即可,比如我希望它播放兩次,則loop="2" ---------controls="ControlPanel"這個控制選項可省略 --------width="0" height="0"表示隱藏播放,和前面的一樣。 若欲設置播放器的外觀,則替換為具體的數值就可以了,比如width="123" height="100" -------------------------------------------------- 其實要說最簡化的播放背景音樂的代碼,則下面的代碼是最簡單的了---> <embed src="背景音樂網址" > ----------------------------------------------------- 另外:bgsound src="背景音樂路徑" loop="-1"> 這個只支持IE瀏覽器,而且是完全下載完後才開始播放,不像前面所說的格式那樣可以一邊緩沖一邊播放。這個一般用於mid音樂或較小的mp3,wav格式的音樂. 若是較大的文件還是用前面所說的格式吧~~ <bgsound src="背景音樂路徑" loop="-1">這個隨瀏覽器的打開而播放,當最小化窗口時即停止播放,當最大化窗口時又開始播放。 而,<embed src="背景音樂網址" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" >常用於mid,,wav,mp3類型的音樂類型. 這個則不管是否最小化窗口都始終播放,直至關閉當前窗口為止~~ 支持的音樂文件類型:只支持MP播放器所支持的音樂格式,比如mp3,asf,wma,asx等等. 不支持rm,ram.... 視頻文件的插入方法也和上面所說的一樣,設置好合適的 音樂代碼解釋 <embed autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" src=" http://guest.anyp.cn/uploads/01.mid"> 解釋一下: AUTOSTART="TRUE / FALSE" 是否要在音樂檔傳完之後,就自動播放音樂。 TRUE 是要 FALSE 是不要,內定值是不要。 LOOP="TRUE / FALSE / 整數" 設定是否要自動反覆播放,LOOP=2 表示重復兩次,若要無限次重復可用 LOOP="TRUE" WIDTH 和 HIGH="整數" 設定控制面版的寬度和高度 CONTROLS="CONSOLE / SMALLCONSOLE / PLAYBUTTON / PAUSEBUTTON / STOPBUTTON / VOLUMELEVER" 設定控制面板的樣子,預設值是 CONSOLE CONSOLE 一般正常的面板 SMALLCONSOLE 較小的面板 PLAYBUTTON 只顯示播放按鈕 PAUSEBUTTON 只顯示暫停按鈕 STOPBUTTON 只顯示停止按鈕 VOLUMELEVER 只顯示音量調整鈕

7、求一個網頁製作高手用div+css做一個網頁布局 急 謝謝!!!!!!!!!!!

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
#containt{ height:530px; width:400px; margin:0 auto; border:1px solid #000000;}
#top{ height:100px; width:380px; margin-top:7px; margin-left:9px;}
#top_left{ height:100px; width:138px; float:left; border:1px solid #000000; border-right:none;}
#top_right{ height:100px; width:238px; float:left; border:1px solid #000000;}
#content{ height:50px; width:380px; margin-top:5px; margin-left:9px; border:1px solid #000000;}
#bottom{ height:350px; width:380px; margin-top:5px; margin-left:9px;}
#bom_left{ height:350px; width:138px; float:left; border:1px solid #000000;}
#bom_right{ height:350px; width:235px; float:left; border:1px solid #000000; margin-left:3px;}
.b_r_div{ height:100px; width:68px; margin-left:6px; float:left; margin-top:5px; border:1px solid #000000;}
#b_r_bottom{ height:120px; width:225px; margin-left:5px; float:left; margin-top:5px; border:1px solid #000000;}
</style>
</head>
<body>
<div id="containt">
<div id="top">
<div id="top_left"></div>
<div id="top_right"></div>
</div>
<div id="content"></div>
<div id="bottom">
<div id="bom_left"></div>
<div id="bom_right">
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div id="b_r_bottom"></div>
</div>
</div>
</div>
</body>
</html>

8、網頁設計中html5的video 標簽如何寫才能使得視頻文件填滿整個div?

想要video能自動填充慢父div的大小,只要給video標簽加上style="width= 100%; height=100%; object-fit: fill"即可。

object-fit語法

object-fit屬性的語法非常的簡單:

object-fit:fill | contain | cover | none | scale-down

object-fit取值說明

object-fit主要適合於替換元素,比如:<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默認值為fill。object-fill取值的說明如下:

fill:此值為boject-fit的默認值,替換內容的大小被設置為填充元素的內容框,也就是說,元素的內容擴大到完全填充容器的外形尺寸,即使這打破其內在的寬高比。

contain:替換元素內容大小保持長寬比例填充元素內容容器,其具體對象大小被解析為一個包含元素的寬度和高度。也就是說,如果你在替換元素上設置一個明確的高度和寬度,此值將導致內容大小,完全在固定的比例顯示,但仍在元素尺寸內顯示。

cover:替換元素內容大小保持長寬比例填充元素內容容器,其具體對象大小被解析為覆蓋整個元素的寬度和高度。也就是說,替換元素內容大小保持長寬比,但改變寬度和高度,以便完全覆蓋內容元素。

none:替換元素內容不調整大小以適應內部元素的容器,內容完全忽略設置在元素上的任何高度和權重,並且仍在元素尺寸內顯示。

scale-down:當內容大小設置了non或contain,將導致具體對象變得更小。

與divcss網頁設計視頻相關的知識