vlambda博客
学习文章列表

HTML+CSS 阶段项目总结

经过一段时间的HTML＋CSS学习，初步掌握了网页布局与样式编码的思路。尝试着记录项目过程中使用的方法与遇见的错误。

一、项目介绍

本次项目已小组为单位，制作静态页面及部分交互效果，选择了某驰的官网进行模仿，项目内容分为：首页、车型及其详情页、客户服务以及新款车型推广页。新款车型推广页的任务由我完成（其中顶部导航以及底部导航内容由组员制作）。

二、项目内容

1.新车型推广页面

（1）banner部分（轮播仿制、箭头动画）

  
    
    
  

   
     
     
   由于JS的内容为涉及，又想要做轮播的效果。这次的banner通过CSS的动画来仿制了轮播的效果。
原理介绍：
轮播的效果就是更替banner页图片，因此我将图片设定为背景图片。总共准备了六张图，为了实现背景图每两秒更替新的一张，也就是总共
12s，使用动画属性定义了关键帧，将12s平分，所以动画帧为0%、20%、40%、60%、80%、100%，每帧的动画效果为重新设置背景图片。
CSS源码如下：
  
    
    
  
  
    
    
  

   
     
     
   /*广告栏*/
   
     
     
   
#amg_banner {
 position: relative;
 height: 86vh;
 width: 100%;
 cursor: pointer;
 background: url("../img/ada-new.jpg"),
 url("../img/ada-new.jpg"),url("../img/kv-my800050-amg-a-35-pc.jpg"),
 url("../img/pc-banner.jpg"),url("../img/v3-gle-53-coupe-pc-kv.jpg"),
 url("../img/2880-pc.jpg"),url("../img/kv-my800050-amg-cla-35-pc.jpg")
 no-repeat center;
 background-size: cover;
 animation: lunbo 12s step-start infinite ;
}

   
     
     
   /*轮播模仿*/
   
     
     
   
@keyframes lunbo {
 0% {
 background-image: url("../img/ada-new.jpg");
 }
 20% {
 background-image: url("../img/kv-my800050-amg-a-35-pc.jpg");
 }
 40% {
 background-image: url("../img/pc-banner.jpg");
 }
 60% {
 background-image: url("../img/v3-gle-53-coupe-pc-kv.jpg");
 }
 80% {
 background-image: url("../img/2880-pc.jpg");
 }
 100% {
 background-image: url("../img/kv-my800050-amg-cla-35-pc.jpg");
 }
}
  
    
    
  
  
    
    
  

   
     
     
   制作到这一步后，通过animation: lunbo 12s linear infinite ;调用动画，在实测过程中发现linear过渡类型，会使轮播的图片具有淡入
淡出的效果，背景图更替会闪屏。为解决这些问题，查阅资料得知step-start或step-end在此处均可解决淡入淡出效果；闪屏是由于下一张背
景图在加载完成后的闪出，因此我将所有背景图都加在background属性下，这样一来网页加载时，所有背景图都会加载，可以解决闪屏问题；
infinite 使动画无限次的执行；轮播效果就这样简单的仿制成功。

 箭头动画
 
 箭头往复运动，两个分别定位到页面左右端垂直居中，通过动画改变left、right的值实现往复运动，CSS源码如下：
  
    
    
  
  
    
    
  

   
     
     
   /*左箭头及其动画*/
   
     
     
   
#amg_banner #left_jiantou {
 position: absolute;
 width: 50px;
 height: 50px;
 top: 40vh;
 left: 50px;
 animation: zuojiantou 1s ease-in-out infinite alternate;
}
@keyframes zuojiantou {
 from {
 left: 50px;
 }
 to{
 left: 10px;
 }
}

   
     
     
   /*右箭头及其动画*/
   
     
     
   
#amg_banner #right_jiantou {
 position: absolute;
 width: 50px;
 height: 50px;
 top: 40vh;
 right: 50px;
 animation: right_jiantou 1s ease-in-out infinite alternate;
}
@keyframes right_jiantou {
 from {
 right: 50px;
 }
 to{
 right: 10px;
 }
}
  
    
    
  

2.中部导航栏（粘滞定位、锚点定位、移入效果）

  
    
    
  

   
     
     
   在使用粘滞定位时,至少需要设定top、bottom、left、right的其中一个属性值，这里设置top：0，当 页面向下滚动，导航栏位置页面窗
 口顶部时，粘附在顶部随着页面一起下滚。这里出现了一个问题，在未设置层级关系时，导航栏下面的内容 会遮挡导航栏。因此，在使用
 定位时，必须考虑内容层级关系，使用z-index属性调整内容层级。
  
    
    
  
  
    
    
  

   
     
     
   #mid_nav {
 position: sticky;
 width: 100%;
 height: 80px;
 line-height: 80px;
 background-color: #222222;
 top: 0;
 z-index: 1;
}
  
    
    
  
  
    
    
  

   
     
     
   锚点定位，每个需要定位板块的h标题标签给定id，导航栏的a标签 href="#id"定位至对应区域。例如：
 <h1 id="chexing">AMG车型 </h1>
  
    
    
  
  
    
    
  

   
     
     
   <ul class="clear">
 <li><a href="#chexing">车型</a></li>
 <li><a href="#jingxiaoshang">查找经销商</a></li>
 <li><a href="#about_amg_h">关于AMG</a></li>
 <li><a href="#tiyan">体验AMG</a></li>
 <li><a href="#huodong">AMG赛车活动</a></li>
 <li><a href="#sc">AMG驾驶学院</a></li>
 <li><a href="#club_h">AMG车主俱乐部</a></li>
 </ul>
  
    
    
  
  
    
    
  

   
     
     
   导航栏鼠标移入效果，移入时字体变色，出现下边框线
  
    
    
  

  
    
    
  

   
     
     
   
