2016年10月12日星期三
今天的主要学习内容是：如何在网页上画图“布局”，先画框，再填内容,从上到下，从左到右。
下午的作业：（没写备注--懒癌又发作了>_<）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zhubajie</title>
    <style>
    .uni{
        width: 1190px;
        margin: 0 auto;
        height: 542px;
    }
    </style>
</head>
<body>
    <div style="width: 1423px;height: 35px;background: #888888;">
        
    </div>
    <div class="uni" style="width: 1190px;height: 8170px;margin: 0 auto;background: #A8A8A8;">
        <div>
            <div class="uni" style="height: 722px;background: #00CC00;">
                <div style="height: 60px;background: #000000;">
                </div>
                <div style="height: 120px;background: #FFFFFF;">
                
                </div>
                <div style="height: 542px;background: #000099;">
                    <div style="width: 208px;height: 542px;float: left; background: #FF9900;">
                        
                    </div>
                    <div style="width: 979px;height: 542px;/* 浮动: 方向[left/right]; */float: left;background: #FF66FF;margin-left: 3px;">
                        <div style="width: 979px;height: 44px;/* 浮动: 方向[left/right]; */float: left;background: #FFCCFF;">
                            
                        </div>
                        <div style="width: 979px;height: 498px;/* 浮动: 方向[left/right]; */float: left;background: #FF33FF;">
                            <div style="width: 672px;height: 498px;/* 浮动: 方向[left/right]; */float: left;background: #FF0066;">
                                <div style="width: 451px;height: 498px;/* 浮动: 方向[left/right]; */float: left;background: #FF0099;">
                                    
                                </div>
                                <div style="width: 221px;height: 498px;/* 浮动: 方向[left/right]; */float: left;background: #FF3366;">
                                    <div style="width: 221px;height: 166px;/* 浮动: 方向[left/right]; */float: left;background: #FF00CC;">
                                        
                                    </div>
                                    <div style="width: 221px;height: 166px;/* 浮动: 方向[left/right]; */float: left;background: #FF33CC;">
                                        
                                    </div>
                                    <div style="width: 221px;height: 166px;/* 浮动: 方向[left/right]; */float: left;background: #FF66CC;">
                                        
                                    </div>
                                </div>
                            </div>
                            <div style="width: 300px;height: 498px;/* 浮动: 方向[left/right]; */float: left;background: #FF0066;margin-left: 7px;">
                                <div style="width: 300px;height: 125px;/* 浮动: 方向[left/right]; */float: left;background: #FF00FF;">
                                    <div style="width: 60px;height: 35px;/* 浮动: 方向[left/right]; */float: left;background: #000033;">
                                        
                                    </div>
                                    <div style="width: 60px;height: 35px;/* 浮动: 方向[left/right]; */float: left;background: #000066;">
                                        
                                    </div>
                                    <div style="width: 60px;height: 35px;/* 浮动: 方向[left/right]; */float: left;background: #000099;">
                                        
                                    </div>
                                    <div style="width: 60px;height: 35px;/* 浮动: 方向[left/right]; */float: left;background: #0000CC;">
                                        
                                    </div>
                                    <div style="width: 60px;height: 35px;/* 浮动: 方向[left/right]; */float: left;background: #0000FF;">
                                        
                                    </div>    
                                </div>
                                <div style="width: 300px;height: 208px;/* 浮动: 方向[left/right]; */float: left;background: #FF33FF;">
                                    
                                </div>
                                <div style="width: 300px;height: 165px;/* 浮动: 方向[left/right]; */float: left;background: #FF66FF;">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                
                </div>
            </div>    
        </div>
    <div class="uni" style="height: 102px;background: #F8F8F8;margin-top: 20px;margin-bottom: 20px;">
        <div style="width: 396px;height: 102px;/* 浮动: 方向[left/right]; */float: left;background: #E8E8E8;">
            
        </div>
        <div style="width: 396px;height: 102px;/* 浮动: 方向[left/right]; */float: left;background: #808080;">
            
        </div>
        <div style="width: 396px;height: 102px;/* 浮动: 方向[left/right]; */float: left;background: #606060;">
            
        </div>
    </div>    
        <div class="uni" style="height: 200px;background: #F8F8F8;margin-bottom: 20px;">
        
        </div>
        <div class="uni" style="height: 356px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 22px;">
            
        </div>
        <div class="uni" style="height: 305px;background: #F8F8F8;margin-bottom: 30px;">
            
        </div>
        <div class="uni" style="height: 91px;background: #990099;">
            
        </div>
        <div class="uni" style="height: 60px;background: #FFFFFF;">
            
        </div>
        <div class="uni" style="height: 821px;background: #000000;">
            <div class="uni" style="height: 266px;background: #0000FF;margin-bottom: 13px">
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0000;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0033;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0066;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0099;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC00CC;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC00FF;">
                    
                </div>
            </div>
            <div class="uni" style="height: 266px;background: #0066FF;margin-bottom: 13px">
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0000;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0033;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0066;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0099;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC00CC;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC00FF;">
                    
                </div>
            </div>
            <div class="uni" style="height: 266px;background: #0033FF;">
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0000;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0033;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0066;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC0099;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC00CC;margin-right: 10px">
                    
                </div>
                <div style="width: 190px;height: 266px;/* 浮动: 方向[left/right]; */float: left;background: #CC00FF;">
                    
                </div>
            </div>
        <div class="uni" style="height: 94px;background: #FFFFFF;">
            
        </div>    
        </div>
    </div>
    <div style="width: 1423px;height: 450px;background: #606060;">
        <div style="width: 1423px;height: 198px;background: #585858;">
            
        </div>
        <div style="width: 1423px;height: 252px;background: #FFFFFF;">
            
        </div>
        
    </div>
</body>
</html>

                                 

                                                                                               kitty