Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the skills of building a personal website with DIV and CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Well, last time we came up with such a strange thing, didn't we feel miserable, um, it felt right. But it doesn't matter, let's make her plump this time. Are there any wrong ideas with me in the children's shoes below? are there any?

OK, let's start with the low level, this simple content is less crunchy.

Post my design draft first.

We can see that the regions correspond one by one, and when designing, we should think about how to achieve it in different regions when making a web page, and it can be realized as simply as possible in the case of ensuring the design quality. Well, of course, for beginners, it looks like it doesn't look like an egg now, but it's important to keep in mind that this is why designers want to learn these ghost codes.

OK, now open your design draft, let's do it in one size fits all.

In PS, select the slicing tool and the cut icon in the same group

Use the slicing tool to cut out the areas above. Note that the slices and slices cannot intersect or have gaps. Adjust them carefully. When slicing is not the right size, you can resize at any time, similar to using the morph tool.

After the slice is finished, if you want to adjust, you can also use the slice selection tool to reselect any slice and adjust it.

Then save it in the format used by web, and forget about the shortcut keys, you know. Format selection JPG, size do not move, point storage, file name first casually, format selection is limited to images, default settings, all slices.

In fact, there is a small regional task, the format can choose HTML and image, PS will help you generate a web page, but that is too low, our chivalrous people disdain, well, whether you believe it or not, I believe it.

After saving, open the folder you saved. PS will generate an images folder and change the name of this folder. In fact, all the folders where the pictures are saved on the website are named by this name. Open the images folder and we can see the cut picture.

Then name them separately, simple points can be 1234, complex points are for SEO and maintainability considerations, named semantically, such as LOGO, name the home page-header-logo,home_top_logo. In this way, another size of logo used elsewhere will not be confused with this logo.

After naming, copy the entire images folder to the location of the web page file, which is important not to forget.

Then we go back to DW, where there are two ways to insert an image in HTML. Let's try the first one, directly on the page.

See that img tag, that is the meaning of directly inserting a picture, the format anyway you remember to write on the line, src after the quotation marks is the relative location of the image file, this means the same level with the web file folder images 1.jpg. The understanding of the relative position will take some time to practice, but it is not difficult to rest assured.

In addition to the relative position, there is also an absolute position. You can see that there is a long list of URLs in the right-click attribute of a Baidu picture. Just copy that and replace the relative address. However, when this is not generally used on the website, let's not delve into it.

All right, now let's insert the first cut and preview the F12 in DW.

Shit, what the heck, why Mao and other areas overlap, why Mao was so unscrupulous when I narrowed my browser.

Hey, hey, let's not delve into the reason first, the main reason here is to let everyone know that this is not possible.

We have to use the second way to insert the picture-insert it as the background in CSS. Always insert something I blush a little bit, alas, why should I blush?

Er, speaking of CSS, let's first review the last code, uh, well, I reviewed it above.

Before we added the same name to each DIV called box and gave this name some attributes, hehe why I remember the title in the game, with attribute name, Emma this explanation is good. Well, first of all, we have to add another attribute to the name box. As for Shenma, hey, the advanced article has its own wonderful use.

This means to wrap it up and don't cover it, do you understand, wrap it up, but when that thing gets bigger inside, you have to get bigger, too, and you can't cover someone else.

Ah, don't think about it, keep writing the code.

Okay, now we're going to give each DIV its own unique name.

According to the name of DIV or according to the serial number, write these new attributes, mine is 9 partitions, write 9 names and write attributes to them, here in order to be simple to write in the form of bg1, if it is a work project, then certainly can not write like this, to code semantics, specific knowledge and other branch line plot to tell it.

The meaning of the attribute here should be roughly understood, first of all, the background: the image address is aligned horizontally and vertically, then the width is 100%, and the height should follow the currently inserted image, because it is a background image, DIV, that is, the container itself will not adapt because of the background image.

And give these honorable names to every DIV.

See, more diao than the game, each character can wear multiple titles, as long as the middle with a space to separate on the line, too slutty, too shameless.

All right, now let's go to F12 again, and of course you can refresh the page you previewed before.

Rough coming, rough web page coming, oh yes.

Well, there are some strange things in, , the border we added last class, and the name of each area. Delete these things and look, oh, drunk, this is my first web page, just like that little footprint on the moon, it means a lot.

Let's look at all the code again.

These are all the contents of this article entitled "what are the skills of building a personal website with DIV and CSS?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.