首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

如何不用一行 JS 代码做一个现代化可交互网站

之前做了一个纯 HTML+CSS 网站,完全没有 JS 代码,大家可以点击这个链接体验一下 https://woopen.github.io/ssp/ 。...在网站源码中完全搜索不到 script 标签。 你还可以在 Github 上面找到相关源码 https://github.com/woopen/ssp 。...这篇文章就来非常详细的分析这个网站是如何制作的,它是如何实现交互、验证和模态框的,相信看完这篇文章可以学到很多不为人知的 CSS 小技巧。 导航栏 首先从网站最前面的导航栏开始,如下图所示。...要知道这整个导航栏效果是完全没有一行 JS 代码的,完全只使用 HTML+CSS 来实现。接下来让我们看一看它是如何被实现的。 首先来看一下整个导航栏的 HTML 代码,如下所示。...总结 这篇文章介绍了如何不使用 JS 的情况下来实现一些交互效果,这里主要是使用的 checkbox 的 :checked 伪类来实现,除此之外还介绍了各种炫酷的 UI 效果的实现思路。

1.6K10

做一个网站真的有那么难吗?

,好吧,水果妹一拍脑袋,然后跟水果哥说:水果哥,不如我们搞一个基于互联网的水果店吧,我们做一个网站来展示我们的水果。...网站搭建起来了,并且由于新鲜事物而广受追捧。 水果店网站V1版 然而网站运行不久之后,水果妹发现纯html写的网站实在是不忍直视(好难看的网站)。...水果妹:大哥,网站能不能帅气点水果哥:包在我身上 哗哗哗又写了一个晚上,这次水果哥用上css和js美化网站(css是控制页面布局的,js是增加用户的交互功能)。...水果妹:哥,能不能做一个在线支付呀,要支持微信支付和支付宝支付喔 水果哥(心好累,怎么还要加功能):好的,没问题(强忍着泪水) 哗哗哗,水果哥又是申请接口,又是查API文档,又是建立用户体系,又是建立支付系统...未来的日子里 水果店网站也基本定型了,水果哥只是根据水果妹的需求,不断增加一些小功能而已,日子也算是悠闲自得。然而突然有一天,水果妹说:哥,不如我们做一个校园类应用吧,我们开始二次创业。

2.5K30

动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)

大家好,在《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(上)》一篇文章里,我们一起了解了什么是 Next.js,并手工创建了一个简单的 Next.js 项目,学会了如何基于模板创建简单的页面...为了让用户更方便浏览我们的博客网站,我们需要新建 components/navmenu.js 导航组件,用来实现网站导航的功能,由于功能简单,这里就不再解释,示例代码如下: import Link from...完成后,博客导航的效果如下图所示: menu.jpeg 四、使用Sass为博客添加全局样式 到这里,一个基于 MD 文档的简单博客网站到这里就完成了,最后我们要为网站添加样式,要不网站丑的实在看不下去...MD文档生成动态路由,完成了文章内容页、列表页、导航功能,并为网站添加了漂亮的样式。...在下篇文章里,我们为博客网站添加暗黑模式,基于接口数据渲染内容(服务端渲染),及如何编译项目将博客网站部署到 Node.js 服务器上或纯静态化部署,最后会提供完整的项目源码,敬请期待...

1.6K11

动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)

) 阅读: 10 分钟 大家好,在《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(上)》一篇文章里,我们一起了解了什么是 Next.js,并手工创建了一个简单的...为了让用户更方便浏览我们的博客网站,我们需要新建 components/navmenu.js 导航组件,用来实现网站导航的功能,由于功能简单,这里就不再解释,示例代码如下: import Link from...四、使用Sass为博客添加全局样式 到这里,一个基于 MD 文档的简单博客网站到这里就完成了,最后我们要为网站添加样式,要不网站丑的实在看不下去。...未完待续 由于篇幅原因,今天的文章就到这里,一个基于 MD 文档的简单博客网站就完成了,通过本篇文章我们学习了如何基于MD文档生成动态路由,完成了文章内容页、列表页、导航功能,并为网站添加了漂亮的样式。...在下篇文章里,我们为博客网站添加暗黑模式,基于接口数据渲染内容(服务端渲染),及如何编译项目将博客网站部署到 Node.js 服务器上或纯静态化部署,最后会提供完整的项目源码,敬请期待...

88430

动手练一练,使用 React 和 Next.js 做一个简单的博客网站(上)

