门户网站 静态页面总结2

Posted 2020-08-03

头部结构

1、logo区设置宽高后（高度值与父元素相同即可），由背景图片引入，left center。

2、user区包含searchbox和nav，为user设置一个需要的高度、宽度，float：right,设置margin-top来实现居中。子元素float：left；margin-right控制间距。

　　2.1searchbox包含input和button，通常为做成外观一体，为searchbox设置border。

　　　　input{border：0；background：0；outline：0；}一般会为其设置text-indent:2px;

　　　　button{border：0；}

　　2.2usernav部分，选项间有“|”的情况 <li><a href="#">xx</a>|</li>,为<a>设置左右padding即可实现效果。

3、headtitle区，结构是包裹<div>下的<a>排列，<a>xxx</a>。

　　基础样式：为xx居中分开，为div设置line-height，<a>设置左右padding，margin-right值即可。

　　实现效果样式：鼠标划过xx时出现border-bottom有渐变样式。

　　　　伪类与伪元素知识前提：https://segmentfault.com/a/1190000000484493

　　　　::after在被选元素的内容后面插入内容，并用content属性来指定插入内容。　　　　

 1 a{
 2     padding:0 25px;margin-right:30px;
 3     position:relative;display:inline-block;
 4 }
 5 a::after{
 6     width:100%;height:2px;background:#1e96d5; 
 7     opacity:0;content:".";
 8     position:absolute;top:100%;left:0;
 9     transform:sacle(0.85);
10     transition:height 0.5s,opacity 0.5s,transform 0.5s;
11 }
12     /*-moz-//-webkit-//transform/transition*/ 
13  a:hover::after{height:3px;opacity:1;transform:scale(1); 

　　   注意点：

　　　   <a>设置display:inline-block后<a>的高度将变成父元素的line-height值。

　　　　<a>需要设置相对定位，以方便a::after绝对定位(子元素绝对定位不能撑开父元素，用a::after插入的内容绝对定位后不占a的高度)。

　　　　a::after插入内容放在<a>中，width：100%，表示继承了a的宽度。绝对定位top值为100%表示在a的bottom。content:"."；作用是撑开对象。

　　　　opacity:0;表示完全透明（以隐藏），1表示完全不透明。

　　　　transform对元素进行旋转，缩放，移动，倾斜。

　　　　　　属性值scale（x）通过设置轴的值来定义缩放旋转,更多属性值见http://www.w3school.com.cn/cssref/pr_transform.asp

　　　　transition用于表现简单的动画效果。

　　　　以上代码仅能实现hover时的效果。不能实现点击效果固定。可设置一个class为current，jq实现click事件removeClass与addClass。

　　　　a.current(表示class为current的a标签)::after{height:3px;opacity:1;transform:scale(1}即可。