HTML+CSS的一些相关案例说明

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

1.制作网页过程中文字溢出用省略号显示的制作方法

步骤：这种省略号制作时，首先li必然有一个overflow:hidden表示文字超出部分隐藏，其次本行所有的文字必须保证一行来进行显示，最后溢出的部分用省略号来代替。

overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

2.main主题模块制作

main主体模块是index里面专有的，注意需要新的样式文件index.css 。

• main盒子宽度为980像素，位置距离左边220px (margin-left)，给高度就不用清除浮动
• main里面包含左侧盒子，左浮动，focus焦点图模块
• main里面包含右侧盒子，右浮动，newsflash新闻快报模块

2.1 newflash新闻模块

newsflash新闻快报模块

• 1号盒子为news新闻模块高度为165px
• 2号盒子为lifeservice生活服务模块高度为209px
• 3号盒子为bargain特价商品

news新闻模块

• 注意∶这里我们分为上下两个模块，但是两个模块都用div
• 1号盒子news-hd新闻头部模块，给一个高度和下边框
• 2号盒子news-bd新闻主题部分，里面包含ul和li还有链接

<div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#"><strong></strong> </a></li>
                            <li><a href="#"><strong></strong> </a></li>
                            <li><a href="#"><strong></strong> 了</a></li>
                        </ul>
                    </div>
                </div>

.newsflash {
    float: right;
    width: 250px;
    height: 455px;
}
.news {
    height: 165px;
   border: 1px solid #e4e4e4;
}
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.news-hd h5 {
    float: left;
    font-size: 14px;
}
.news-hd .more {
    float: right;
}
.news-hd .more::after {
    font-family: 'icomoon';
    content: '\e920';
}
.news-bd {
    padding: 5px 15px 0;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

所给思路：给12个li标签。然后每个li给一个右边框和下边框然后浮动即可

注意：此处整体的这个盒子只给一个左右边框和下边框，我们可以这样设置如下：

  border: 1px solid #e4e4e4;
  border-top: 0;

可以直接设置全部的边框然后不需要哪边取消哪边