仿站–模仿少数派网站及源码

由来

应信息工程学院的高中同学要求,帮他们写了一份期末作业应付一下,

他们老师要求模拟智联招聘优先,但是看着太丑了,就选择模仿少数派网站,

大部分css还是从少数派源站来的,做分享,也做备份

 

图片实例,模仿效果如图

1

2

其中首页的卡片文章的代码实现,单独提出来:

如果你想做成第二张图片的样子,只需修改imagcard中的width即可

css部分:

div.imgcard{
              width: 800px;
               box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
                text-align: center;
				position:relative;
                               top:20px;
                               left:550px;
            }
			
            
            div.textcard{
                padding: 20px;
           }

html部分:

<div class="imgcard">
<p align="center"><a href="other/text1.html"><img src="image/text1.jpg" style="width:100%" /></a></p>
<h1 align="center">iOS 12 不仅提升了流畅度,还有这 9 个你应该了解的新变化</h1>
<div class="textcard">
<p align="center"><a href="other/text1.html">今天凌晨,苹果召开了 WWDC(全球开发者大会)。在发布会上,
 iOS 12 作为第一项介绍内容,时长长达 1 小时左右,其中 AR、照片应用、Siri、勿扰模式、通知系统、Animoji 等功能都得到了升级。
下面就由少数派带你了解 iOS 12 中具体都有哪些新功能和亮点。
你也可以持续关注「少数派带你看 WWDC 2018」特别专题,我们将陆续为你带来更多关于新系统的详细介绍文章
</a></p>
</div>
</div> 
<br />dia

源码下载

sspai.zip

 

— 于 共码了797个字
— 文内使用到的标签:
Emin.ink Emin.ink Emin.ink

发表评论

电子邮件地址不会被公开。 必填项已用*标注