菜鸟学习笔记:html基础实战操作

结合所学内容,制作一个简单网站首页

难点:

• div布局
• 表单制作

页面实现效果

页面实现效果

贴代码

html部分

    
        
        
        
    
    
        

            

                

                
Colorful Shi yan Lou
                contact us
            
            

            

            

                ![](./images/profile.png)
                
we are engineers
                
we are young
            
    
            
            

                
Working
                ![](./images/cabin.png)
            
            

                
Eating
                ![](./images/cake.png)
            
            

                
Playing
                ![](./images/game.png)
            
            

                
Sleeping
                ![](./images/circus.png)
            
            

                

                
                    
let's learn with us
                    

                    good good study,day day up!
                    
                
            
            

            

            ![](./images/user.png)
            

            

            

                
Send email to shiynlou
                Your name:
                

                
                

                Your email:
                

                
                

                What you wanna say:
                

                
                

                

                
                
            
 
            
            
            

        
    

css部分

#container{
    width:100%;
}
#header{
    width: 100%;
    height: 130px;
    text-align: center;
    background-color: #758181;
}
#header h1{
    color: aliceblue 
}
#header a{
    float: left;
    color: lightgray;                         
}
#paragraph{
    background-color: lightseagreen;
    height: 550px;
    text-align: center;
    font-size: 30px;
}
#paragraph h1{
    color: aliceblue;
}
#paragraph p{
    color: aliceblue;
}
#leftside{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#leftside img{
    height: 260px;
    width: 300px;
}
#leftside h1{
    text-align: center;
    color: lightslategray;
}
#middle1{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#middle1 img{
    height: 260px;
    width: 300px;
}
#middle1 h1{
    text-align: center;
    color: lightslategray;
}
#middle2{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#middle2 img{
    height: 260px;
    width: 300px;
}
#middle2 h1{
    text-align: center;
    color: lightslategray;
}
#rightside{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#rightside img{
    height: 260px;
    width: 300px;
}
#rightside h1{
    color: lightslategray;
    text-align: center;
}
#footer1{
    height: 600px;
    background-color: powderblue;
    clear: both;
}
#footer1 a{
    text-align: center;
    color: lightslategray;
}
#footer2{
    height: 100px;
    background-color: lightslategray;
    text-align: center;
    clear: both;
}

毕竟新手,做的还不够好,勿喷