任務九 使用HTML CSS實現乙個複雜頁面

2022-03-03 09:58:07 字數 1420 閱讀 8620

整個頁面內容寬度固定,但頭部的藍色導航和瀏覽器寬度保持一致

任務完成與總結:

乙個人搞這個頁面,肝有點不行,索性不切圖了,計畫直接把大概的頁面寫出來,然而寫到第二天的時候完全失去耐心zzzz,這次任務算是考驗到我了。算了,還是分析其他人的**吧,不過自己的**還是要貼上,知道這次完成的十分不好,不管怎麼說,畢竟是親兒子(自己寫出來的),就不嫌它丟人了。

下面是乙個做的比較好的團隊作品:

1、搜尋框與登入效果的實現

利用padding-left值空出來的位置,然後調整背景圖x、y軸的座標;登入效果的實現也是如此。

2、類似雙重邊框的實現

**(父元素):

**(子元素):

通過兩個背景顏色不一的圓疊加,營造出雙重邊框的效果。

3、css3製作乙個tab選項卡:

開發步驟一:將父元素設定為相對定位;

開發步驟二:將li元素設定為浮動;

開發步驟三:隱藏input以及承載**的div;

4、ul元素的巧用:

中間三大塊利用ul中li元素中巢狀div進行設定和布局,這實在是我一開始想不到的,比我的方法簡潔了許多。果然腦子是個好東西。

5、元素的空內容應用:

頭部使用li元素,中間使用浮動的p元素設定寬高,p元素內含兩個子元素,其中空白的部分只是沒有新增內容而已,只怪自己當初想的太複雜。

7、類進度條的製作:

還是老技巧,利用父元素與子元素的重疊。其實用html 新元素progress處理也是可以,只不過背景顏色處理上有些麻煩,以及它的相容性問題。

第九周 任務一

實驗內容 定義complex類中的 和 運算子的過載,實現輸入和輸出。程式的版權和版本宣告部分 檔名稱 定義complex類中的 和 運算子的過載,實現輸入和輸出 作 者 薛廣晨 完成日期 2012 年 4 月 14日 版 本號 x1.0 對任務及求解方法的描述部分 輸入描述 程式頭部的注釋結束 此...

使用html css實現三角標示符號

我們平常開啟某個 的時候,常常會發現網頁上很多導航或者指示條會使用乙個三角符號去指向內容,效果簡潔美觀,甚至很多前端面試中也會提及如何在網頁上實現乙個三角符號,這裡給出乙個很簡單使用的實現方式。注意到右邊那個三角符號 網易 導航條三角符號應用 這種例子多不勝數,此處不一一舉例了。下面說如何實現 實現...

第九周任務報告一

程式頭部注釋開始 程式的版權和版本宣告部分 作 者 時永傑 完成日期 2012 年 4月 17日 版 本 號 v1.1 實現time類中的運算子過載 include using namespace std class ctime include include t1.h using namespac...