德云社官网总结

德云社官网总结

这是简单地做完德云社七个主页面之后的总结
（因为学习进度原因，有些动画特效还没学习，所以轮播使用图片代替，相同的样式也是复制粘贴来的，到后期应该会有封装之类的吧…碎碎念）

1.首先页面左右两边是没有缝隙的，可以在公共样式中设置：

<style>
   body{margin:0}/* 由于body的margin影响 */
</style>

2.德云社官网上面有一段话的滚动样式：“德云社欢迎您光临！”，没学动画的我只能用marquee标签来做：

<marquee scrollamount="4">德云社欢迎您光临！</marquee>

scrollamount属性是在网上搜到的，用来控制标签的移动速度，是滚动标签的滚动延时属性。

3.官网上会有大量的图片，样式相同，这时候就可以使用列表来实现，例如：

       <ul>
        <li><a href="http://weibo.com/guodegang?refer_flag=1001030101_&is_all=1" target="_blank">
          <img src="img/img(6)01.png" alt="">
          <h3 class="k">郭德纲微博</h3>
         </a></li>
         <li><a href="http://weibo.com/u/1851881587?c=spr_qdhz_bd_baidusmt_weibo_s&nick=于谦&is_all=1" target="_blank">
          <img src="img/img(6)02.png" alt="">
          <h3 class="k">于谦微博</h3>
         </a></li>
         /*此处省略多个li*/
       </ul>

站在个人的经验上提个醒：
如果遇到ul，记得在样式加margin: 0; padding: 0; 因为ul会有默认的margin和padding值；
遇到li记得加list-style: none;
遇到链接标签a记得加text-decoration: none; 如果有宽高需要：display: block;
p标签也有默认的margin值，也需要注意
（当然这是针对于那些不想要默认值的可爱们而言，如果要不要都没关系的话那就可以不用管了…碎碎念）

4.针对鼠标触发两个不同元素变化问题，例如：

这是我的架构：

<ul>
      <li class="starli"><a href="">
        <img src="" alt="">
        <h3></h3>
       </a></li>
      <li class="starli"><a href="">
        <img src="" alt="">
        <h3></h3>
       </a></li>
</ul>

用列表实现，li 标签下一个链接，链接下嵌套图片和标题，我最开始写的代码是：

<style>
    .starli>a:hover{width: 282px;height: 363px;border: 2px solid darkorange;}
    .starli>a>img:hover{width: 281.6px;height: 363px;}
    .starli>a>h3:hover{width: 281px;height: 66px;}
</style>

后来我发现这样不能实现鼠标滑入图片和标题同时放大的效果，然后去网上查了一下：
父元素：hover 子元素1 { 。。。。。 }
父元素：hover 子元素2 { 。。。。。 }

修改代码：

<style>
    .starli:hover a{width: 282px;height: 363px;border: 2px solid darkorange;}
    .starli:hover a>img{width: 281.6px;height: 363px;}
    .starli:hover a>h3{width: 281px;height: 66px;}
</style>

就这么妥妥的成了，这个鼠标触发两个元素变化的问题算是解决了，不过还有些细节问题还是不对，目前方法没找到，解决问题后一定更新。

5.下面是避坑环节，根据我这几个页面做下来的经验，只能说给新新手一些建议，可以省去很多麻烦
（因为我也是个新手…碎碎念）
继续用旧图说事

<ul>
        <li><a href="http://weibo.com/guodegang?refer_flag=1001030101_&is_all=1" target="_blank">
          <img src="img/img(6)01.png" alt="">
          <h3 class="k">郭德纲微博</h3>
         </a></li>
        <li><a href="http://weibo.com/u/1851881587?c=spr_qdhz_bd_baidusmt_weibo_s&nick=于谦&is_all=1" target="_blank">
          <img src="img/img(6)02.png" alt="">
          <h3 class="k">于谦微博</h3>
         </a></li>
         /*此处继续省略多个li*/
</ul>

前面第三点有说到大量统一样式排列整齐的图片可以用列表来完成，但是我在做的时候遇到一些问题，例如岳云鹏微博模块和张云雷微博模块需要使用右浮动，可是我在样式里写的是ul>li{float:left;}，然后傻乎乎的我就去给所有 li 命名，lione和litwo，一个左浮动一个右浮动，差不多就是这个样子：

又累又费事还浪费空间，后来学乖了：

<style>
    ul>li{float:left}
    /*既然大多数都是左浮动，那就整个左浮动*/
</style>
<ul>
   <li></li>
   <li></li>
   <li style="float: right;"></li>  /*这个是要右浮动的li*/
</ul>

就解决啦！

然后就基本没什么了，各种画框画框，div 套 div ，总之学到了很多，果然多动手多做页面是好事啊…（碎碎念）掰掰！