Tmall front end series teaching materials （ one ）- Basics - Front end training project - Set a small goal first , Make him a tmall official website

Tmall front end series teaching materials （ two ）- Basics - Front page list

After learning the front end HTML CSS JavaScript After various technologies , There will be a feeling , It's not difficult to separate each knowledge point , But to make a shape , Nice , Fashionable web pages , There's no way to start .

This requires the accumulation of experience .

This project is very close to Tmall official website Web site

Click to enter : Imitate tmall's official website

This project 90% The content is By pure Html CSS and JQuery complete , You can learn how to use the original html and css Complete the front-end effect of tmall .

In the process of learning this project , Be able to learn how to consider layout , How to deal with the details , Accumulate valuable front-end project experience .
During the interview , One more conversation , One more layer of weight , More salary

Correct

7 branch 56 second

1.0 Original speed 1.25 Double speed 1.5 Double speed 1.75 Double speed

This video uses html5 Play mode , If it cannot be played normally , Please upgrade your browser to the latest version , Recommend Firefox ,chrome,360 browser . If thunderbolt is installed , Play the video and show the direct download status , Please adjust Thunderbolt system settings - Basic settings - Start - Monitor all browsers ( Remove this option ). chrome of Video download Plug-in will affect playback , as IDM etc. , Please close or switch other browsers

Tmall front end series teaching materials （ two ）- Basics - Front page list

The official account of programming , Follow and get the latest tutorials and promotions in real time , thank you .

lately 10 A question

2021-11-06 Which software is used

WJ16TBZ20021030

about Practice projects - Tmall front end - Learning ideas Your questions

harm I finished css Or notepad I don't know what software I need to use

The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you

2021-10-11 punch the clock

zxc779210816

about Practice projects - Tmall front end - Feedback and suggestions Your questions

Start learning step by step , Learn other parts , More and more code , Look, I'm confused . Still want to thank the webmaster , Learned a lot of knowledge . Although I may not remember . Ha ha ha .

1 One answer

how2j
Answer time ：2021-11-02

Write more and practice more and you will become more and more familiar

The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you

2021-09-22 .redColor{ color: #C40000 !important; }

2021-07-16 Login box positioning overflow problem

bird

about Practice projects - Tmall front end - Login page Your questions

You can put the login box div As a child div, Then give it to the father div Set background picture , The login box is then positioned relative to itself , So no matter how the window changes , The login boxes are located according to their relative positions and will not overflow pictures

  div.loginBackgroundImg {
        width: 1190px;
        height: 600px;
        background-image: url(/tmall/img/site/loginBackground.png);
        z-index: -1;
        margin: 0px auto;
    }

    div.loginSmallDiv {
        background-color: white;
        position: relative;
        right: -800px;
        top: 100px;
        width: 350px;
        height: 400px;
        padding: 60px 25px 80px 25px;
    }

<div class="loginBackgroundImg">
            <div class="loginSmallDiv" id="loginSmallDiv">

                <div class="login_acount_text"> Account login </div>
                <div class="loginInput ">
                    <span class="loginInputIcon ">
                        <span class=" glyphicon glyphicon-user"></span>
                    </span>
                    <input type="text" placeholder=" mobile phone / Member name / mailbox " name="name" id="name">
                </div>
                <div class="loginInput ">
                    <span class="loginInputIcon ">
                        <span class=" glyphicon glyphicon-lock"></span>
                    </span>
                    <input type="password" placeholder=" password " name="password" id="password">
                </div>
                <div>
                    <a href="#nowhere" class="notImplementLink"> Forgot login password </a>
                    <a class="pull-right" href="#nowhere"> Free registration </a>
                </div>
                <div style="margin-top:20px">
                    <button type="button" class="btn btn-block redButton"> Sign in </button>
                </div>
            </div>
        </div>

1 One answer

how2j
Answer time ：2021-07-27

good and nice!

The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you

2021-06-18 about <button tyle="button">

2021-06-16 The stationmaster greatly cid It's something ？

banyue

about Practice projects - Tmall front end - Classify and recommend products - pure html Your questions

As the title

<div class="eachCategory" cid="83">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                     Flat panel TV 
                </a>
            </div>

1 One answer

papalee
Answer time ：2021-06-17

category id?

The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you

2021-06-03 Each menu on the left corresponds to a different page

2021-05-16 Tmall front end project jump page

2021-05-13 $("div.eachCategory[cid="+cid+"]")

up-bear

about Practice projects - Tmall front end - Interaction Your questions

I don't quite understand this sentence $("div.eachCategory[cid="+cid+"]"), Can you write it like this ,“ [ ... ]” What do you mean? ？ function showProductsAsideCategorys(cid){ $("div.eachCategory[cid="+cid+"]").css("background-color","white"); $("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA"); $("div.productsAsideCategorys[cid="+cid+"]").show(); }

1 One answer

how2j
Answer time ：2021-05-13

This is jquery Property selector for , The corresponding tutorial is in ： /k/jquery/jquery-selector/468.html#step976

The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you

2021-05-12 The detailed explanation of this style is great ！

Please... Before asking questions land

The question has been submitted successfully , Auditing . Please My question Check the question record at , thank you

about Practice projects - Tmall front end - Project introduction Your questions

Try to provide Screenshot 、 code and Abnormal information , Help to analyze and solve problems . You can also enter this station QQ Group communication : 496725845

Ask questions and try to provide complete code , Environment description , The more conducive to the recurrence of the problem , The faster your question can be answered .
Have questions about the code in the tutorial , Please provide which step , Which line is in doubt , This makes it easy to quickly locate the problem , Improve the speed at which questions are answered
In the thousands of questions that already exist , A considerable proportion , Because of the use of and webmaster Different versions of the development environment Resulting in , For example jdk, eclpise, idea, mysql,tomcat Wait, the version of the software is inconsistent .
Please use the same version as the webmaster , You can save yourself a lot of learning time . The webmaster sorted out the software versions used in teaching , It's all here , Convenient for everyone to download ： /k/helloworld/helloworld-version/1718.html

Upload screenshot