老师为什么我的样式没有生效呀
来源：4-3 sass案例（3）
hyperse
2020-10-18 05:29:06
# 具体遇到的问题
标题没有换行。然后代码的注释中有两个问题，谢谢老师
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用sass仿今日头条</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="header">
<div class="title_logo"></div>
</div>
<!-- 导航栏 -->
<div class="top_bar">
<div class="top_menu_list">
<a class="btn cur">推荐</a>
<a class="btn">视频</a>
<a class="btn">热点</a>
<a class="btn">社会</a>
<a class="btn">娱乐</a>
<a class="btn">军事</a>
<a class="btn">科技</a>
<a class="btn">汽车</a>
<a class="btn">体育</a>
<a class="btn">财经</a>
<a class="btn">国际</a>
<a class="btn">时尚</a>
</div>
</div>
<!-- content_list内容列表 -->
<div class="content_list">
<section class="section_item">
<div class="item_detail">
<h3 class="title">一图读懂 | 政治局会议释放哪些重大信号？</h3>
<div class="item_info">
<span class="stick_label">置顶</span>
<span class="src">新华社</span>
<span class="cmt">评论 2473</span>
<span class="time">2分钟前</span>
</div>
</div>
</section>
<!-- 有图片的section -->
<section class="images-item">
<div class="item_detail">
<h3 class="title">85小时！重庆万州坠江公交车被打捞出水 车身变形 现场鸣笛致哀现场 鸣笛致哀现场 鸣笛致哀</h3>
<div class="list_image">
<ul>
<li class="list_img_holder"><img src="./assets/1540880316090fcf65c4ee6"></li>
<li class="list_img_holder"><img src="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30"></li>
<li class="list_img_holder"><img src="./assets/1540880316067f69d843289"></li>
</ul>
</div>
<div class="item_info">
<span class="hot_label">热</span>
<span class="src">青蜂侠</span>
<span class="cmt">评论 7028</span>
<span class="time">1分钟前</span>
</div>
</div>
</section>
</div>
</body>
</html>
index.scss
@import './reset.scss';
$baseFontSize:17px;
$redColor:#d43d3d;
$assetsDir:'assets';
@mixin sectionStyle{
margin-left: 15px;
margin-right: 15px;
border-bottom: 1px solid rgba(211,211,211,0.6);
padding-top: 10px;
padding-bottom: 10px;
}
@mixin hotLabel($color){
font-size: 14px;
color: $color;
border: 1px solid $color;
}
@mixin line2{
overflow: hidden;
// 当文字超出一行的时候就以省略号的形式展现后面的文字
text-overflow: ellipsis;
//这三个有webkit的样式不明白
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.header{
height: 45px;
background-color: $redColor;
.title_logo{
width: 100px;
height: 100%;
margin: 0 auto;
background:{
position: center;
size: contain;
repeat:no-repeat;
image:url($assetsDir+'/wap_logo@3x_581de69e.png');
}
}
}
// top_bar样式
.top_bar{
background-color: #f4f5f6;
height: 34px;
overflow-x:auto ;
overflow-y: hidden;
.top_menu_list{
//子类不换行
white-space: nowrap;
overflow: hidden;
height: 100%;
//子元素撑开父元素宽度
display: inline-block;
}
.btn{
padding: 8px;
display: inline-block;
font-size: $baseFontSize;
&.cur {
color: $redColor;
}
}
}
// 内容列表样式
.content_list{
.section_item{
@include sectionStyle;
.title{
font-size: 20px;
}
.item_info_base{
color: #999;
font-size: 14px;
}
.item_info{
margin-top: 11px;
@extend .item_info_base;
}
.stick_label{
@include hotLabel($redColor)
}
.src{
@extend .item_info_base;
}
}
// 有图片的内容列表
.images_item{
//section_item跟images_item是同级的也可以“继承”吗
@extend .section_item;
.title{
@include line2;
}
}
}
1回答
-
同学你好，问题解答如下：
1.老师这边测试，标题是换行显示的，如下图所示：
同学是不是问错了？可以详细描述一下，以便老师为你准确的解答。
2.-webkit是谷歌浏览器的前缀，如果某一个样式在谷歌浏览器上不兼容，就可以加一个-webkit让谷歌浏览器识别。三个带-webkit前缀的样式具体参考如下：
（1）display: -webkit-box就是display: box的兼容性写法。display: box类似于dispaly:flex，让元素作为弹性伸缩盒子模型显示。
（2）-webkit-box-orient: vertical意思是从上到下垂直排列子元素。
（3）-webkit-line-clamp: 2 ，表示显示的行数为2行（ 这个属性不是css的规范属性，需要组合上面两个属性）
3.可以继承的，这里的继承与css样式继承不一样。css样式，是父元素设置了某一个样式，子元素才能继承父元素的样式，这种继承是自动的，例如父元素设置了一个字体颜色，子元素会默认继承。就像基因一样，父母生了孩子，孩子默认会继承父母的某一些基因。而@extend实现的继承，是把某一个元素的css样式，应用到另一个元素上。可以理解为财产（虽然有点不恰当，但是可以帮助你去理解），默认情况下，会继承给孩子。如果其他人需要，父母也可以给兄弟姐妹哦~
祝学习愉快~
0
相似问题
回答 1
回答 5