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