html5+css3项目 （企业网站之集团活动）

只是单纯的跟着视频做一个记录，顺便回顾一下基础

界面

1.界面分析：

最上面是一个标题也就是 集团活动然后是一个列表  活动展示 下面左边是列表 右边也是列表

2.代码解析：

①第一标题 设置class 名字 和之前的一样 css也会设置这里的标题

     <div class="title_bg">
                <h2><a href="list.html">集团活动</a></h2>
            </div>

② 接下来是集团活动列表 

      <section id="huodong_a">
                <ul>
                    <li><a href="content.html"><img src="images/hd_1.jpg"> </a> </li><li>
                    <a href="content.html"><img src="images/hd2.jpg"> </a> </li><li>
                    <a href="content.html"><img src="images/hd3.jpg"> </a> </li><li>
                    <a href="content.html"><img src="images/hd2.jpg"> </a> </li>
                </ul>
            </section>

接下来就是设置成一行

css 代码：

/*集团活动展示图片列表CSS*/
section#huodong_a{
    /*设置间距*/
    margin-top: 10px;
}
section#huodong_a li{
    /*横向对其*/
    display: inline-block;
    vertical-align: top;
    margin-right: 9px;
}
section#huodong_a li:last-child{
    /*最后是没有间距的*/
    margin-right: 0;
}
section#huodong_a li img{
    /*即使图片变了布局也不会变*/
    width: 150px;
    height: 150px;
}

③集团新闻活动表示一个列表 同时还有滑动效果

html 代码：

  <section id="huodong_b">
                <ul>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                </ul>
            </section>

同时计算好宽高 列表去掉前面点 使用before 选择器自动加入计数器 进行 前三是蓝色后面全是黑色  同时列表100%宽度不换行，自动省  然后右边的因为要和上面的对其 使用间隔

section#huodong_b{
    width: 469px;
    display:inline-block;
    margin-top:10px;
    vertical-align: top;
    margin-right: 9px;
}
section#huodong_b li:before{
    content: counter(listxh);
    background: #444;
    padding: 2px 5px;
    color: #fff;
    margin-right: 5px;
}
section#huodong_b li{
    counter-increment: listxh;
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 16px;
    -webkit-transition:text-shadow 1s linear;
    -moz-transition:text-shadow 1s linear;
    -ms-transition:text-shadow 1s linear;
    -o-transition:text-shadow 1s linear;
    transition:text-shadow 1s linear;
}
section#huodong_b li:first-child:before,section#huodong_b li:nth-child(2):before,section#huodong_b li:nth-child(3):before{
    background: #3598DC;
}
section#huodong_b li:last-child:before{
    padding: 2px;
    font-size: 14px;
}
section#huodong_b a{
    color: #444444;
    text-decoration: none;
}
section#huodong_b li:hover{
    text-shadow: 1px 4px 4px #000;
}
section#huodong_c{
    width: 150px;
    display:inline-block;
}
section#huodong_c li{
    display:inline-block;
    vertical-align: top;
    margin-top:10px;
}
section#huodong_c li:first-child,section#huodong_c li:first-child img{
    width:150px;
    height:205px;
}
section#huodong_c li:last-child,section#huodong_c li:last-child img{
    width:150px;
    height:154px;
}

End

点击下载源码