摘要:這是我第一篇博客,是我新的開始,我要用博客記錄我的學習之旅,在這里我要感謝我的哥哥,他帶我開闊了眼界,糾正了我的格局,給我帶來了正能量。
這是我第一篇博客,是我新的開始,我要用博客記錄我的學習之旅,在這里我要感謝我的哥哥,他帶我開闊了眼界,糾正了我的格局,給我帶來了正能量。我是一個小白,學習的路還很長很長,學習了10天HTML與css,應了一句話,所有浪費的日子都是要還的!
言歸正傳下面總結下這段時間學習出現的問題和學習感想
第一個問題我要在上面添加一個logo和一個搜索框,搜索框里有個搜索的小圖標
#logo{ margin-top: -10px; margin-left: 60px; }
我發現,logo和搜索框不能對齊,當時我用float margin等命令調試,都不出效果,經過幾經周折,最后用到了display:inline-block;和vertical-align:middle;實習。還有那搜索框外的小圖標就是不進入里面,我就在想怎樣移動,可是怎么都移動不了,后來哥哥告訴我把搜索框的border去掉在外面套一個邊框,才實現了這個問題。
#logo > * { display: inline-block; vertical-align: middle; } #logo > p > * { display: inline-block; vertical-align: middle; border: none; } #logo p { border: 1px solid rgb(219, 92, 19); margin-left: 50px; } #logo p a{ text-decoration: none; }
第二個問題
我就是想讓邊框和下面的搜索框對齊第一想到的是讓下面的邊框變短,后來發現這樣是不成立的,接下來想到的是讓怎么個DIV框變小,可是我想到了讓他變小我后面的是不是就變大了不能成立我就沒試,最后我改變了他的大小,用margin-left命令調成想要的效果。
這是原來的代碼,
showImg("https://segmentfault.com/img/bV0Rpw?w=372&h=350");改變了#zhdl中width:45%,margin-left:26px;得到了想要的效果,不過后面的賬戶注冊
width也是需要修改的.還有個特別低級的錯誤在這里我必須強調下自己,在其他登錄的后面,那些圖片用到的是backgroud-position命令,插入后面背景圖圖片的時候,路徑寫錯了,并且沒有想到是這個問題?。。。。?br>我要反思的是我的解題的思路,很重要,出現了一個問題我應該怎樣去解決,而不是沒有頭緒,以后學習中還會有很多問題,不可能別人都會告訴你,我一點要鍛煉自己的解決問題的能力與思路,以后的路還很長,學的問題很多,我這可以說才是開始,或者說開始都不算,不過也有點進步,給自己加油!
Winner takes all文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51628.html
相關文章
入門display:inline-block運用
摘要:這是我第一篇博客,是我新的開始,我要用博客記錄我的學習之旅,在這里我要感謝我的哥哥,他帶我開闊了眼界,糾正了我的格局,給我帶來了正能量。 這是我第一篇博客,是我新的開始,我要用博客記錄我的學習之旅,在這里我要感謝我的哥哥,他帶我開闊了眼界,糾正了我的格局,給我帶來了正能量。我是一個小白,學習的路還很長很長,學習了10天HTML與css,應了一句話,所有浪費的日子都是要還的!言歸正傳下面...
2016百度前端技術學院Task02
摘要:的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務,但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法?,F在我把自己完成的小項目的源碼在上分享出來,希望可以幫到廣大前端初學者們。 Task02的演示DEMO:https://amnova.github.io/New-... 整個項目的GitHub地址:https://github.com/amn...
2016百度前端技術學院Task02
摘要:的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務,但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法?,F在我把自己完成的小項目的源碼在上分享出來,希望可以幫到廣大前端初學者們。 Task02的演示DEMO:https://amnova.github.io/New-... 整個項目的GitHub地址:https://github.com/amn...
沒有flexbox彈性盒子,但我們還有table
摘要:結構左基線向左移動右基線向右移動一定要使用屬性自己不熟悉的自行主要是為了好設置寬度都是相對于父元素的即將父元素平均分成了等份。 由于項目要兼容到IE9,因此將之前flex布局全部給換掉。今天leader讓我看了kitecss這個css框架(里面的一些布局方式能比較好的兼容IE8+,里面有一些比較好的柵格布局,垂直居中等方案)。然后具體的學習了里面的一些css技巧和方法,總結如下: gi...
水平垂直居中
摘要:它為什么備受關注并不是因為它難實現,而是因為實現的策略太多了,讓人無可下手,無可選擇。多行塊級元素實現原理同水平居中的水平垂直居中綜合運用水平垂直居中即可。 它為什么備受關注? 并不是因為它難實現,而是因為實現的策略太多了,讓人無可下手,無可選擇。 將各個問題分類,給出常用解 水平居中 行內元素: text-align:center html: text-align:cent...
發表評論
0條評論
閱讀 2663·2021-11-24 10:44
閱讀 1917·2021-11-22 13:53
閱讀 1938·2021-09-30 09:47
閱讀 3708·2021-09-22 16:00
閱讀 2438·2021-09-08 09:36
閱讀 2317·2019-08-30 15:53
閱讀 2793·2019-08-30 15:48
閱讀 986·2019-08-30 15:44