新闻网站项目静态页面--详情页

外联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;width: 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{width: 700px;}
.ui.basic.segment.articleimg{width: 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{width: 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{width: 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="data: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="data: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="data: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="data: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;width: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="data: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="data: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="data: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="data: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="width:601px;height:194px;border-radius: 5px;border: solid 1px #eaebeb;margin-top:75px;margin-bottom:40px;"></div><div class="ui red button" style="width: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="data: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="data: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="data: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="data:images/index/Triangle.png" alt="" /><p>这部别出心裁的漫画，讲的是阿富汗战争时期不为人知的历史</p><span>3分钟前</span></div><div class="ui segment bestlast"><img src="data:images/index/Triangle.png" alt="" /><p>华纳兄弟将拍摄的新片，讲述的是亚洲富豪的故事</p><span>3分钟前</span></div><div class="ui segment bestlast"><img src="data:images/index/Triangle.png" alt="" /><p>美国各大银行纷纷关闭分行，说要向数字化转型</p><span>3分钟前</span></div><div class="ui segment bestlast"><img src="data:images/index/Triangle.png" alt="" /><p>在医院看病也用微信支付，腾讯这回可能想多了</p><span>3分钟前</span></div><div class="ui segment bestlast"><img src="data:images/index/Triangle.png" alt="" /><p>马化腾说，微信最早就是个邮箱</p><span>3分钟前</span></div><div class="ui segment bestlast"><img src="data:images/index/Triangle.png" alt="" /><p>拿了这笔钱后，全球最红新媒体之一BuzzFeed值17亿美元了</p><span>3分钟前</span></div><div class="ui segment bestlast"><img src="data:images/index/Triangle.png" alt="" /><p>意想不到的童年回忆杀，《蜡笔小新》最新剧场版来了内地</p><span>3分钟前</span></div><div class="ui image"><img src="data:images/index/ad.png" alt="" style="width:300px;"/></div></div></div></div></div><div class="ui basic segment bottomblack"><div class="ui image"><img src="data: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="data: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="data:images/index/upicon.png" style="position:absolute;left:18%;top:10%;"><img src="data: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>

转载于:https://www.cnblogs.com/xyxpython/p/6592541.html

新闻网站项目静态页面--详情页相关推荐

Flutter项目——静态页面布局4详情页
详情页 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // widget代表了我们的 ...
luffcc项目-08-课程详情页、CKEditor富文本编辑器、课程详情页面、后台接口
课程详情页一.CKEditor富文本编辑器富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带h ...
java电商项目搭建-------商品详情页模块
努力好了,时间会给你答案.--------magic_guo 在一个电商项目中,访问频率最高的是商品详情页页面,而且商品详情页的变化评率不会太高(除非是搞活动的时候):那么访问频率高,然后再使用数据库 ...
(最详细)VueApp项目实战4 - -详情页
一.路由配置 1.路由配置 a.编辑'Recommend.styl'文件 (路径: src/pages/home/Recommend.vue) <template><div>& ...
vue页面详情页返回列表页_vue列表页进入详情页，返回列表项不刷新
功能像搜索功能,在点击某项进入详情页,再回到搜索界面,如果不做特殊处理,初始化到原来的状态,在vue中可以使用keep-alive缓存搜索界面,达到数据不刷新的结果. 思路在搜索路由对象的meta ...
vue页面详情页返回列表页_vue 详情页返回列表页，保留列表页之前的筛选条件...
需求背景再列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件. 之前的实现方法路由跳转的时候,把筛选条件json对象放到query中去,传到详 ...
React项目，从详情页返回列表页时，保存数据并返回到原来的位置
移动端开发时会遇到在列表页点击进入详情,返回后列表页刷新的情况,对用户体验很不友好. 解决方案:使用 react-keeper 完成路由的分配,以及页面组件的缓存 react-keeper 详情参考: ...
商城项目 pc----商品详情页
目录 vue路由滚动行为排他思想放大镜加入购物车操作项目实战 Promise 特点用法 then 执行顺序拓展 async/await Promise优缺点 Promise方法: 浏览器缓 ...
人资项目-员工信息详情页
页面传值的方式: 1.url传值,(动态路由,查询参数) 2.本地存储 3.vuex -------------------------------------- // ResetFul 接口规范 ...
03----3小时用 websocket 实现聊天室之项目静态页面搭建
创建一个public文件夹,把所有静态资源都放进public文件夹中,如图所示由于要使用public的静态资源,必须使用express 中的语句 // express使用静态资源 app.use(r ...

新闻网站项目静态页面--详情页

新闻网站项目静态页面--详情页相关推荐

最新文章

热门文章