[Ctrl A Select All Tips: You can modify part of the code first and then press Run]
I don’t know why this paragraph cannot be styled. It may be because it is the same as the code on the page. Then we won't add it. Let's analyze the structure first and see what the role of each element is. Let's first set the style of #header, which we have already mentioned above.
#container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}#blogname is our Blog name, which contains the #blogtitle sub-element. When we set it up, we first set #blogname and then #blogtitle.
#container #header #blogname{font-size:22px;color:#999;font-weight:bold;float:left;padding:15px 0 0 25px;} #container #header #blogname #blogTitle{display:none}Here we set the font size, color, bold, floating left and padding distance of #blogname. The blogtitle is set not to be displayed.
Looking further down, we see the two elements #left and #right. We will know the meaning of the naming. That's the style at both ends of #header. We can use float:left and float:right to achieve it. In this style, we don't need to set it. This can mainly implement #headers such as rounded corners.
#menu is a menu item. Generally, we are confused when we look at it. In addition, it contains the float attribute, which makes it difficult to use. Let’s analyze it:
#menu is an overall style. It contains a structure of
.
About the item list, and there are bound styles in li, which are menuL, menuA, menuDIV, and menuR respectively. The functions of menuL are to use Float:left; to control the style of the left end of the menu, and menuDIV to control the menu items. The style between is the separator, and menuR uses float:right; to control the style at the right end of the menu.
#container #header #menu{float:right;margin:35px 15px 0 0}
#container #header #menu ul{}
#container #header #menu ul li{float: left;height:20px;list-style:none;}
.menuL{}
.menuR{}
.menuDiv{width:1px;height:20px;background:#999;margin-right: 15px;margin-left:15px;}float:left; in li is a necessary condition to implement a horizontal menu, list-style:none; is to eliminate the small dot in front of the list.
Just these top styles are not perfect. We need to style the menu links. That is, the style of menuA is missing one thing we didn’t mention just now.
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}
.menuA: hover{text-decoration:none;}:visited is the style after visiting, :link is the usual style, :hover is the style of mouse contact, in fact there is also :active (when the mouse is clicked and released The style of events that occur between them) There is a written order
"LoVe/HAte" (love/hate) link rule: Link, Visited, Hover, Actve. Please refer to the manual for specific parameters.
4.4 Content Style Content style contains more elements and more transformations. Let’s take a look at what styles we need to do. The first is the content
#Tbody, which contains the main content
#mainContent and the toolbar, which is the sidebar
#sidebar, on the home page. On the login page, there are login boxes, registration pages, and information prompts for errors. Congratulations on passing. These are the message box styles
#MsgContent.If you have looked at the Layout.css in the previous style file, you may have found a problem. The tags I mentioned above are all marked with #, which is the ID selector, and there is no mention above that the tags starting with . are classes. Selector, that is,
class="*". Why is there such a naming method? We know that
Pjblog is a modular program. We can customize the sidebar module and content module ourselves, which means that the IDs (
Module Identification) in several toolboxes in the sidebar toolbar can be named by ourselves. , the same is true for the modules in the content. This creates more styling possibilities for our templates. You can understand it this way, first we use a unified class, and secondly we define a unique ID for each toolbox. Then we can define the style of each toolbox through these two combinations. The form is as follows:
We start with the sidebar, which has a clear structure. A
#sidebar main element contains three sub-elements
#sidebar-topimg, #innersidebar, #sidebar-bottomimg. Obviously
#sidebar-topimg, #sidebar- bottomimg is the style of the top and bottom of the sidebar, and
#innersidebar is where the toolbox
.sidepanel is placed. Toolbox
.sidepanel is also used as a main element, which contains
.Ptitle title,
.Pcontent content panel, and
.Pfoot bottom. Look at the code:
code
代码里的AA、BB、CC就是我们自定义的
模块标识。这个在后台模块设置里可以自己定义。
那我们把上面的代码定义一下式样看看效果，想要的效果就是每个功能块(AA、BB、CC)的头部(ptitle)有一个自己的式样（分别是：红、黄、蓝）。
.ptitle{height:10px}Define the common style attributes of ptitle;
#Side_aa .ptitle{background:red}The following defines different colors.
#Side_bb .ptitle{background:yellow}#Side_cc .ptitle{background:blue}What should be noted here is ID naming rules for PJ sidebar modules: Add Side_ before the module identification. For example, aa here, that is #Side_aa. The default module identification of the program cannot be changed. After seeing the effect, have you already felt the magic of the module function of
Pjblog? We can also give each module absolute positioning to achieve various Layout. For example, the calendar style of
Eternal Love and the Skins switching module style of
Yahoo Weight. What we are also talking about here is the structure of Pj and how to use these structures. For specific CSS properties, please refer to the manual.
What we need to understand here is the relationship between module identifiers and selectors. There are more detailed instructions in the selector manual.
Then let’s look at the style of the main content. The style of the main content is a little more complicated than the side column. First, the label of the main content is
#innermainContent, which is also a three-column (or multi-column, because custom modules can be added) layout. Including the header
#mainContent-topimg, the middle column
#Content_Contentlist and the bottom
#mainContent-bottomimg. We can define their styles separately. The head and bottom are already the most basic DIVs and do not contain sub-elements. You can define their styles as much as you like without considering what other styles are in them. The meaning of this sentence is After the definition is completed, it is the final style. And
#Content_Contentlist is the default module of the program and cannot be deleted. The bottom module is set in the background. If you add content modules, the added content modules can be freely defined as mentioned in the sidebar above.
Also note here: the ID naming rules of PJ content module: For example, if the content module ID is Contentlist, then the ID of this module is #Content_Contentlist. It is important to add Content_ before the content module ID. Because the custom module is uncertain, I will not go into details here, but focus on the default module Contentlist. Like the sidebar, the content here no longer uses ID selectors, but class selectors. First of all,
#Content_Contentlist contains two columns,
.pageContent and
.Content.
.pageContent is the paging style, which is also the final defined style. . What is the specific part? Let’s look at the picture below:
All these places belong to the category
.pageContent. This is the advantage of class selectors. You may think that we have been talking about the structure for a long time without talking about CSS. Don’t worry, it is important to understand the structure. Hold back and look down.
After understanding the paging style, let’s look at the style of
.Content. The content in
.Content is relatively rich. First of all, it is a three-column layout, with header
.Content-top, content
.content-body, and bottom
.content-bottom. The left and right DIVs are hung on the head and bottom respectively.The ones at the head are .Contentleft and .contentright, and the ones at the bottom are .ContentBleft and .contentBright. We can literally understand where these are located. If you don’t understand yet, please go to
model.
In
.Content-top it also contains some other log information, namely the title, author, and date of the log. So where are these differences? The title belongs to the .ContentTitle category, and the author and date packages belong to the .ContentAuthor category. They are contained in
and
respectively.
As mentioned above, these are the styles in the homepage mode, which are a little different in the single blog mode. There is an additional .Content-Info class under
, which also contains two classes: InfoAuthor and InfoOther. The information contained here is as shown below:
The following is the text. Content-body. In a single blog, content such as [article from] [citation address] [Tags] is also given the .Content-body class. In order to distinguish it from [article from] [citation address] [Tags], this ID is added. The #logPanel tag is not available on the home page. In fact, you can also add it to the homepage. When I was making the style
Yahoo Weight, I added a #logPanel tag to the homepage for the initial style of the content, so that I can control the log content and the style of the homepage summary separately.
In addition to these styles, there are also comment box styles.comment and information box styles #MsgContent and UBB box.comment in the content.
Comment box style.comment is usually in a single blog content, it is a two-column layout. It contains two classes: .commenttop and .commentcontent.
Scroll down to see if this is the case.
Information box style#MsgContent. It's just below the comment information, where you post comments (of course there are also login boxes, information prompts, registration, etc. that are used). This one is not complicated, just a header #MsgHead and #MsgBody, the meaning is very clear. The UBB editor style in the content is another file control, which will be discussed later.
The content format is basically over here. Now we will mainly look at some of the codes in this section.
The structure of the content block will appear in several situations, such as homepage status, single blog, content plug-in and other modes. Focus on the first two situations.
Home page status code
As you can see from the above code, I didn't use a lot of styling, I just used background and foreground colors to differentiate each element. It may not look very pretty, but the important thing is to change it yourself. Sometimes there is no content in an element, and it is not easy for us to understand the existence of this element. Some elements in my modules that do not have text or other content have added text descriptions. You can try deleting or changing the CSS code to further understand the role of each element.
There is another little trick here. In the normal mode of the homepage, Pjblog gives each log summary an ID. You can define the styles individually or in batches. The naming rule is "log_" "Log ID number". We can see the difference between logs 173 and 174 from the above code. How do you know the ID of the log? We move the mouse to the link of the log and see that there is
?id=*** at the end of the link, which is the ID of the log.
Single post statusThere is a big difference between the single post status and the homepage. The contents included include custom modules, categories and previous chapters (.pageContent), title author date (.ContentTitle.ContentAuthor), custom font size and log level weather conditions (.Content-Info), content, comment paging (pageContent ), comment (comment), comment box (MsgContent), etc.
Look at the code
The comment box (MsgContent) will be explained in detail in a later chapter. The general part of the content is basically finished. The important thing is to understand the structure of
Pjblog and the specific meaning and effect of each CSS attribute by changing and refining the above code.
4.5 Bottom styleThe content of the bottom style is actually not very much, it can be said to be very little. But why do we need to open a section here? Some digressions from the tutorial are involved here. Everyone has to take a look, otherwise no matter how good Skin is, it will be BSed by others.
We know that the bottom of the Blog contains some important information. The first line begins with very important copyright information, which explains the copyright of
Pjblog and contains the official website link, followed by the name of your site and the structure of the site (that is, xhtml | css). The second line is the page execution time and the number of database queries, followed by some information about our Skin, including the website and email address of the author of the Skin name. The third line is the registration of the site.
Here we want to focus on copyright. Some information about the Skin indicates that this Skin was made by you (how to do this will be discussed in a later chapter). Users can contact you through this information to respond to some problems. Of course, it is also a good way to promote you. It is also a benefit to encourage everyone to do Skin.
We must absolutely protect the copyright information of Pjblog. We have also discussed this issue, saying that there are so many pirated versions of Windows, but these also retain the copyright of MS. We all know that Windows is a Microsoft product. Piracy may be because some people are poor, which I can understand. But for such an excellent open source program like
Pjblog, does it cost you a penny? Do you need to remove his copyright? In this way, basic morality will be lost. So whether we are doing Skin or using
Pjblog, we should respect the author. It seems like it's a little far apart.
Back to business, let’s take a brief look at the bottom style. It's very simple, look at the code:
Clearly, a DIV with a Foot tag and two
. Through the previous study, I think everyone should understand how to do it. In fact, generally we do not need to set this, the basic font size and other things are already defined by default. But we can add some pictures at the bottom, use padding, margin and other attributes to control the position of the text, left alignment, right alignment of the text, etc. One thing to understand here is the control of
. The program uses two
fields. There may be line branching problems when setting borders or padding.
5. Detailed performance
5.1 PjblogDefault module
We know# Many functions of ##Pjblog are composed of modules, and when we make Skin, we must also pay attention to defining the default modules of the program for the sake of versatility.
5.1.1 Calendar styleWe also need to understand its structure.
Calendar It is a sidebar module. We mentioned earlier that modules are included in the sidepanel panel of the sidebar, and then each module is given a unique ID. The ID of the calendar here is Side_Calenbar. Then we can define the DIV with class sidepanel and ID Side_Calendar. As for how class and ID are defined, we have already mentioned it before and will review it here. The former is a class selector, expressed in the form:
.Class attribute. The latter is the ID selector, expressed in the form: #ID name. It won’t be repeated again. Generally, the sidepanel is defined uniformly for the unified coordination of Skin. Only in special styles, the DIV with the ID of Side_Calendar is defined. Of course, this DIV, like other sidebar panels, also has an H4 tag with Class Ptitle, a content DIV with Class Pcontent, and a bottom DIV with Class Pfoot. The main content of the calendar is a DIV with the ID Calendar_Body in Pcontent. A total of 7 rows are protected here. A DIV with the ID Calendar_Top displays the XXXX year and month and two direction buttons. A DIV with the ID Calendar_week displays the week. There are 5 DIVs with the ID Calendar_Day. Here are the specific dates.
Let’s take a look at the further structure. Only by fully understanding the structure can we do a good job in Skin.
Calendar_Top: In addition to the content, there are two DIVs with IDs LeftB and RightB, which control two direction buttons respectively. We can customize the picture of the button
Calendar_week: Inside is a
structure. The first one is Sunday "day" with a < outside it. ;font>The program defines red by default. Through our understanding of navigation, we know that in order to arrange this structure horizontally, we must use Float. Otherwise, we must use
liststyle:none;
Calendar_Day: The structure here is the same as Calendar_week, but different The li contains the hyperlink
, and different classes are assigned to dates in different situations.
Date selection (.click), today (.today), non-monthly date (.otherday), today’s existing log (.haveD), today’s existing log (.DayD) Let’s take a look The code and calendar stylesheet are in the typography.css of the template. Because
CSS has inherited features, we'd betterwrite the code in the order of the default style.
-
-
#Calendar_Body{margin:5px 10px 5px 0px;font-family:arial;line-height:120%}
-
-
#Calendar_Body #Calendar_Top{padding :0px 2px 0px 2px ;height:18px;text-align:center;font-weight:bold;}
-
-
#Calendar_Body #Calendar_Top #LeftB {background:#333;width: 9px;height:16px;float: left;cursor:pointer;overflow:hidden;}
-
Click to download the fileOf course some people say that it is not better to use Dreamweaver? It is not recommended to use it here. It is easier to remember the meaning of the code by handwriting. Besides, CSS visual writing is not very ideal. Originally TopStyle3 is the best tool for visually writing CSS, but the CSS between 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
