search
HomeheadlinesWeb front-end learning route: How to learn DIV+CSS from scratch

Web front-end learning route: How to learn DIV+CSS from scratch

Mar 30, 2017 pm 03:34 PM
csswebfront endstudyroute

CSS is the style, DIV is the layer. DIV+CSS is the website standard (web standard), usually to illustrate the difference from the table positioning method in the HTML web design language. Because in the XHTML website design standard, it is no longer Use table positioning technology, but use DIV+CSS to achieve various positioning. Many students who do website development start from the web front-end. So how to learn DIV+CSS from scratch?

1. Learn the HTML language, and then learn DIV+CSS with ease.

If you understand HTML syntax, you can see through 80% of the websites in the world. HTML language is easy to learn, and you must memorize some commonly used codes. Because of tools like Dreamweaver that help generate HTML code, many people ignore the learning of HTML. After learning HTML, the most basic language in the Internet, When learning DIV+CSS, you will find: It turns out that DIV+CSS is just like that, a piece of cake.

Recommended tutorial:

HTML online learning manual: http://www.php.cn/course/27.html

htmlOnline learning Video tutorial: http://www.php.cn/course/list/11.html

php.cn Original html5 video tutorial: http://www.php .cn/course/372.html

2. Use Dreamweaver’s code mode to write DIV and CSS.

For beginners in web design, it is difficult to write code directly using Notepad, Notepad and other tools. Because Dreamweaver's code mode has a prompt function, it can ensure the correctness of the syntax written. And you can write unfamiliar grammar correctly at once.

As shown in the figure: the functions provided by DW when writing p and html.

Web front-end learning route: How to learn DIV+CSS from scratch

The CSS visual editing function on the right side of the DW toolbar when writing CSS.

web前端学习路线:如何从零开始学习DIV+CSS 第二张

When I learn DIV+CSS I learned it from Dreamweaver's code model. It may not be the best, but it is very practical. (Dreamweaver tool download)

Recommended tutorial:

CSS online learning manual: http://www.php.cn/course/45.html

CSS online learning video tutorial: http://www.php.cn/course/list/12.html

php.cn Dugu Jiubian ( 2) - CSS video tutorial: http://www.php.cn/course/373.html

3. Develop good writing habits.

Having good living habits means that the person is good at living, and having good CSS writing habits means that the person is rigorous in doing things. There are many recommended specifications on the Internet when writing CSS, such as menu for menu, copyright (CoryRight) for copyright, footer for bottom, etc. The writing order is generally: display attribute-self attribute-text attribute. Of course, there are no hard and fast rules for these, but it is not a bad thing to follow some unwritten rules. This will make the code you write easier for others to understand, and search engines will like it more.

4. Only when the purpose is clear and the results are clear can the process be the most efficient and will not be easily disturbed or changed in direction.

CSS+DIV Practical Combat: Developing a Personal Blog Video Tutorial: http://www.php.cn/course/190.html

Recommended related articles:

Web front-end learning route: Quick introduction to WEB front-end development

What do you need to learn to become an excellent front-end engineer?

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools