Quantcast
Channel: JinJin 的視覺設計專區 - 網頁設計與語法(HTML/CSS)
Viewing all 161 articles
Browse latest View live

Re: [作業09] 優良設計網站蒐集與分析

$
0
0
1.分析範例網站: http://www.ninamika.com/en/index.html
2.網站名稱及主題:
NINAGAWA MIKA OFFICIAL WEBSITE
這是日本攝影師蜷川實花的個人網站,裡面介紹他的作品和工作心得等等
3.設計風格
用圖片和動畫方式呈現
4.色彩分析(附檔)
以黑色為底,鮮豔的圖片為主。具有凝聚與神秘的效果。
5.版面分析 (附檔)
(1).網站width(寬)、height(高)、margin、padding分析
(2)網站雙欄語法(按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題):

6.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形,可以加註)

班級:視傳1B
學號:1001445079

[CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作

$
0
0
補充:

在 table 中設定 <table cellpadding="0"> 效果等於在 CSS 設定 td { padding:0;}。

也因此,在 CSS 設定一次 td { padding:0;} 就不用每次在 table 中設定 cellpadding="0" 了。

另外,CSS 中的 padding-left、padding-right 等屬性也適用於 td 中。用來控制 table/td 的 padding 非常好用。同時,這個用法也經過跨瀏覽器的測試,在不用的瀏覽器都能正常地使用。

Default style sheet for HTML 4

$
0
0
出處:http://meyerweb.com/eric/css/references/css2ref.html


html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }

@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型

Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型

Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型

hw03-1015445262

Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

$
0
0
請問我要從 "header" 板塊的連結點下去,內容會顯示在"content"
要怎麼寫??

請問一下Spry問題

$
0
0
各位好

想請問一下Spry問題
我製作了一個Spry下拉式選單,在電腦上看是正常的.
但到了平板電腦,就有時無法下拉.請問是哪出了問題?

http://www.tobei.com.tw/Productgeyser.html

可否請教各位有這破解方法嗎?

PEGGY

Adobe 已不再支援 spry,官方已改支援 jQuery UI/jQuery Mobile | Re: 請問一下Spry問題

Re: 請問一下Spry問題

$
0
0
大大感謝!!終於解決了~(tu)

請問我這樣排版 HTML CSS有什麼問題呢?

$
0
0
http://sunarts.net23.net/
我在做的網站

↑我用html css寫的網站連結,目前只寫成像圖案下面這樣↓

http://i.imgur.com/rkdvORD.jpg

這是我在做的網站,想要做成像下面這樣
網頁的原始碼對上面的連結按右鍵就有了喔!!

http://i.imgur.com/pGgye7Z.jpg

背景會有三條水平線
我最上面的水平線是設成一個div
然後把水平線的圖設成"背景圖",repeat-x

另外我也需要三條垂直但是會有中斷的線(如圖)

這個我有點不知道該怎麼設好,是一樣用div放背景圖好呢?
不過這樣我的position動來動去的,牽一髮而動全身啊
想請大家指點一下該怎麼做比較好..我後來想想我的div這樣排好不好呢? ↓


http://i.imgur.com/bFPv94L.jpg

不過這樣那些切線就不見了orz
切線真的不知道怎麼排進去

請大家多多指教~~謝謝!!!><

Re: 請問我這樣排版 HTML CSS有什麼問題呢?

$
0
0
照理說水平線用 100% 的 div 的 border-top 或 border-bottom 就可以了。

裡面再加上你原有的設計。這樣不知道是不是你要的?

或者簡化一點,你在 #header-wrapper 加上 border-top: 1px solid gray。看看效果如何。

請問應該如何點按鈕,換圖片呢?

$
0
0
Hi Hi 大家安安 :)-D
我又來請教專業的大家了...


http://sunarts.net23.net/rendering.html

想請教我應該怎麼用jQuery做到點擊左邊選單,右邊的圖片跟文字會變換的效果呢?

