主頁的設計

2022-05-04 22:18:22 字數 1677 閱讀 7768

主頁仍然用了**的模子進行了設計,成果:

在推薦這一塊的盒子數決定由伺服器決定,會在本地存cookie,然後查詢使用者喜好從而推薦。

今天用的比較多的是position的absolute和relative,深切的感受了absolue。

absolute在有父元素定位時按父元素來,沒有時按照文本來。

relative按照自己來。

搜尋按定位不到文字框上

我用的是將文字全部設定成了圓角,按鈕覆蓋在文字框的上面,就在現在寫部落格的時候突然發現自己有點蠢~

可以將文字框右邊設定成直角的呀,都不需要定位了~沒法吐槽自己當時的腦迴路~當然按鈕用了漸變的效果~

列表的hover效果只有文字背景色改變

這個問題是今天新的領悟,更加熟悉了盒模型,如果給列表設定margin的話背景色當然就給內容上色了,

導致一段空隙,這個空隙就是margin的空隙,而padding設定則正好,將列表項的內容充實了,所以就全上了色。

外邊框的畫素影響了尺寸的設定總是差幾個畫素

由於有印象,所以比較快的解決了這個問題,就是設定box-sizing: border-box;即可,把邊框也算在盒子內部。

主面板的布局

採用了聖杯布局,但是與一般的不大一樣,因為面板已經是在版心設為了relative,所以不能設定大面板為absolute,

**仍然是定寬度,並且給左右一些margin的距離,然後左右兩邊用絕定位給top定位上去,正好塞滿空間。

主題a的》如何放在選項的最右側

用了after的效果,加了content內容,由於ol外層是absolute定位,所以內容也可以再absolute定位到li右側。

對於blank幾個白板原本是用float,出問題

hover時會有上移和陰影的效果,但是由於浮動,並且上移,下面標題會往高出走,也就是走向了上移的地方。

當然可以用clear來給父層清除浮動讓其成為乙個整體,不被內容干擾,這樣父層就會跟著最低高度了,

然後下面的元素也不會被區域性影響。

正當我得意之時,在推薦的幾個白板還是出了問題,一共六個白板,但是也存在上移,下面的白板就會位移的問題,

這下我慌了,該怎麼做呢?也不可能給li打個組吧,畢竟這個模組的內容個數是不確定的,js會很麻煩。

於是我想,如何讓它自動從左向右排列並且不需要借助浮動的辦法呢?

一開始想到了inline,但是卻由於inline不具有塊屬性,導致無法margin,所以選擇了inline-block,解決了問題,

並且後期填充也非常方便。

右邊欄目的居中問題

在這裡仍然總結乙個結論(不知是否正確):擁有寬高的block可以用任意的margin,(高度已填充可以)

一般的 block只能用margin-top/left,

inline需要轉為block才能margin,否則儘管有設定寬高也不具有margin的操作,需要定位

margin操作更多的是元素間的問題,而要解決布局的問題,最終還是要借助position來解決,

有上下層次的問題才建議用浮動,一般問題也不要用到浮動來解決。

text-align對inline元素有效,對block無效,block需要margin來居中,文字的上下居中通過line-height來解決。

以上就是今天的總結,原始碼也暫且不貼了

主頁的設計藝術處理

主頁的設計主要是網頁設計軟體的操作與技術應用的問題。但是,要使主頁設計 製作得漂亮,必然離不開對主頁進行藝術的加工和處理,這就要涉及到美術的一些基本常識。本文將介紹一些主頁設計中經常涉及到的藝術處理原則,供各位在進行主頁製作的時候參考。一 風格定位 主頁的美化首先要考慮風格的定位。任何主頁都要根據主...

2014 08 04 BBS主頁頁面的設計

今天是在吾索實習的第19天。這天,開始參照一開始設計的介面原型,真真正正地進行bbs介面的設計。在運用.net進行介面設計時,發現沒有用rp進行介面設計來得容易,很多都要再進行更精細的操作,才能達到原來要求的結果。是一種可以在html中使用c 語句的語法。這樣一來,就可以很容易地通過乙個迴圈語句來動...

人主頁空間

人主頁空間 使用者homepage的設定 經常見到某些 提供個人主頁,顯得很神氣,其實你也可以開放你機器上的空間給別人,這很簡單就能實現。只要你按照下面的提示對你的www伺服器配置檔案進行修改。給使用者開放個人主頁空間,一是要確定使用者主頁的存放目錄,二是開放使用者主頁目錄的讀取許可權。方法一你以r...