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