10MINs首页

这篇文章先讲几个重要的点,然后文末有效果图和具体代码

• css优先级

            

            
Title's here
            
Username
            

            
40%get
            10k
        
        

这里再介绍一种选择器,之前我们在修改时,为了防止修改一个标签而造成其他标签样式的改变,我们会给标签加一个别名,此外,我们也可以使用子孙选择器

.ui.vertical.basic.segment.recommended > .ui.center.aligned.header{
    
}

今天发现一个问题,就是css选择器不要留空格,比如以下这种方式是不对的

.ui .vertical .basic .segment .recommended{

}

需要改成无空格:

.ui.vertical.basic.segment.recommended{

}

• 栅格布局

1.定距

2.定宽

效果图

完整HTML代码

    
    
    
    


    

        

            

                ![](img/word.png)
            
            

                

                    Login
            
        
    
    

            这里是大标题应该出现的位置
        

        这里是子标题出现的位置
        
        注册一个
    
        
    

    

            
10mins学会一门技能
    

        

            
            

            
Title's here
            
Username
            

            
40%get
            10k
        
        
        

            

            
Title's here
            
Username
            

            
40%get
            10k
        
        
        

            

            
Title's here
            
Username
            

            
40%get
            10k
        
        
        

            

            
Title's here
            
Username
            

            
40%get
            10k
        
        
        

            

            
Title's here
            
Username
            

            
40%get
            10k
        
        
        

            

            
Title's here
            
Username
            

            
40%get
            10k
        
        
    



    
呈现给您最简洁有趣的知识是我们认为最有趣的事情
    


        

            

                
                
首席执行官
                
CEO
            
        
        

            

                
                
首席执行官
                
CEO
            
        
        

            

                
                
首席执行官
                
CEO
            
        
        

            

                
                
首席执行官
                
CEO
            
        

    
    Be our coach



    

        

            

                

                    ![](img/panda.png)
                
            
  
        
        

            

                
Adress:CN
                
Tel:10000000
                
E-mail:1231231
            
  
        
        

            

                
Adress:CN
                
Tel:10000000
                
E-mail:1231231
            
  
        
        

            

                
Designed by
                

                
zmy
                
            
  
        
    

完整CSS代码

.ui.vertical.basic.segment.master{
    height: 500px;
    background: url('img/hugue.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 40px;
}
.ui .text.menu{
    margin-top: -10px;

}
.ui.image.logo{
    margin-left: 15px;
    /* margin-top: 5px; */
    height: 50px;
    width: 50px;
}
.ui.image.footer{
    margin-left: 30px;
    margin-top: 20px;
}

.ui.inverted.circular.blue.button{
    margin-right: 20px;
    /* margin-top: -10px; */
}
.ui.center.inverted.aligned.header.slogan{
    font-size: 40px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}
h1.ui.header .sub.header{
    margin: 20px;
}
.ui .circular.red.button{
    width: 200px;
}
.ui.inverted.header.bottom-logo{
    margin: 0px;
}
.ui.inverted.segment.card-view{
    height: 220px;
    /* background: :url('img/card.png');background-size: cover;background-repeat: no-repeat; */
}
.ui.vertical.basic.segment.recommended > .ui.center.aligned.header{
    font-size: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.ui.inverted.segment.card-view > .ui.header{
    margin-bottom: 50px;
}
.ui.pink.inverted.basic.segment.people-say{
    height: 450px;
    /* background: url('image/people1.jpg');
    background-size: cover;
    background-repeat: no-repeat; */
}
.ui.pink.inverted.basic.segment.people-say > .ui.center.aligned.header{
    margin-top: 30px;
}
.ui.circular.segment{
    background: url('img/people2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    top: 200px;
    transform: translate(-50%, -50%);
}
.ui.circular.segment > .ui.header{
    position: absolute;
    left: 50%;
    top: 110%;
    transform: translate(-50%, -50%);
    width: 200px;
}
.icon.red.inverted.circular.star{
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%)
}
.ui.pink.inverted.basic.segment.people-say > .ui.red.inverted.circular.button{
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    background: white;
}
.ui.inverted.vertical.padded.segment{
    margin-top: 100px;
}