制作网页过程中需要关注的一些点
【摘要】 前端搞得就是审美和细节
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还有链接
.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;可以直接设置全部的边框然后不需要哪边取消哪边
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）