網頁html制作
提問問題
列表
-
如何用只用html 制作圖片輪播效果？
查看答案>>
-
有哪些不用編寫代碼就能輕松制作生成HTML5頁面的工具
查看答案>>
-
HTML里面怎么設計做一個加減乘除的網頁
查看答案>>
-
web前端開發和網頁制作有什么區別？詳細點
查看答案>>
-
怎么用html5制作個人主頁
查看答案>>
-
HTML 網頁制作 分層
查看答案>>
-
怎么制作一個固定大小的html頁面
查看答案>>
-
html網頁制作中,把圖片放在左下方怎么做
查看答案>>
-
如何制作HTML頁面
查看答案>>
-
用HTML制作網頁圖片怎么顯示不出來？
查看答案>>
如何用只用html 制作圖片輪播效果？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""><html xmlns="" xml:lang="zh" lang="zh"><head><title>完全利用CSS實現圖片切換特效_網頁代碼站()</title><meta http-equiv="content-type" content="text/html;charset=gb2312" /><style> dl { position:absolute;width:240px;height:170px;border:10px solid #eee; } dd { margin:0;width:240px;height:170px;overflow:hidden; } img { border:1px solid black } dt { position:absolute;right:3px;top:50px; } a { display:block;margin:1px;width:20px;height:20px;text-align:center;font:700 12px/20px "宋體",sans-serif;color:#fff;text-decoration:none;background:#666;border:1px solid #fff;filter:alpha(opacity=40);opacity:.4; } a:hover {background:#000}</style></head> <body> <dl$amp;>amp;$lt;dt$amp;>amp;$lt;a #a" title="">1</a> <a #b" title="">2</a> <a #c" title="">3</a> </dt> <dd$amp;>amp;$lt;img src="" alt="" id="a" /> <img src="" alt="" id="b" /> <img src="" alt="" id="c" /> </dd> </dl></body></html>
有哪些不用編寫代碼就能輕松制作生成HTML5頁面的工具
HTML5頁面制作工具，大體分為兩類：基于HTML5的網站工具和手機APP工具（當然還有一些其他的，例如基于微信公眾號的等，下面也會介紹）。 先總的說一下個人感受1.基于HTML5的工具網站：功能較強大，單頁面的操作性較強，可完成各種頁面交互效果；但是某些時候會有操作“失靈”的現象，如上傳圖片失敗，點擊保存失敗，生成失敗等。原因你懂得~2.手機工具APP：相比起工具網站來講，顯得比較順手，有大量模板套用，制作簡單快捷；但是拘泥于現有的模板，使得單頁面不會有較大的可操作空間，從而無法實現DIY交互效果。 下面展開說下每個使用過的工具吧基于HTML5的工具網站：【兔展】 優點：頁面DIY程度較高，動效實現起來也簡易方便，可制作比較任性的H5頁面。缺點：屏幕界面大小不可調節，上傳的圖會比例失調；生成后到各尺寸屏上頁面會存在拉伸現象。（此圖意在說明上傳的圖片的尺寸都是網站自己默認的一個尺寸，不是圖片本身的尺寸，不利于使用者調整）【MAKA.im】 可以具體編輯，單頁操作性較高，有新手（有模板）和高階（無模板）兩種編輯模式；翻頁效果比兔展多，模板也更強大一些。【居高互動刊】 優點：最簡單易上手的工具之一，根據提示一步一步的添加，共4步，最后生成微雜志。相比其他在線工具，較穩定。缺點：目前沒試通制作單頁上的交互效果，沒找到開啟pro功能的入口。【ANIMATRON】 優點：像flash的在線版，功能強大，可以創建HTML5動畫。適合有動畫基礎的人做演示制作。缺點：需要動畫制作基礎；工作界面響應時間長；貌似只能分享到twitter、Facebook、google+、tumblr？【iSpring 7】 噱頭是PPT轉HTML5工具，完美與PPT兼容，可制作Html5移動課件。不過，目前我只能連著VPN再用Safari才能打開網站鏈接。【秀制作】 優點：版式輕松，制作快捷，寬帶穩定。缺點：對圖片和文字在各種屏幕上的顯示沒有做很好的適配；不能對模板中文字的編輯調整位置。手機工具APP：【初頁】優點：模板質量高，套用模板編輯時效率高，操作簡單快捷，效果和體驗在制作H5頁面的APP工具里面算是出類拔萃。缺點：單頁面可操作性較低，僅支持套用模板。【快邀約】快速制作邀請函優點：易上手，省時高效，便于統計。缺點：頁面簡陋，只能選擇固有模板創建文字和添加圖片。【易企秀】中小微企業的移動場景營銷管家優點：套用模板，創建快捷，用來做企業介紹、產品推薦。擁有強大的推廣統計、客戶管理功能。嗯，這里應該贊一個。缺點：只能用模板，DIY程度低；統計數據是否準確需要進一步確認，目前看來可能有遺漏數據的現象（在小范圍測試中，統計到的數量小于應有的數量）。【微貼】：通過微信公眾號創建H5頁面優點：手機公眾號內直接創建簡單頁面，根據提示創建即可，無腦方便快捷。缺點：只是單頁面展示，承載不了交互效果等特效和內容。 總結 工具網站做的H5頁面，多注重單獨頁面的自定義交互方案，DIY程度高，相對來說用時較長，又受制于帶寬因素，故影響操作；工具APP做的H5頁面，多注重效率，目前都是套用模板，因而對單頁面的DIY程度較低，交互效果受限。作為我個人而言，移動互聯的新任PM，我平時常用到的是【MAKA】和【兔展】，這兩個相對來說更適合半天時間來完成；如想快速制作展示頁面就用【初頁】，這個在功能效率與設計感方面更突出一些；組織活動、制作邀請函、分發活動通知等用【快邀約】；平時推廣新產品、聯絡客戶和招聘新人用【易企秀】。轉載
HTML里面怎么設計做一個加減乘除的網頁
這個需要知道javascript,這方面語言會嗎？不會的話，幫你寫一個了！123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>計算器</title> </head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ var first = parseInt($("#first").val());//獲取第一個數的值并轉化為數字 var second = parseInt($("#second").val());//獲取第二個數的值并轉化為數字 var sum = 0;//定義結果值 var symbol = parseInt($("[type=radio]:checked").val());//獲取符號的值 //通過對符號的判斷計算結果 switch(symbol){ case 0: sum = first + second; break; case 1: sum = first - second; break; case 2: sum = first * second; break; case 3: sum = first / second; break; } var arr = ['+','-','*','/'];//輸出的符號 $("h2 span").text(first + arr[symbol] + second +" = " +sum);//把結果輸出到結果欄中 }) }) </script> <body> <h1>計算器</h1> <p>數字一：<input type="text" id="first" style="width: 40px;" /></p> <p> <label><input type="radio" name="symbol" value="0" checked="checked"/>+</label> <label><input type="radio" name="symbol" value="1" />-</label> <label><input type="radio" name="symbol" value="2" />*</label> <label><input type="radio" name="symbol" value="3" />/</label> </p> <p>數字二：<input type="text" id="second" style="width: 40px;" /></p> <p><button>計算</button></p> <h2>結果：<span></span></h2> </body></html>
web前端開發和網頁制作有什么區別？詳細點
web前端主要是通過div+css等技術來完成一個傳統pc網頁的靜態頁面制作，移動web前端是通過html5+css3等技術來完成一個手機端訪問的網頁的制作，一個是針對pc一個是針對手機，這個就是它們最大的區別了。國內像切圖網等就是專門提供這樣的服務的，只需要提供設計稿就可以了。
怎么用html5制作個人主頁
總體把頁面一分為二，<header>是包含在<article>里面的，頁腳部分是單獨的一塊兒。大致結構獲悉了后再從局部入手，<header>部分，有主標題、副標題、還有作者署名，前面我們講過，如果除了主標題，還有一個副標題，那可以把這兩個標題寫在一個<hgroup>元素中。如果除了主標題之外，還有其他內容，比如內容摘要、發表時間、作者、圖片或者小標題鏈接等，那就應該把他們放在一個 <header>元素中。 <header> <hgroup> <h1>給個人博客增加色彩元素提升網站用戶體驗</h1> <h2>網頁的色彩——決定用戶是否駐足停留的關鍵</h2> </hgroup> <p class="Byline">design by DanceSmile</p> </header> 接下來是文章正文部分： 部分代碼： <div class="Content"> <p>第一眼看到楊青個人博客網站的時候，如果你喜歡...</p> ... </div> 正文當中還有一幅插圖，html5新增加了插圖這個<figure>語義元素，<figcaption>不是只能包含文本，任何html元素都可以，比如鏈接、小圖標。<figcaption>包含了對圖片的完整說明，所以alt文本就顯得多于了，這種情況下，可以把<img>元素中的alt屬性刪除： <figure> <img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg"> <figcaption>圖片來源：騰訊CDC《淺析網頁色彩應用》</figcaption> </figure> 最后在把上面的代碼寫在<article>里面。 <footer>部分只是一些簡單的頁腳信息。
HTML 網頁制作 分層
<body style="background:#333"><!-- 這里是底紋 --> <div style="height:1200px; width:1200px; background:#ccc; margin:auto"><!-- 這里是圖片 --> <div style=" height:1024px;width:1024px; margin:88px auto; background:#F30"><!-- 這里是FLASH --></div> </div></body>這是結構，如果自己使用的話需要調整好高度的數值，你只給了我寬度 沒給我高度，所以我就自己給他設置了高度以做示范
怎么制作一個固定大小的html頁面
<html><body style="width:500px; height:400px; overflow: hidden;">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容<script type="text/javascript">if (window.screen) { //判斷瀏覽器是否支持window.screen判斷瀏覽器是否支持screenvar myw = 500; //定義一個myw，接受到當前全屏的寬var myh = 400; //定義一個myw，接受到當前全屏的高window.moveTo(0, 0); //把window放在左上腳window.resizeTo(myw, myh); //把當前窗體的長寬跳轉為myw和myhwindow.onresize = function () {window.resizeTo(myw, myh);}}</script></body></html>
html網頁制作中,把圖片放在左下方怎么做
用嵌套的div來相對定位：<div id="beijing" style="background-image:url(image/bg/nav_blue.gif); width:400px; height:200px;"><div style="margin-left:100px; margin-top:50px; border:#F00 solid 1px; width:80px; height:40px;"></div></div>上面是個例子下面的代碼解釋 ：margin-left:100px;就是距離背景層左邊的距離為100像素，margin-top:50px; 就是距離背景層上邊的距離為50像素；如果你想把圖放到左下方的地方，就用margin-left:100px;右邊的話就用margin-right:100px;代碼第一行打括號的地方就是放圖片鏈接的自己拿去再稍加琢磨，應該很快就可以搞定了！htm代碼其實很容易懂的！祝你成功吧
如何制作HTML頁面
HTML介紹：(1):<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> 將此文件保存為“mypage.htm”。啟動瀏覽器。在文件菜單中選擇“打開”（或者“打開頁面”），這時將出現一個對話框。選擇“瀏覽”（或者“選擇文件”），定位到你剛才創建的HTML文件——“mypage.htm”，選擇它，單擊“打開”。然后在對話框中，你將看到這個文件的地址，比如說：“C:\MyDocuments\mypage.htm”。單擊“確定”，瀏覽器將顯示此頁面。--------------------------------------------------------------------------------例子解釋HTML文檔中，第一個標簽是<html>。這個標簽告訴瀏覽器這是HTML文檔的開始。HTML文檔的最后一個標簽是</html>，這個標簽告訴瀏覽器這是HTML文檔的終止。在<head>和</head>標簽之間文本的是頭信息。在瀏覽器窗口中，頭信息是不被顯示的。在<title>和</title>標簽之間的文本是文檔標題，它被顯示在瀏覽器窗口的標題欄。在<body>和</body>標簽之間的文本是正文，會被顯示在瀏覽器中。在<b>和</b>標簽之間的文本會以加粗字體顯示。---常見問題問：我編寫完了HTML文件，但是不能在瀏覽器中看見結果，為什么？答：請確認你保存了文件，并且使用了正確的文件名和擴展名，例如：“c:\mypage.htm”，并且確認你用瀏覽器打開時使用同樣的文件名。問：我編輯了HTML文件，但是修改結果并沒有在瀏覽器中顯示，為什么？答：瀏覽器緩存了你的頁面，所以它不需要兩次讀取同樣的頁面。你修改了這個頁面，瀏覽器并不知道。請使用“刷新/重載”按鈕來強迫瀏覽器讀取編輯過的頁面。 -----------------------------------------------------------------------------HTML基本標簽：(2):HTML中最重要的標簽是定義標題元素，段落和換行的標簽。標題元素標題元素由標簽<h1>到<h6>定義。<h1>定義了最大的標題元素，<h6>定義了最小的。<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>HTML自動在一個標題元素前后各添加一個空行。(3):段落段落是用<p>標簽定義的。<p>This is another paragraph</p> HTML自動在一個段落前后各添加一個空行。--------------------------------------------------------------------------------換行當需要結束一行，并且不想開始新段落時，使用<br>標簽。<br>標簽不管放在什么位置，都能夠強制換行。<p>This <br> is a para<br>graph with line breaks</p> <br>標簽是一個空標簽，它沒有結束標記。基本注意點——有用的技巧當你寫下HTML文本的時候，你不能確知在另外一個瀏覽器中，這些文本將被如何顯示。有人用著大的顯示器，有的人用的小一些。每次用戶調整窗口大小的時候，文本都將被重新格式化。不要想在編輯器中寫一些空行和空格來協助排版。HTML將截掉你文本中的多余空格。不管多少個空格，處理起來只當一個。一點附加信息：在HTML里面，一個空行也只被當作一個空格來處理。使用空段落<p>來插入空白行是一個壞習慣，請使用<br>標簽來替代。（但是不要用<br>標簽來創建列表，我們后面會專門學習HTML列表的。）你也許注意到了段落可以不寫結束標記</p>。別依賴它，HTML的下一個版本將不準你漏掉任何一個結束標簽。HTML自動在某些元素前后增加額外的空行，就像在段落和標題元素的前后一樣。我們使用了水平線（<hr>標簽）來分隔我們教程的章節。示例：a:多個段落： <html><body><p>This paragraph contains a lot of lines in the source code,but the browser ignores it.</p><p>This paragraph contains a lot of spaces in the source code,but the browser ignores it.</p><p>The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.</p></body></html>(這個例子說明了段落的一些默認行為。)b:換行： <html><body><p>To break<br>lines<br>in a<br>paragraph,<br>use the br tag.</p></body></html> (這個例子說明了在HTML文檔中換行的使用。)c:詩歌的問題： <html><body><p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.</p><p>Note that your browser simply ignores your formatting!</p></body></html>(這個例子說明了HTML顯示格式的一些問題。)d:標題元素： <html><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p></body></html>(這個例子說明了在HTML中顯示標題元素的標簽。)e:居中的標題元素：<html><body><h1 align="center">This is heading 1</h1><p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p></body></html>(這個例子顯示了一個居中的標題元素。)f:水平線：<html><body><p>The hr tag defines a horizontal rule:</p><hr><p>This is a paragraph</p><hr><p>This is a paragraph</p><hr><p>This is a paragraph</p></body></html>(這個例子說明了如何插入水平線。)g:隱藏的注釋：<html><body><!--This comment will not be displayed--><p>This is a regular paragraph</p></body></html>(這個例子說明了在HTML文檔中如何插入隱藏的注釋。)h:背景色：<html><body bgcolor="yellow"><h2>Look: Colored Background!</h2></body></html>(這個例子說明了如何給頁面設置背景色。)