自己研究發現找不太到方法:(
例如我設定點左邊按鈕之後會有的動作:
$("buttom").click(function(){
$("a.jpg").fadeOut();
$("b.jpg").fadeIn();

這樣子寫的話…只有第一行會成功
b圖片它不會出來…
可能是b圖也不知道要從哪裡出來?

然後如果用replaceWith的話,我的b圖片會直接被cut到a圖上
這樣等於我的網頁就少了一張圖片…

 請問應該改成怎麼寫比較好呢?
或是沒有這種方法呢?

 懇請多多指點,謝謝!!:)

Re: 請問應該如何點按鈕,換圖片呢?

$
0
0
jQuery 比較複雜。你可能要多描述一些你的問題。

不過 $("a.jpg") 有這樣的語法嗎?$(...) 裡面放的應該是 id、tag 或 class。應該是不能放圖片檔名。

要的話應該是將圖片加一個 id 或 class。例如 <img id="img_a" src="..." />。然後用 $("#img_a") 使用。

Re: 請問應該如何點按鈕,換圖片呢?

$
0
0
啊對,我的語法有點寫錯了,不好意思><

後來找出解決方法了!,

就是【視按鈕切換a圖片(img tag)的src等於要置換的圖片來源】

(:D 謝謝~~ 話說我覺得JS和jQ都好考驗腦力啊~~XD

感謝美寶論壇的熱心板友^^

話說這個論壇我還蠻喜歡!! 有好多實用的資訊,帳號註冊蠻久了~~ 哈哈

[講義] 網頁前端設計基本篇-Front-end Fundamental

$
0
0
Instructor: Jude Wang




1. HTML練習



http://codepen.io/pen
http://www.sublimetext.com/3
http://www.w3schools.com/

使用時,請搭配:"Tab"鍵使用

2. 標題


HTML
<h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6>
CSS
h6{ font-size:60px; color:red; }


3. 圖片-置左置右


http://lorempixel.com

HTML
<h1>New City</h1> <img alt="" style=";height:auto;;position:inherit !important;" indx="16414602" rank="36" irank="794635203" atitle="[講義] 網頁前端設計基本篇-Front-end Fundamental" data-src="//lorempixel.com/g/300/200/city/" data-srcset="" class="rs-article-img-src do-lazy"> <p>New Taipei City has vast territories, spanning 2052 square kilometers of 29 District. Within its borders is a wealth of difference, particularly when it comes to a sweeping expanse of mountains and cliffs that form the Taipei Basin walls making for natural resources and a rich array of vistas. The northern face of Taiwan's coastline in New Taipei City is 120 kilometers and it has gorgeous sea brinks and beachheads. In recent years, officials have exerted a great deal of effort to update and continuously clean our coasts so that all visitors can leap in the waves and admire the horizons.</p>
CSS
h1{ font-size:60px; } img{ margin:20px; float:right; }
Front-end Fundamental

4. HTML5


1. 文件型態設定(DOCTYPE)


2. 語意標示語言 (Semantic HTML)


5. 版面編排 / Layout


1. 區塊模型 / Box Model


6. CSS Reset


7. 網格系統 / Grid System


8. Style


1. HTML Tags



3. 側欄 / Side Bar


4. Box-sizing


5. 下拉選單 (Drop-down Menu)


6. 按鈕 (Buttons)


9. CSS3 Design Parts


1. 虛擬元素 / pseudo-elements

HTML 5.0 關於 css 背景色的設定問題 請教高手

$
0
0


無論怎麼修改 center的背景色 都會變成 body的黑色求解

HTML 5.0 關於 css 背景色的設定問題 請教神人

$
0
0


無論怎麼修改 center的背景色 都會變成 body的黑色求解

Re: HTML 5.0 關於 css 背景色的設定問題 請教神人

$
0
0
body {
background-color: #000;}

#center {
background-color: #fff;

}
Viewing all 161 articles
Browse latest View live