html5+css3项目（企业网站之侧边栏的编写）

最新推荐文章于 2024-10-05 17:26:05 发布

Jack_King007

最新推荐文章于 2024-10-05 17:26:05 发布

阅读量3.7k

点赞数

分类专栏： Html5+css3入门文章标签： html5

本文链接：https://blog.csdn.net/Jack_King007/article/details/48396111

版权

Html5+css3入门专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文只是根据视频进行记录，回顾知识的..............

界面：

1.界面分析

第一幅图：最上面是标题然后是图片列表+描述信息然后新闻标题列表 css演示是前篇是一样的下面也是标题+列表后面一幅图也是标题+列表

2.代码解析

标题在第二篇就说了制订了样式

html 代码也就是

  <div class="title_bg">
                <h2><a href="list.html">精彩博文</a></h2>
            </div>

然后是两个标题

  <section id="bowen_a">
                <ul>
                    <li><a href="content.html"><img src="images/bowen_06.jpg"></a><a href="content.html">精彩博文详细标题</a></li><li>
                    <a href="content.html"><img src="images/bowen_06.jpg"> </a><a href="content.html">精彩博文详细标题</a> </li>
                </ul>
            </section>
            <section id="bowen_b">
                <ul>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                    <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li>
                </ul>

css ：指定Li 元素的宽高然后并排设置间距同时设置里面的描述信息，居中和多出的信息省略

/*博文信息*/
section#bowen_a li{
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    width: 172px;
    height: 136px;
    text-align: center;

}
section#bowen_a a{
    color: #444;
    text-decoration: none;
    display: inline-block;
    width: 100%;
}
section#bowen_a li:first-child{
    margin-right: 8px;
}
section#bowen_a li a:first-child{
    width: 172px;
    height: 111px;
}
section#bowen_a li a:last-child{
    height: 21px;
    overflow: hidden;
}

然而后面的列表还是那样的没啥不同的加了动画

section#bowen_b li:before{
    content: counter(listxh);
    background: #3598db;
    padding: 2px 5px;
    color: #fff;
    margin-right: 5px;
}
section#bowen_b li{
    counter-increment: listxh;
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 8px;
    -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#bowen_b li:hover{
    text-shadow: 1px 4px 4px #000;
}
section#bowen_b a{
    color: #444444;
    text-decoration: none;
}

然后再是<联系我们>那里两张图片

   <section id="lianxi">
            <div class="title_bg">
                <h2><a href="list.html">联系我们</a></h2>
            </div>
            <a href="content.html"><img src="images/about_13.jpg"></a>
        </section>

css 指定大小设置display 属性就可以了

/*联系我们*/
section#lianxi{
    margin-top: 20px;
}
section#lianxi a ,section#lianxi img{
    display: inline-block;
    width: 352px;
    height: 199px;
}

点击下载源码
End