[Project] Little Hat Mall Pure Front-End Native (1)

Little Hat Mall

Chapter 1 Login and Registration Layout Construction

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta >
    <link rel="stylesheet" href = "css/reset.css" > 
    < link  rel = "stylesheet"  href = "css/index.css" > 
</ head > 
< body > 
    <!-- outermost wrapping element --> 
    < div  id = "wrapper" > 
        <!-- header--> 
        < header  id = "header" > 
            <!-- top part--> 
            < div  class = "headTop" > 
                <!-- header element--> 
                <div  class = "headTopMain" > 
                    <!-- left--> 
                    <div  class = "left" > 
                        < h5 > Welcome to Little Hat Store! Please < / h5 > 
                        < p > 
                            <a href="javasvript:;" >  login </a> 
                            <a href="javasvript:;" > register </a> < / p > <  / div > < / div > _ _ _ _ _ _ </ div > </ header > <






>
</html>

/*  css\index.less  */ 
@import  'mixins/clear.less' ; 
//  the outermost wrapping element 
#wrapper{ 
    //  head 
    #header{ 
        // the  upper 
        part.headTop{ 
            background:  #eaeaea; 
            height :  30 px; 
            //  The center 
            element.headTopMain{ 
                width:  1200 px; 
                margin:  0  auto; 
                line-height:  30 px; 
                .clearfix(); //left.left 
                {  h5 {                         float: left 
                ;


                        margin - right :  5 px ; 
                    } 
                    p{ 
                        float :  left ; 
                        a{ 
                            //  &nameable_child 
                            &:first-child  { 
                                border-right:  1 px  solid  #b3aeae; 
                                margin - right :  1 px ; 
                                padding - right :  5 px ; 
                            } 
                        } 
                    } 
                } 
            } 
        } 
    } 
}

/* css\reset.css */ 
/* clear margins*/ 
body , h1 , h2 , h3 , h4 , h5 , h6 , hr , p ,
 dl , dt , dd , ul , ol , li ,
 pre ,
 fieldset , button , input , textarea ,
 th , td {
     margin : 0 ;
     padding : 0;
}
/* set default font */ 
body ,
 button , input , select , textarea { /* for ie */ 
    font : 12px / 1.3  "Microsoft YaHei" ,Tahoma, Helvetica, Arial, "b8bf53" , sans-serif; /* Represented in Unicode characters, so no problem in any encoding */ 
    color : #333 ;
}


h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address , cite , dfn , em , var , i { font-style : normal; } /* make italics right*/ 
b , strong { font-weight : normal; } /* make bold and thin*/ 
code , kbd , pre , samp , tt { font-family : "Courier New" , Courier, monospace; } /* Uniform monospace font*/ 
small { font-size : 12px ; } /* Chinese characters smaller than 12px are difficult to read, make small normal change*/

/* reset list elements */ 
ul , ol { list-style : none; }

/* Reset text formatting elements */ 
a { text-decoration : none; color : #666 ;}

/* reset form elements */ 
legend { color : #000 ; } /* for ie6 */ 
fieldset , img { border : none; }
 button , input , select , textarea {
     font-size : 100% ; /* make the form Elements can inherit font size under ie */
}

/* reset table elements */ 
table {
     border-collapse : collapse;
     border-spacing : 0 ;
}

/* reset hr */ 
hr {
     border : none;
     height : 1px ;
}

/* Let non-IE browsers also display vertical scroll bars by default to prevent flickering caused by scroll bars */ 
html { overflow-y : scroll; }

a:link:hover{
     color : lightgreen !important;
     text-decoration: underline;
 }

input { /*Remove outline*/ 
    outline : none;
}

img { /*Remove line breaks in inline elements*/ 
    display : block;
}

  • When there is a child element in the parent element with floating positioning enabled, it will affect the height of the parent element to collapse

/* css\mixins\clear.less */
.clearfix(){
    &::after{
        clear: both;
        display: block;
        content: '';
    }

}

Chapter 2 List Layout Construction

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta >
    <link rel="stylesheet" href = "css/reset.css" > 
    < link  rel = "stylesheet"  href = "css/index.css" > 
</ head > 
< body > 
    <!-- outermost wrapping element --> 
    < div  id = "wrapper" > 
        <!-- header--> 
        < header  id = "header" > 
            <!-- top part--> 
            < div  class = "headTop" > 
                <!-- header element--> 
                <div  class = "headTopMain" > 
                    <!-- left--> 
                    <div  class = "left" > 
                        < h5 > Welcome to Little Hat Store! Please < / h5 > 
                        < p > 
                            <a href =  "javasvript:;" > login </a> 
                            <a href = "javasvript:;" > register </a> < / p > <  / div > < ! -- _ right --> < div class = "right" > < nav >





                             "javascript:;" > My Orders </ a > 
                            < a  href = "javascript:;" > My Cart </ a > 
                            < a  href = "javascript:;" > My Cap Shop </ a > 
                            < a  href = "javascript:;" > Little Hat Mall Member </ a > 
                            < a  href = "javascript:;" > Enterprise Purchase </ a > 
                            <a href="javascript:;">Follow Little Hat Mall </ a > 
                            < a  href = "javascript:;" > Cooperation and Investment </ a > 
                            < a  href = "javascript:;" > Merchant Background </ a > 
                        </ nav > 
                    </ div > 
                </ div > 
            </ div > 
        </ header > 
    </ div > 
</ body > 
</ html >

/*  css\index.less  */ 
@import  'mixins/clear.less' ; 
//  the outermost wrapping element 
#wrapper{ 
    //  head 
    #header{ 
        // the  upper 
        part.headTop{ 
            background:  #eaeaea; 
            height :  30 px; 
            //  The center 
            element.headTopMain{ 
                width:  1200 px; 
                margin:  0  auto; 
                line-height:  30 px; 
                .clearfix(); //left.left 
                {  h5 {                         float: left 
                ;


                        margin-right:  5 px; 
                    } 
                    p{ 
                        float:  left; 
                        a{ 
                            //  "e the current element 
                            &:first-child  { 
                                border-right:  1 px  solid  #b3aeae; 
                                margin-right:  1 px; 
                                padding-right:  5 px; 
                            } 
                        } 
                    } 
                } 
                //Right.right{                     float: right ; nav{ //  a label is a line label, there will be a small spacing by default font                         -size: 0




 px;
                        a{
                            margin-right: 10px;
                            padding-right: 10px;
                            font-size: 12px;
                            border-right: 1px solid #b3aeae;
                            &:last-child{
                                border:none;
                                margin-right: 0px;
                                padding-right: 0px;
                            }
                        }
                    }
                }
            }
        }
    }
}

