入门display:inline-block运用

摘要：这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。

这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。我是一个小白，学习的路还很长很长，学习了10天HTML与css，应了一句话，所有浪费的日子都是要还的!
言归正传下面总结下这段时间学习出现的问题和学习感想

第一个问题我要在上面添加一个logo和一个搜索框,搜索框里有个搜索的小图标

            
            

            
            f
            
            

#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命令，插入后面背景图图片的时候，路径写错了，并且没有想到是这个问题！！！！！
我要反思的是我的解题的思路，很重要，出现了一个问题我应该怎样去解决，而不是没有头绪，以后学习中还会有很多问题，不可能别人都会告诉你，我一点要锻炼自己的解决问题的能力与思路，以后的路还很长，学的问题很多，我这可以说才是开始，或者说开始都不算，不过也有点进步，给自己加油！
Winner takes all
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         GPU云服务器
                                             
                         云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               高级运用
                                                                                                           Ajax运用
                                                                                                           运用Windows
                                                                                                           负载均衡运用
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/112924.html
               
                      
               

                 
                                  
上一篇：基于RestOn智能睡眠监测器的睡眠监测系统
  
                                                
                                       
下一篇：JavaScript 优雅的实现方式包含你可能不知道的知识点
                                  
              
              

                
相关文章
                

                             
                                                                    

                                                

                          
入门display:inline-block运用
                                                     
摘要：这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。

这是我第一篇博客，是我新的开始，我要用博客记录我的学习之旅，在这里我要感谢我的哥哥，他带我开阔了眼界，纠正了我的格局，给我带来了正能量。我是一个小白，学习的路还很长很长，学习了10天HTML与css，应了一句话，所有浪费的日子都是要还的!言归正传下面...
                                                   
                          

                                

                                    lookSomeone
                                    2019-08-01 18:17
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                                                       

                                                

                          
2016百度前端技术学院Task02
                                                     
摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。


Task02的演示DEMO：https://amnova.github.io/New-...
整个项目的GitHub地址：https://github.com/amn...
                                                   
                          

                                

                                    venmos
                                    2019-08-30 13:19
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
2016百度前端技术学院Task02
                                                     
摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。


Task02的演示DEMO：https://amnova.github.io/New-...
整个项目的GitHub地址：https://github.com/amn...
                                                   
                          

                                

                                    lolomaco
                                    2019-08-01 16:09
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
没有flexbox弹性盒子，但我们还有table
                                                     
摘要：结构左基线向左移动右基线向右移动一定要使用属性自己不熟悉的自行主要是为了好设置宽度都是相对于父元素的即将父元素平均分成了等份。

由于项目要兼容到IE9，因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+，里面有一些比较好的栅格布局，垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法，总结如下：
gi...
                                                   
                          

                                

                                    KunMinX
                                    2019-08-28 18:22
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
水平垂直居中
                                                     
摘要：它为什么备受关注并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。多行块级元素实现原理同水平居中的水平垂直居中综合运用水平垂直居中即可。

它为什么备受关注？
并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。
将各个问题分类，给出常用解
水平居中
行内元素：
text-align:center
html:


   text-align:cent...
                                                   
                          

                                

                                    MingjunYang
                                    2019-08-29 11:29
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
发表评论
                   

                                      
                      

                        登陆后可评论
                      
                   
               
              

                

                  
0条评论