I studied English for a week html and css, Write something with something new , Imitate the home page of Xiaomi mall, according to its page layout, embezzle its pictures and write a static page of Xiaomi Mall .

Source code : link :https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ password :lwc5

  • Summarize the shortcomings of writing front end :

    • css Many attribute names can't be remembered , I often need to check my notes
    • The class name is not very standard
    • Not making full use of css Class
    • The whole page layout seems to be pieced together ( It's a good piece of work )
    • We haven't realized the dynamic effect of the page yet , Let's say the rotation chart , tab , Put the mouse on a a Dynamic effects on labels ( Wait to learn javascript Come back to dynamic effects )
  • summary : Writing the front end is more like ‘ knit a sweater ’, From top to bottom, bit by bit , One div One div To write , To layout , There is no logic . By writing this page, we deepen our understanding of html The use of labels and their impact on css Understanding of element attributes , Know their own shortcomings and follow-up to write other pages need to pay attention to some places .

design sketch

  • Top

  • The middle part

  • The tail

html+css Realize more related articles on the static page of Xiaomi mall home page

  1. use HTML+CSS Realize a static page on the home page of the website of the Institute of planning

    link :https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ  Extraction code :s6ys

  2. Django The use of celery and NGINX Generate static pages for performance optimization

    Performance optimization principle : When we want to give client When the browser returns to a page , We need to go to the database to query the data and render the data and the basic page template to form a page and return it to the client , But if every user queries the data of the home page once , When there was a lot of traffic that day ...

  3. django- Configure static pages -celery/redis/nginx

    celery Generate static page celery_tasks/tasks.py # Generate static home page from django.template import loader, RequestContext # tem ...

  4. WebApi Make the static page the home page

    WebApi Make the static page the home page Use scenarios Use... In my project Asp.Net WebApi As a back-end data service , Use Vue As front-end Web, On the server IIS Two ports are required for deployment , One is 80 port , Users in the browser ...

  5. Bring it with your mobile phone uc Browsers view static pages ,css Style does not show

    Problem description : The problem is that a colleague is writing a mobile page with UC After the browser test , The static pages of other browsers display normally , only UC Browsers don't display page styles . I've tested the code and it's ok , Because I didn't find an Android phone , Just guess PC The end should be ...

  6. mvc Pseudostatic < Four > Pseudo static after static page or reference css And picture failure

    Refer to the css And the solution to picture failure Just change the relative path of the style reference file to an absolute path For example, the original reference path is :<link href="~/Content/css/style.css" ...

  7. Imitate Sina home page 、 The theme 、 Details page , pure html Static page

    Imitate Sina home page . The theme . Details page . pure html Static page , Download address : http://download.csdn.net/detail/sweetsuzyhyf/8085535

  8. Talking about php Generate static page

    One . lead said In speed , Static pages are better than dynamic pages php Much faster , There is no doubt about it , But because static pages are less flexible , Without the help of a database or other device , The overall management is cumbersome , Like editing . For example, the right to read ...

  9. use Smarty Introduction to generating static pages

    why Smarty? With the company's home page ( Hereinafter referred to as the home page ) More and more traffic , Recently, we began to consider the technology of using background language to generate static pages . We know , A simple page is usually a .html( perhaps .htm ..shtml) Postfix file ...

Random recommendation

  1. mysql Create a scheduled task

    One . Preface since MySQL5.1.6 rise , Added a very distinctive feature – event scheduler (Event Scheduler), It can be used to perform specific tasks at regular intervals ( for example : Delete record . Summarize the data and so on ), To replace the original can only be operated by ...

  2. Database connection pool series ——c3p0

    c3p0 Of jar Bag is :c3p0-0.9.1.jar <bean id = "dataSource" class = "com.mchange.v2.c3p0.Com ...

  3. Sharepoint 2010 Workflow Release

    1. First of all, you need to have a created WorkFlow 2. And then in Sharepoint Open this in WorkFlow, Click on Save as Template, The system will automatically send this Workflow Save in Site Asse ...

  4. SQL Sever Download all versions SQL Server 2012 download SQL Server 2008 download SQL Server 2005

    SQL Server 2012SQL Server 2012  Development Edition (DVD)(X64,X86)( Chinese simplified )ed2k://|file|cn_sql_server_2012_developer_edit ...

  5. About String Object creation

    1)String String yes Java String class in , It belongs to the reference data type . therefore String The object of is the address of the reference . At the bottom is a character array . String It's immutable . Immutability means that an object has a reference ...

  6. Ubantu16.04 Conduct Android 8.0 Source code compilation

    Refer to this blog After testing ,8.0 After the source code is downloaded and compiled , Occupy 100 many G Hard disk space for , Try to give ubantu The system leaves more hard disk space , If you need to develop on the compiled source code later , More controls need to be reserved , In order to prevent the subsequent file permissions ...

  7. Stone of vision ( Namely sdio The problem of treasure )

    Answer key : This question has been explained twice before .. You can use set<int,cmp> To achieve according to dfn Sort Code : I feel that other people's classification discussion is simpler than mine .. But I don't think I'm tired of writing this, so I don't look at other people's .. ...

  8. MATLAB insert value Law

    MATLAB insert   value   Law author : Kaluga Gio - Blog Garden http://www.cnblogs.com/kailugaji/ One . The experiment purpose Two . Experimental principle 3、 ... and . Experimental procedure Four . Experimental content 5、 ... and . answer 1. Program ...

  9. Asp.net Framework and SpringMvc The framework is simple

    ( This article is a self summary , There are many mistakes. Please don't learn from them ) 1. Just two days ago SpringMvc In the framework is through controler To jump to the page , adopt mapping To connect data The method of analysis is through java Call each other between classes of , individual ...

  10. vmstat In command System Next in cs When is high ?

    https://superuser.com/ https://serverfault.com/ Good condition indicators CPU utilization :User Time <= 70%,System Time <= ...