Previous blog is mainly to resolve the structural elements of the blog, also made a cute cat image happy. From the beginning of this blog, in order to achieve the re-layout design elements of the blog. Here Tucao about cnblog actually have to upload the file format restrictions, I would have thought to take advanced bootstrap to be a responsive layout, but he wants to use to css.map index files, programs can only be spoiled -
this blog the task is to design the overall layout of the personal kind, and to achieve header.
Overall layout planning
In order to better observe the effect, I add the child element at home in the semi-transparent nature:
filter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
- A normal blog layout, it can be the top layer header, on the left below is Bowen area, on the right is the sidebar, footer and finally the bottom is, both sides have to stay a little blank. Therefore, header and footer region and the contents set to the width 1200px, Bowen and sidebar region than 1200px together a little bit, and with
margin:0 autothe center. - For a better observation, the decision to the components of the background color. Header color (195,232,141), Bowen area is (81,154,186), the sidebar area is (225,205,64), footer is (37,37,37). And give them to add a black border
border:1px solid black, the gap between the Bowen area and the sidebar is to prevent something a little more cause can not be arranged in a line. - As the Bowen area and the sidebar area to be displayed side by side, use the float property, either side. Both also have a height difference, check out this time is slightly longer sidebar 721px. The content area is set minimum length 752px, Bowen column area and the side area of 99% height (leave voids setting is a good habit internal dimensions).
- Finally give the whole head gap 2px, content, tail (obscured exactly two border), then the entire
overflow:hiddenhidden overflow portion, the basic layout is complete.
Header design
In addition to the title page header not need to change much of that is the navigation bar, so first of all to achieve it.
List area and count area
- Navigation set 60px height, width 1200px, including navigation and blog content list count, and they should be arranged side by side and the following Bowen / sidebar region width, and set the width and float Similarly properties.
- Halfway encountered a little problem. Navigation List is a direct label ul, preferably outside a div container however does not have, so its width disposed magic often encounter an error. Aligned with the upper left margin adjust to it, and then continue after the error is found close to the debug 40px, and then let list area and count area are 900px 300px.
- List area includes a hyperlink to jump six labels, the use of
display:inline-block;float:lefgt;them in a row and left-aligned, the width is set to more than 900/6 = 150px. In order not to influence the judgment long section of the border, you can set box-sizing property to border-box, so set that includes a long section, including the border, that is realized within the border effect - To make the font floating in the middle of containers, using a control line-height and font-size two properties to achieve the approximate effect (hey, if I do, then I will direct each tab has a div container and then locate the direct position , how can there be so much trouble).
- Word count area centered vertically. Similar effects are also used.
title
The title character initially is relatively small, and posted on the edge of the div. In order to let him have a personal kind, at least tune about the size, position and move it there ......
Font problems
Why fonts to come up with a separate terms? Because to get hold south of the font too. In general, in order to show good-looking fonts look good, basically no local computer on a web page, you can specify a font download source in the css method of @ font-face. Web browser rendering time will be based on the attributes of the font download information is then displayed.
/*指定字体来源*/
@font-face {
font-family: '徐静蕾手写体';
src: url('http://www.webhek.com/徐静蕾手写体.eot'); /* IE9 Compat Modes */
src: url('http://www.webhek.com/徐静蕾手写体.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://www.webhek.com/徐静蕾手写体.woff') format('woff'), /* 所有现代浏览器 */
url('http://www.webhek.com/徐静蕾手写体.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.webhek.com/徐静蕾手写体.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*使用自定义字体*/
body {
font-family: '徐静蕾手写体';
}
It was supposed to a very good solution, but also abroad generally applicable, why have ye not? But the problem is the differences in the Chinese and English: English fonts only need to set the 26 letters, including capacity is small, relatively easy to make, and therefore also more open source; Chinese font contains thousands of commonly used Chinese characters, making the inconvenience, usually by the enterprise brought commercial development, really boring.
See this information from ( https://www.webhek.com/post/web-font-chinese.html ), thanks to the help of their predecessors. The method used was to streamline font files and generate base64 encoded directly. (Cnblog font file upload support not so much broken things ......)
First find a nice font. Due to the large number of foreign sans-serif font, domestic began modeling projections of general application which is not simple font. This font looks fresh enough and generous enough to make web design more sense. Here I am looking for created characters Kobo cloud Chuan Body:
created characters Kobo hxd, from freshman to do hard labor in the propaganda department in use, can be free to make personal, non-commercial (bai) with (piao) all kinds of nice fonts . Direct input download code makefont get ttf font file. I drop turtle, direct 5MB ......
recommendation is to use the original blog fontforge streamline the fonts, but fontforge is more suitable for custom build fonts, streamline operations it is not very convenient. So after the meal chaos to find online, find Xishanju predecessors did fontpruner software, which is designed to streamline the font software, you need the python and java environment I just have.
Open frontpruner.py, modify
for path in inputPath:
print"path = " +path
fullPara +=path+" "
The print part of him parentheses (windows to increase, linux is not required). Then the font file into the root directory in the src \ FontExtract \ ChineseOutPut.txt enter the word you want, a return to a more open cmd directory, enter:
python FontPruner.py --inputPath=./ --inputFont=./字体名.TTF --tempPath=./
After completing obtained a output folder, which will have to streamline the font file.
Then open an online base64 transcoding website upload get Data-URL, and then set the font-face property (inside src direct result of coding with a long list just got), will be successful ----
strange ...... frustrating day What effect at all. I question the customer has a blog, a few days to know what the problem is and then change the font to continue it ...... now Microsoft elegant black make do with chanting ......
Preliminary success
Finally, the whole header to a background, as follows:
/*设置图片不随鼠标移动、自动适应屏幕大小、不重复*/
#header{
background-image:url(https://images.cnblogs.com/cnblogs_com/joufulmika/1688590/o_200403064227bg1.jpg);
background-attachment: fixed;
background-size:100%;
background-repeat:no-repeat;
}
Navigation bar and then a whole had a white background, with translucent inherit from home, the resulting effect is as follows:
there is so little taste oh!
In fact, if you can, but also to add a background image of div mask blank, mask the use of transition effects, take from the lower left to the upper right, black fade to white, and then adjust the transparency and background images fit together is a gradual change of the picture, can make up for what prominent empty upper right corner of the page header, but unfortunately the ~
today to do here, font there to do for a long time and finally defeat I did not expect. Until the time to get all the basic layout, the page header might be able to do a cool hour animation of it!