Chapter 3 Logo and [Search Box]

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta >
    <link rel="stylesheet" href = "css/reset.css" > 
    < link  rel = "stylesheet"  href = "css/index.css" > 
</ head > 
< body > 
    <!-- outermost wrapping element --> 
    < div  id = "wrapper" > 
        <!-- header--> 
        < header  id = "header" > 
            <!-- top part... --> 
            <!-- bottom part --> 
            < div  class = "headBottom" > 
                <!-- Heart element --> 
                <div class="headBottomMain">
                    <!-- logo --> 
                    < h1  class = "logo" > 
                        < a  href = "javascript:;" > 
                            < img  src = "image/lemonmall.png"  alt = "" > 
                        </ a > 
                    </ h1 > 
                    <!-- search box--> 
                    < div  class = "search" > 
                        < input  type = "text"  placeholder = "Please enter the search content" > 
                    </div>
                </div>
            </div>
        </header>
    </div>
</body>
</html>

/*  css\index.less  */ 
@import  'mixins/clear.less' ; 
//  The outermost wrapping element 
#wrapper{ 
    //  Head 
    #header{ 
        // The  upper part  ... 
        //  The lower 
        part.headBottom { 
            //  The heart 
            element.headBottomMain{ 
                width:  1200 px; 
                margin:  0  auto; 
                .clearfix(); 
                //logo 
                .logo{ 
                    float:  left; 
                    a{ 
                        img{ 
                            width:  170 px; 
                            margin:  25 px  45px;
                        }
                    }
                }
                .search{
                    float: right;
                    margin-top: 35px;
                    input{
                        &:first-child{
                            box-sizing: border-box;
                            width: 490px;
                            height: 32px;
                            padding: 0 4px;
                            border: 3px solid #EF8201;
                            float: left
                        }
                        // Submit button 
                        &:last-child{ 
                            width:  68 px; 
                            height:  32 px; 
                            color:  #fff; 
                            background:  #EF8201; 
                            border:  none; 
                        } 
                        //  modify placeholder 
                        &::-webkit-input-placeholder  { 
                            color:  skyblue ; 
                        } 
                    } 
                } 
            } 
        } 
    } 
}

Chapter 4 Product Category Navigation Layout

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta >
    <link rel="stylesheet" href = "css/reset.css" > 
    < link  rel = "stylesheet"  href = "css/index.css" > 
</ head > 
< body > 
    <!-- outermost wrapping element --> 
    < div  id = "wrapper" > 
        <!-- HEAD-->
        ...
        <!-- end of header--> 
        <!-- start of category navigation--> 
        < div  id = "navWrap" > 
            <!-- heart element--> 
            < div  class = "navWrapMain" > 
                < a  href = "javascript:;" > All product categories </ a > 
                < a  href = "javascript:;" > Clothing City </ a > 
                < a  href = "javascript:;" > Beauty Shop </ a > 
                <a href="javascript:;">Little Hat Supermarket </ a > 
                < a  href = "javascript:;" > Global Purchase </ a > 
                < a  href = "javascript:;" > Flash Sale </ a > 
                < a  href = "javascript:;" > Group Purchase < / a > 
                < a  href = "javascript:;" > Interesting </ a > 
                < a  href = "javascript:;" >Spike </a> _ _
            </ div > 
        </ div > 
        <!-- end of category navigation--> 
    </ div > 
</ body > 
</ html >

/*  css\index.less  */ 
@import  'mixins/clear.less' ; 
//  The outermost wrapping element 
#wrapper{ 
    //  Head starts 
    ... 
    //  Head ends 
    //  Category navigation starts 
    #navWrap { 
        border-bottom:  2 px  solid  #EF8201; 
        //  The heart 
        element.navWrapMain{ 
            width:  1200 px; 
            margin:  0  auto; 
            .clearfix(); 
            a  { 
                margin:  0  22 px; 
                font-size:  16 px; 
                color :#333;
                float: left;
                line-height: 50px;
                &:first-child{
                    width: 210px;
                    height: 50px;
                    background: #EF8201;
                    color: #fff;
                    font-size: 14px;
                    font-weight: bold;
                    float: left;
                    text-align: center;
                    line-height: 50px;
                }
            }
        }
    }
}

Leave a Comment

Your email address will not be published. Required fields are marked *