仿照Div.IO做的一个网页

  1. 总结

  Div.IO是一个响应式的网页,对布局要求特别高,其中用到的是(1、左边固定右边自动随浏览器大小缩放,2、中间固定两边缩放,3、所有块随浏览器自动缩放),有些布局我平时很少用上,在这次做的过程中,布局是非常重要的,我总结了一下,一般常用的有一下布局

  • 左自动+右固定
  • 右自动+左固定
  • 中自动+两边固定

这三种,关键词:{自动:block+margin,固定:float},这是我的方案。大家也可以写出自己的方案。

  • 两边自动+中固定

关键词:block+margin

  • 所有都自动

关键词:float+width+%

  • 包围固定高宽

关键词:float:(固定高宽)+block

通过这种做的过程,我用上了这几种布局,大家也可以写写。

响应式分布,@media screen 这个东西少不了,使用起来挺简单的。

最后附加这几天的成果的图

这是最大宽度的图

这是浏览器缩放到800的图

这是浏览器缩到最小的图

这几天我做了三个页面,不一一截图了,需要源代码,可以私聊我。

这里纯属个人观点,如有出错,望大家见解。

时间: 2024-12-28 22:08:40

仿照Div.IO做的一个网页的相关文章

实例应用,做了一个网页

先放完成后的样子图 在就是代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/nb_1.css" rel="stylesheet" /> </head> <body> <

黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型

今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打奉献给各位吧! 同时也希望喜欢的朋友能够多多关注我的这个小博客,要是有什么问题的话也可以在下方的评论区留言哦! OK,接下来我就给大家直接步入正题:详解,设计师用div+css 必须知道的网页布局类型 网页布局大致可分为"国"字型.拐角型.标题正文型.左右框架型.上下框架型.综合框架型.封

近期做了一个自己主动纠错演示网页

近期做了一个自己主动纠错演示网页:nfabo.cn 当 Query 中有一些错别字时,搜索引擎会尝试纠错 通过相似拼音纠错 搜索引擎把这些字还原成拼音,用一个拼音同样的已知 Query 取代. 可是,当输错的汉字是多音字.特别是有多个这种错误输入时,全部的搜索引擎基本上都无论. 或者仅使用一个最经常使用的音去纠错. 由于要考虑全部可能的拼音组合,在极端情况下会导致指数爆炸! 我的算法攻克了这个指数爆炸问题 这个演示页面眼下仅仅收录了 800万 条 短语+词频.数据也不太干净 该算法所有在内存中执

最近做了一个自动纠错演示网页

最近做了一个自动纠错演示网页:nfabo.cn 当 Query 中有一些错别字时,搜索引擎会尝试纠错 通过相似拼音纠错 搜索引擎把这些字还原成拼音,用一个拼音相同的已知 Query 代替. 但是,当输错的汉字是多音字,特别是有多个这样的错误输入时,所有的搜索引擎基本上都不管, 或者仅使用一个最常用的音去纠错.因为要考虑所有可能的拼音组合,在极端情况下会导致指数爆炸! 我的算法解决了这个指数爆炸问题 这个演示页面目前只收录了 800万 条 短语+词频,数据也不太干净 该算法全部在内存中运行,使用了

如何在一个div标签里显示出另一个网页? &lt;iframe src=&quot; http://www.baidu.com &quot; width=&quot;800px&quot; height=&quot;200px&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot;&gt; &lt;/iframe&gt;

如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>

运用基础班知识做一个网页

一个网页,首先得有框架,然后各种样式各种动态.就好像老师说的一间房子,要刷漆(css),还要买电器(javascript).现在开始装修我们的房子吧! html超文本标记语言(给网页写内容,超文本指的就是网页上不光有文本,还有图片,音乐,视频等), css层叠样式表(添加各种样式效果,其中最主要的是浮动,因为div是块元素,独占一行,而浮动能把div排成一行.) javascript(直译式脚本语言,给网页增加动态效果,实例:表单验证,网页特效,小游戏等,) jquery(快速简洁的javasc

淘宝、京东等商城,集合到一个网页里

我见过一个页面里,同时放置多家搜索网站,这样可以方便比较不同的搜索结果.根据这个Idear,我做了一个可以放置多家知名商城的网页,一个纯静态的网页,手机版,包含9家网站,只有一个页面,为双十一剁手必备网页.添加链接在数组里加一行即可. PC版的就不放上来了. <!DOCTYPE html>     <html>         <head>             <meta charset="utf-8">             &l

如何写好一个网页---传智首页

---恢复内容开始--- 学习前端知识也有一个月了吧,十月十四号来到这里学习的,一直到11月7号,差不多也有一个月的时间了,所以今天想谢谢这个时间段学到的一些知识,也留着以后能够回头看看这段时间的付出. 今天写的主题内容是一个简单的网页制作,用的模板的话就是传智的首页,因为自己素材只有传智首页的素材罢了... 对我而言,想要去设计一个网站,我先会做大量的分析,第一步做的就是对整个网站的整体框架的和模块的划分.就例如传智首页来说,我选择将这个首页看成是一个最大的整体模块,然后在这个模块里面去再划分

用程序来控制一个网页,实现自动输入等操作

首先今天要说的东西跟游戏无关,你是不是有时候会遇到,在某个网页上重复着几十次的简单而又无聊的录入或点击等工作?比如你的程序需要测试,需要注册大量的测试邮箱.比如你的老板是个变态,让你去各个论坛发大量的垃圾贴子(最无耻行为,纯属举例).或者,你需要定时的到某一个网页上执行某一些行为,比如上班下班的出勤打卡系统,等等吧,如果有,那么我今天所介绍的或许会对你有帮助.当然,如果你要操作的这些网页都是自己开发的,那么无所谓了,你在多开发个工具就行了,但是我说的上面这些都是第三方的网页,你控制不了它们,如果