外联css detail.css：
.ui.red.basic.segment.topmenu{
height: 100px;
padding-left:140px;
padding-right: 140px;
border-bottom: 1px solid rgb(189, 189, 189);
}
.ui.borderless.menu.container > .item > a{
color: black;
font-weight: bold;
}
.ui.basic.segment.title{
background: rgba(110, 110, 110,0.7);
position: absolute;
100%;
height: 70px;
left:0;
bottom: 0;
}
.ui.horizontal.basic.segments.bodycontent{
padding-top: 20px;
border-radius: 0;
border: none;
box-shadow: none;
}
.ui.segment.bodyleft{
700px;
}
.ui.basic.segment.articleimg{
700px;
height: 384px;
padding-top: 216px;
padding-right: 29px;
padding-left: 29px;
}
.ui.basic.segment.articleimg > hr{
border : 1px dashed white;
}
.image-text{
color: white;
font-size: 40px;
line-height: 1.3;
}
.ui.basic.segment.articleimg > span{
color: rgb(236, 236, 236);
font-size: 20px;
position: absolute;
bottom: 17px;
right: 29px;
}
.ui.center.aligned.basic.segment.abstract{
200px;
height:300px;
position: relative;
left: 40%;
top:150px;
transform:translate(-50%,-50%);
text-align: center;
color: #9b9b9b;
font-size: 16px;
font-weight: normal;
line-height: 3;
}
.column > .ui.basic.segment{
height: 200px;
}
.ui.basic.segment.comment{
margin-top: 50px;
border-top: 2px solid red;
}
.comment{
position: relative;
margin-top: 60px;
}
.time{
color: #9b9b9b;
position: relative;
top:-15px;;
}
.black-reply{
position: absolute;
bottom:0;
left: 52px;
}
.red-reply{
color: red;
position: absolute;
bottom: -35px;
left:62px;
}
.ui.segment.bodyright{
100px;
}
.ui.red.segment.best{
border-left:none;
border-right:none;
border-bottom:none;
box-shadow:none;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.ui.segment.top3{
height: 120px;
padding-top: 0;
position: relative;
border: none;
box-shadow: none;
}
.sidebutton > p{
position: absolute;
top:0;
left:20px;
color:white;
}
.ui.segment.bestlast{
border-radius: 0;
height: 60px;
padding-top: 0;
border: none;
box-shadow: none;
}
.ui.segment.bestlast > img{
position: absolute;
top:4px;
left:0;
}
.ui.segment.bestlast > p{
font-size: 12px;
}
.ui.segment.bestlast > span{
font-size: 12px;
color: rgb(206, 208, 204);
position: absolute;
bottom: 0;
}
.ui.basic.segment.bottomblack{
height: 400px;
background-color: rgb(50,50,50);
padding-left: 250px;
padding-top: 100px;
margin-top: 100px;
}
.ui.circular.red.button.backtotop{
height: 60px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
bottom:-15%;
}
.ui.basic.segment.wechat{
position: absolute;
top:80px;
right: 250px;
margin-top: 0;
}
.ui.basic.segment.bottomwhite{
padding-left: 250px;
border-bottom: 2px solid red;
}
.ui.basic.segment.bottomwhite > p{
font-size: 20px;
}
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>详情页</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/detail.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="ui red basic segment topmenu">
<div class="ui borderless menu container" style="border:0;box-shadow:none;">
<div class="header item" style="margin-right:10px;">
<div class="ui image">
<img src="images/index/zhiribao.png" alt="" />
</div>
</div>
<div class="item" style="margin-right:10px;">
<a href="#">首页</a>
</div>
<div class="item" style="margin-right:10px;">
<a href="#">大公司首页</a>
</div>
<div class="item" style="margin-right:10px;">
<a href="#">设计日报</a>
</div>
<div class="item" style="margin-right:10px;">
<a href="#">不许无聊</a>
</div>
<div class="right menu login">
<div class="item">
<a href="#"><div class="ui image">
<img src="images/index/login.png" alt="" />
</div>
<p style="margin-right:10px;margin-top:6px;color:black;">登录</p>
</a>
</div>
<div class="item">
<a href="#"> <div class="ui image">
<img src="images/index/register.png" alt="" />
</div>
<p style="color:black;">注册</p>
</a>
</div>
</div>
</div>
</div>
<div class="ui basic segment container">
<div class="ui horizontal basic segments bodycontent">
<div class="ui segment bodyleft" style="border:none;box-shadow:none;">
<div class="ui basic segment articleimg" style="background:url('images/detail/cover1.png');">
<hr>
<div class="image-text" >
小事，不如我们重新来过
</div>
<span>图片:Zoommy</span>
</div>
<div class="ui center aligned basic segment abstract">
*** <br>
但我拖着躯壳 <br>
发现沿途寻找的快乐 <br>
仍系于你肩膊 <br>
via 陈奕迅《一丝不挂》 <br>
***
</div>
<div class="ui basic segment articledetail">
<h1>你有吃东西吃哭了的经历吗？</h1>
<p>
<div class="ui mini image" style="position:relative;top:-2px;left:5px;">
<img src="images/detail/avatar2.png" alt="" />
</div>
<span style="font-size:16px;color: #000000;"> 核桃街，</span>
<span style="color:grey;font-size:16px;">真正的温柔是强大的人才给得起的。</span>
<p style="color:#000000;600px;font-size:16px;margin-top:20px;line-height:2;">
分手后，有一次去一家平时不常去的大型商场买东西，在冰柜里看到了他很喜欢的芝士（未经二次加工、加热后可拉丝那种，有比较多超市是买不到的）。
<br>
我并不喜欢这个。他却一直相当钟情，总夸赞口感如何有韧性、如何奶香浓厚。
<br>
我看到它后的第一反应就是，太好了，我可以直接在这儿买，不用网购了。
<br>
手还没伸出去，又马上想到，不在一起了，买来何用？我又不喜欢。
<br>
我于是推着车走了。后来，逛了一大圈，把所有需要的东西都拿了后，还是把它放进了购物车。
<br>
买回家后一直扔在冰箱里，甚至根本没有打开。
<br>
再后来生日，他来了信息，说祝我生日快乐。并无他话。
<br>
我迟疑很久，才回他道，你陪我过好吗？不然今年我只能自己一个人过生日了。
<br>
消息发出去的那一刻我就后悔了，觉得自己特别白痴。尴尬得恨不得把手机砸了才好。
<br>
然而他立刻就答应了。甚至都没给我一个机会让我掩饰说，我是开玩笑的，我有人陪。
<br>
那天晚餐没做什么吃的，因为提出这顿饭都只是一时兴起。我记得自己打些了猪肉丸子，下了紫菜，窝了鸡蛋，撒了绿油油的葱花儿，还加了些乱七八糟的东西。一人一碗面，他带了个蛋糕过来。面要端出去的时候我忽然想起了芝士的存在，就把冰箱里的芝士拿了出来，放在碗里隔水加热融成稠状，然后在我们俩的面上都淋了半碗。
<br>
面条端出来，我们沉默地吃着。
<br>
我一边吃一边胡思乱想。气氛有些尴尬和怪异。吃着吃着，忽然觉得芝士倒也不难接受，配合着汤面还挺好的。可我也还是不算喜欢，以后就不吃了吧。
<br>
芝士我放了很多，量非常足，但冰箱里还剩不少。
<br>
那一刻我突然想，以后他不在了，我也不吃了，那包芝士又已经开封，送给他也不好，是不是就要这样一直放在冰箱，直到某天我重新想起，拿出来一看，啊，过期了，然后就这样扔掉呢？
<br>
以后的日子，从天上偶然看到的好看的云，到质感舒适的风衣……无论多么好的东西，我都没有身份和立场给他了吧。
<br>
无论多么好的东西。
<br>
我想起我给他买过一条藏蓝色细条纹的领带，他很喜欢，执拗着让我替他打，我绑好领结的那一刻，抬头他安静地正望着我，凑过来吻了吻我的眼睛。
<br>
我想起夏天的时候，两人一人一听冰苏打水走在街上，满路蝉鸣日光，他忽然把自己手里冰冷的汽水罐贴在我的脖子上，我吓了一跳。
<br>
我想起很多年前我们一起去庙会，人群里他偷偷握住我的指尖。远处的钟声厚重又悠远。
<br>
那个瞬间，我眼泪忽然就下来了。
<br>
哭仿佛是身体本能的反应，我甚至对自己的眼泪感到了一瞬间的诧异。然而伤感是实在的，那种疼痛和你与朋友、家人发生矛盾时的疼痛不同，那是实实在在的、心口上的生理性的痛感。就像有人猛地对你胸口开了一枪。
<br>
我觉得太尴尬了。刚想用碗遮住脸，他就递过来了一张纸巾。我不想让他看到我的难堪和失态，也不想让他看到我的手在颤抖，并没有接。然后他便亲自替我擦眼泪。
<br>
那一刻，我压抑许久的，以至于我自己都没有意识到它存在的情感，一下决堤了。
<br>
我好不容易才重新镇定下来后，一抬头看见他也在看着我掉眼泪。
<br>
他勉强地笑了笑说，你说这是不是我们最后一餐了。可我不想这是我们最后一餐。有什么问题，我们一起走过去好吗？
<br>
他说，你不喜欢吃这个的。你连出去吃披萨都要把上面的芝士先挑掉。除了你可能也没有人记得我喜欢这个。我们别勉强了，我们回去吧。
<br>
那个瞬间我头脑混乱，我回忆起了很多过往。很多很多。
<br>
我莫名其妙地想起了高中校园里一整条小路上的紫荆花，想起了他开玩笑时从我身后拽我的领子，想起很久之前有一次和他坐在学校的小花园聊天，他一边说话一边漫不经心地摘着野草在手里盘弄，离开时突然递给我一个草编的戒指……我想起了很多毫无意义的年少时的细节。
<br>
很久以后我才懂，那个瞬间我大概是想明白了，再也不会有一个人，见过我曾经的脆弱和悲欢，见过我往昔的岁月和不易。我可能还会遇到很多很多的人，但这个人走了，就把曾经的我，也带走了一部分了。
<br>
今生今世已惘然，山河岁月空惆怅。这话我读过，却在那一刻才恍然大悟。
<br>
大抵说的就是那时的我吧。
<br>
那餐饭自然是吃不下去了。
<br>
但除了剩下了那天碗里的芝士，我的冰箱里再没有浪费过多余的芝士了。
</p>
<span style="border-bottom:1px solid red;font-size:16px;margin-top:50px;margin-left:520px;">查看知乎原文</span>
</div>
<div class="ui three column grid">
<div class="column" >
<div class="ui basic segment" style="background:url('images/index/img1.png');background-size: cover;
background-repeat: no-repeat;">
<div class="ui basic segment title">
<p style="color:#fff;font-size:18px;margin-left:0px;">要接多少案子，才能成为一名专项律师</p>
</div>
</div>
</div>
<div class="column">
<div class="ui basic segment" style="background:url('images/index/img2.png');background-size: cover;
background-repeat: no-repeat;">
<div class="ui basic segment title">
<p style="color:#fff;font-size:18px;margin-left:0px;">面试官问你的缺点是什么，应该如何回答？</p>
</div>
</div>
</div>
<div class="column">
<div class="ui basic segment" style="background:url('images/index/img3.png');background-size: cover;
background-repeat: no-repeat;">
<div class="ui basic segment title">
<p style="color:#fff;font-size:18px;margin-left:0px;">小事，必须结婚，不结不行</p>
</div>
</div>
</div>
</div>
<div class="ui basic segment comment">
<p ><b>评论</b></p>
<div class="comment" style="margin-top:22px;;">
<div class="ui image">
<img src="images/detail/avatar_matt.png" alt="" />
</div>
<span class="time"> <b style="color:black;">Matt</b> 10-25 08:43</span>
<span class="black-reply"> 很棒的文章！</span>
<span class="red-reply">回复</span>
</div>
<div class="comment">
<div class="ui image">
<img src="images/detail/avatar_jack.png" alt="" />
</div>
<span class="time"> <b style="color:black;">Jack</b> 10-25 08:56</span>
<span class="black-reply"> 为毛要用红笔画，看着别扭！</span>
<span class="red-reply">回复</span>
</div>
<div class="comment" style="margin-left:30px;">
<div class="ui image">
<img src="images/detail/avatar_yangjing.png" alt="" />
</div>
<span class="time"> <b style="color:black;">杨静</b> 10-25 11:56</span>
<span class="black-reply"> 这找茬的点还真是清新脱俗。</span>
<span class="red-reply">回复</span>
</div>
<div class="comment" >
<div class="ui image">
<img src="images/detail/avatar_jack2.png" alt="" />
</div>
<span class="time"> <b style="color:black;">Jack</b> 10-25 08:43</span>
<span class="black-reply"> 先帮我把千万年薪结一下谢谢。</span>
<span class="red-reply">回复</span>
</div>
<div class="ui segment input-reply" style="601px;height:194px;border-radius: 5px;border: solid 1px #eaebeb;margin-top:75px;margin-bottom:40px;">
</div>
<div class="ui red button" style="144px;height:49px;position:relative;top:60px;">
<span style="color: #ffffff;font-size: 20px;font-weight: bold;">写评论</span>
</div>
</div>
</div>
<div class="ui segment bodyright" style="border:none;box-shadow:none;">
<div class="ui red segment best">
<h4 class="ui center aligned header"><b>编辑推荐</b></h4>
<div class="ui segment top3" style="background:url('images/index/sideimg1.png');
background-size:cover;background-repeat:no-repeat;border-radius:0;">
<div class="sidebutton">
<img src="images/index/redtag.png" alt="" />
<p>Top1</p>
</div>
<div class="ui basic segment title" style="height:40px;padding-top:2px;">
<p style="color:#fff;font-size:14px;margin-left:0px;">卖公司这事还是有很多学问的，Twitter怎么就尴尬了？</p>
</div>
</div>
<div class="ui segment top3" style="background:url('images/index/sideimg2.png');
background-size:cover;background-repeat:no-repeat;border-radius:0;">
<div class="sidebutton">
<img src="images/index/yellowtag.png" alt="" />
<p>Top1</p>
</div>
<div class="ui basic segment title" style="height:40px;padding-top:2px;">
<p style="color:#fff;font-size:14px;margin-left:0px;">硅谷收益最高的风投说，钱太多是这个市场最大的问题</p>
</div>
</div>
<div class="ui segment top3" style="background:url('images/index/sideimg3.png');
background-size:cover;background-repeat:no-repeat;border-radius:0;">
<div class="sidebutton">
<img src="images/index/bluetag.png" alt="" />
<p>Top1</p>
</div>
<div class="ui basic segment title" style="height:40px;padding-top:2px;">
<p style="color:#fff;font-size:14px;margin-left:0px;">看起来不起眼的日常设备，可能是未来网络攻击的对象</p>
</div>
</div>
<div class="ui segment bestlast">
<img src="images/index/Triangle.png" alt="" />
<p>
这部别出心裁的漫画，讲的是阿富汗战争时期不为人知的历史
</p>
<span>3分钟前</span>
</div>
<div class="ui segment bestlast">
<img src="images/index/Triangle.png" alt="" />
<p>
华纳兄弟将拍摄的新片，讲述的是亚洲富豪的故事
</p>
<span>3分钟前</span>
</div>
<div class="ui segment bestlast">
<img src="images/index/Triangle.png" alt="" />
<p>
美国各大银行纷纷关闭分行，说要向数字化转型
</p>
<span>3分钟前</span>
</div>
<div class="ui segment bestlast">
<img src="images/index/Triangle.png" alt="" />
<p>
在医院看病也用微信支付，腾讯这回可能想多了
</p>
<span>3分钟前</span>
</div>
<div class="ui segment bestlast">
<img src="images/index/Triangle.png" alt="" />
<p>
马化腾说，微信最早就是个邮箱
</p>
<span>3分钟前</span>
</div>
<div class="ui segment bestlast">
<img src="images/index/Triangle.png" alt="" />
<p>
拿了这笔钱后，全球最红新媒体之一BuzzFeed值17亿美元了
</p>
<span>3分钟前</span>
</div>
<div class="ui segment bestlast">
<img src="images/index/Triangle.png" alt="" />
<p>
意想不到的童年回忆杀，《蜡笔小新》最新剧场版来了内地
</p>
<span>3分钟前</span>
</div>
<div class="ui image">
<img src="images/index/ad.png" alt="" style="300px;"/>
</div>
</div>
</div>
</div>
</div>
<div class="ui basic segment bottomblack">
<div class="ui image">
<img src="images/index/white_zhiribao.png" alt="" />
</div>
<p style="color:red;margin-top:50px;font-size:20px;">
关于我们<span style="color:rgb(143, 143, 143)">｜</span>加入我们<span style="color:rgb(143, 143, 143)">｜</span>联系我们｜寻求报道
</p>
<p style="color:white;font-size:20px;">
反馈建议:<span style="color:red;">124608760@qq.com</span>
</p>
<div class="ui basic segment wechat">
<img src="images/index/qrcode.png" style="margin-left:38px;"/>
<h2 class="ui header" style="color:rgb(255, 255, 255);margin-left:20px;">扫码关注微信号</h2>
</div>
<button type="button" name="button" class="ui circular red button backtotop">
<img src="images/index/upicon.png" style="position:absolute;left:18%;top:10%;">
<img src="images/index/TOP.png" style="position:absolute;left:18%;bottom:28%;">
</button>
</div>
<div class="ui basic segment bottomwhite">
<p>
Designed by Mugglecoding
</p>
<p>
Developed by XYX
</p>
<p style="position:absolute;right:250px;top:40px;">
京ICP备123878345号
</p>
</div>
</body>
</html>