开篇语 大家好,如果要做一个博客网站,你会选择什么前端技术呢?...本篇文章,我将和大家一起使用 React 和 Next.js 技术从0到1创建一个博客网站,通过本案例,你将会学习到 Next.js 的以下内容: 如何创建一个基本的页面 如何通过已有的 Markdown...) 编译、构建博客网站 一、什么是Next.js?...三、初始项目,安装 Next.js 和 React 虽然 Next.js 提供 create-next-app 工具来快速创建 Next.js 项目,但是对于一个简单的博客网站,我觉得没有必要,因为我们手工移除项目中不必要的依赖就要花不少时间...八、创建页面模板 一个网站,比如页面的头部、底部大部分都是一样的,因此我们需要把这些公共部分抽离出来,Next.js 可以使用React的方式进行创建。

3.7K51

动手练一练,使用 React 和 Next.js 做一个简单的博客网站(下)

,使用 React 和 Next.js 做一个简单的博客网站(上)》和 《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)》这两篇文章里,我们一起完成了一个基于 MakeDown...在《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)》这篇文章里,我们使用了getStaticProps() 这个方法在项目编译时(build)处理生成 MD 动态路由相关的逻辑...尝试从其他内容源获取博客文章内容(服务端API数据接口、wordpress等) 六、相关阅读 《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(上)》 《动手练一练,使用 React...和 Next.js 做一个简单的博客网站(中)》 结束语 到这里,本案例就介绍完了,本案例的完整源码,你可以点击阅读原文下载本案例的完整源码。...Next.js 是一个灵活的应用程序框架,可以帮助你构建任何类型的 web 项目,对于博客网站这类需求,很容易满足实现。

1.5K31

公司网站做一个多少钱?先要了解企业自身的网站需求

原因在于,我们还不清楚客户企业方面希望做到什么样程度的网站。定制化网站网站定制程度、设计水平都决定了不同的网站设计制作价格。...所以,要问一个定制化网站设计制作公司的价格,要先把公司自身的网站需求说明一下。 那么现在公司做个网站通常的价格是怎样的? 做个网站几百块?...现在网站设计制作行业公司太多了,所以价格方面来说几百块的一个网站模板的都有,就像在线购物一样,买了模板自己后台处理网站,这样的网站质量如何,在此就不予多做评价了,所谓适合的即是好的,如果企业想要这样的网站购买即可...企业网站做个上万块的可能是企业本身对网站有一定的重视,否则可能不愿意花几万块做个网站,这类的网站通常定制设计程度较高,独特性较强,细节处理还不错。...当然也得找对网站设计制作公司,否则多花钱做出的网站也非常普通,甚至有的后期故障频繁,导致网站运营非常难做。 做个网站十几万?

2K10

爬虫解决网站混淆JS跳转

有些网站,防止被爬虫采集,就会做一层js跳转,普通请求只会拿到js部分,而且很难看懂,然后我试了几种思路,最后留下解决方式: 示例网站:http://huakai.waa.cn/    这是一个发卡平台...仔细看下js,会发现,他是进行了一个延时后调用bx(105)函数,完成后刷新页面,换句话说,得进行这个js的计算即可。...可以参考用 pip3 install js2py js2py.eval_js(a) 硬解开这个js,但是我就用了个小技巧。因为cookie可用1天。...使用的phantomjs 代码为下,将其保存为res.js ,执行如下命令即可获取源码 phantomjs res.js http://huakai.waa.cn/ res.js :改编自:https:...invite_code=u3xrcath7lgz 原创文章,转载请注明: 转载自URl-team 本文链接地址: 爬虫解决网站混淆JS跳转 Related posts: selenium自动登录挂stackoverflow

2.6K50

使用原生js做一个简单的定时访问页面

2020年3月的某一个周末,我在无聊之下想通过js实现刷浏览量的功能,它的优点是不需要引入任何东西,只需要建一个html页面,将我们的js代码加进去就可以执行。...(记得允许你的浏览器打开其他页面) 开始思路,通过js的for循环一直访问文章地址,链接方式使用window.open("地址")的方式 $(function (){ for (var...location.close(); 这个是关闭标签页的功能,但是测试后我们是关闭了我们js的页面,我们实际要关闭的是open的页面,再修改一下,在我们使用open的时候用var定义接受一下对象以便于关闭打开的标签页...null){ window.open(ad[i]); } } } 但是如果要每次要打开100个地址还是对浏览器有影响,所以我们多定义几个定时js

1.1K80
领券