分享兴趣，传播快乐，增长见闻，留下美好！

亲爱的您，这里是LearningYard新学苑。

今天小编为大家带来话说前端26-html+css实战（1），欢迎您的访问。

由于前面已经学习完了html+css的全部知识，但是还没有总的来完成一个画面，所以，这次我们来仿写一下w3school的页面，这个页面比较简单，接下来我们就来分析。

As we have learned all the knowledge of html+css before, but we havent finished a picture in general, so this time, lets imitate w3schools page, which is relatively simple. Next, we will analyze it.

对于网站的标识，我们可以采用图片插入，并且下划线也可以采用过渡的形式来达到hover的感觉。

For the logo of the website, we can insert pictures, and underline can also take the form of transition to achieve the feeling of hover.

这里就是一个输入框，但是是圆角的，所以要采用border-radious，然后后面可以是一个图片，也可以是一个精灵图，同时按照原网站的样式，也要添加hover的伪类元素。

Here is an input box, but its rounded, so we should use border-radious, and then it can be followed by a picture or a wizard diagram. At the same time, according to the style of the original website, we should also add the pseudo-class elements of hover.

接下来是顶部的导航栏，可以采用表格，也可以采用盒子的形式来做，在这里建议不要使用浮动，同时也加上hover的伪类元素，记得设计好字体的大小和颜色。

Next is the navigation bar at the top, which can be made in the form of a table or a box. Here, it is recommended not to use floating, but also to add the pseudo-class elements of hover. Remember to design the font size and color.

接下来是左右两栏，就是普通的表格，通过定位，偏移等就可以达到这些样子，同时建议，给所有同一样的hover设计相同的类名（给多个类名，用空格隔开，id只能有一个。）。

Next are the left and right columns, which are ordinary tables. These can be achieved by positioning, offset, etc. At the same time, it is suggested that all the same hover should be designed with the same class name (give multiple class names, separated by spaces, and only one id. ）。

接下来就是中间一栏，因为大多数都比较简单，所以我只讲解一个，就是hover的时候实现字不变色，但是下划线变色，这里可以用下边框的形式来代替下划线，当hover的时候就可以单独给下边框设计颜色。

Next is the middle column, because most of them are relatively simple, so Ill only explain one, that is, the word does not change color when hover, but the underline changes color. Here, you can use the form of lower border instead of underline, and when hover, you can design the color of the lower border separately.

今天的分享就到这里了。如果您对今天的文章有什么独特的想法，欢迎评论留言，让我们相约明天，祝您今天过得开心快乐！

Thats it for todays sharing. If you have any unique ideas for todays article, please leave a comment, let us meet tomorrow, I wish you a happy day!

翻译：Google翻译

本文由LearningYard新学苑原创，部分图片文字来自网络，如有侵权请联系。