HTML5-12(对百度界面的简单解析)

百度首页效果如下:

百度首页效果

• 1.先说一下总体布局的设置

  三个部分是3个div,为了更好地改变样式,我们给每个div设置id,在里面每个小的标签设置 class,这样是为了更好地精准的设置样式,这样做好处很多

• 2.说一下整个的北京图片

  body{   
       /*添加图片, no-repeat:不平铺*/  
       background: url("../images/bg.jpg") no-repeat;   
       /*添加图片:覆盖整个body*/         
       background-size: cover;
  }
  

• 3.说一下关于<a></a>标签

     /*加粗* /
     font-weight:bolder;
     /*设置字体*/
     font-family: 'sans-serif';
     /*设置文字的大小*/
     font-size: 15px;
     /*右边的外间距*/
     margin-right: 10px;
     /*设置字体颜色*/
     color: white;
     /*字体颜色是正常的*/
     font-weight: normal;
     /*去除下划线*/
     text-decoration: none;
  

• 4.说一下<input>

说一下`<input>`

   /*让输入框往里面缩小*/
   box-sizing: border-box;
   /*做内边距5px*/
   padding-left: 5px;
   /*字体大小*/
   font-size: 16px;

   input:focus{    
      /*去除外边框*/   
      outline: none;    
      border: 1px solid #3385ff;
   }

百度一下

• 5.底部的设置

底部的设置

• 6.鼠标放在图片上会有阴影出现

说一下每个图片其实都是可以打开的,都是<a></a>标签嵌套一个图片
#代表链接,自己设置
<a href="#"><img src="images/d_1.png"></a>

鼠标放在图片上会有阴影出现

• 7.百度上面的阴影

主要是利用了CSS3的新特性,rgba,改变透明度

百度上面的阴影

百度首页demo 密码: mdn5

大神勿喷