#mid_nav .w ul li a:hover {
   
     
     
    color: red;
 border-bottom: 2px solid red;
}
  
    
    
  

3.车型栏（移入对应链接时改变车型图片）

  
    
    
  

   
     
     
   由于hover属性只能选择其弟级或子级元素，因此在HTML结构上，车型图片的div必须位于链接标签的结构以下，不能越级，否者hover属性
 不能选中，效果也就无法实现。
原理：通过hover属性改变车型背景图，实现移入时的图片变化。
  
    
    
  
  
    
    
  

   
     
     
   /*第一列车型图变换*/
   
     
     
   
#amg_car_models_img>ul>li>ul>li>a:nth-of-type(2):hover~#img1{
 background-image: url("../img/toppc.png");
}
#amg_car_models_img>ul>li>ul>li>a:last-of-type:hover~#img1{
 background-image: url("../img/400x162-pc.png");
}
  
    
    
  
  
    
    
  

   
     
     
   /*第一列车型图变换*/
   
     
     
   
#amg_car_models_img>ul>li>ul>li>a:nth-of-type(2):hover~#img1{
 background-image: url("../img/toppc.png");
}
#amg_car_models_img>ul>li>ul>li>a:last-of-type:hover~#img1{
 background-image: url("../img/400x162-pc.png");
}
  
    
    
  

4.查找栏（点击事件仿制）

  
    
    
  

   
     
     
   通过checkbox的checked实现点击绑定，当复选框选中时，下拉框的height:0变更为height：300px,并设置过渡效果，实现点击出现下拉框的
效果。checkbox有默认样式，通过-webkit-appearance: none;将默认样式清除，重新设置其背景或其他样式改变成上图的箭头图标。
CSS代码如下：
  
    
    
  
  
    
    
  

   
     
     
   <input id="click" type="checkbox" value="^">

   
     
     
   /*checkbox样式更改*/
   
     
     
   
#map #click {
 display: inline-block;
 width: 40px;
 height: 40px;
 -webkit-appearance: none;
 color: white;
 line-height: 50px;
 text-align: center;
 position: absolute;
 border-radius: 50%;
 outline: none;
 border: none;
 transition: all .2s linear;
 background: url("../img/上箭头.png") center no-repeat #444;
 background-size: 50%;
 cursor: pointer;
}
  
    
    
  
  
    
    
  

   
     
     
   其余部分就不做详细介绍了，在二维码图片定位时，使用了CSS的calc() 函数 进行居中。使得屏幕分辨率变化时，二维码始终水平居中。
  
    
    
  
  
    
    
  

   
     
     
   #recruiting #erweima {
 width: 100%;
 margin-top: -10%;
}
#recruiting #erweima img,
#recruiting #erweima h2{
 width: 15%;
 text-align: center;
 margin-left: calc(50% - 7.5%);
}
  
    
    
  

5.新车型导航页

(1)规定版心宽度为940px

  
    
    
  

   
     
     
   .w {
 width: 940px;
 margin: auto;
}
  
    
    
  
  
    
    
  

   
     
     
   设定版心宽度后,margin:auto导航栏始终居中。
  
    
    
  

(2)带有车型标志(mercedes)的导航栏使用粘滞定位。

  
    
    
  

   
     
     
   #Mercedes_logo {
 height: 60px;
 line-height: 60px;
 background-color: #222222;
 border: 1px solid black;
 position: sticky;
 top: 0;
 z-index: 1;
}
  
    
    
  
  
    
    
  

   
     
     
   设定高度与行高使得logo图片垂直居中.在使用粘滞定位时,至少需要设定top、bottom、left、right的其中一个属性值，这里设置top：0
，当页面向下滚动，导航栏位置页面窗口顶部时，粘附在顶部随着页面一起下滚。这里出现了一个问题，在未设置层级关系时，导航栏下面的内
容会遮挡导航栏。因此，在使用定位时，必须考虑内容层级关系，使用z-index属性调整内容层级。
  
    
    
  

（3）分栏移入，字体浮入效果

  
    
    
  

   
     
     
   字体使用定位，透明度置0.
  
    
    
  
  
    
    
  

   
     
     
   #directory_up .bg h4,
#directory_down .bg h4{
 position: absolute;
 margin-left: 50px;
 top:60%;
 opacity: 0;
 transition: all .3s linear;
}
  
    
    
  
  
    
    
  

   
     
     
   当鼠标移入分栏时，“了解更多”字样的top属性值更改为58%，opacity:1，配合transition过渡属性，使其效果为由下向上浮入。
  
    
    
  
  
    
    
  

   
     
     
   #directory_up #directory_up_left:hover .bg h4 {
 opacity: 1;
 top: 58%;
}
  
    
    
  

三、总结

  
    
    
  

   
     
     
   在本次项目静态页面项目仿写中，通过CSS仿制了部分JS实现的效果，加深了CSS样式属性的理解以及运用，学会了查阅API文档。
 接下来是慢慢提升网页布局熟练度以及学习更多的CSS样式属性。