Html5开发——html+css基础二(个人博客一)

今天没有写完,而且写的还有点问题,所以今天就先不上传代码了(ps:快写完了才发现布局有问题,导致代码太多,感觉写的不是很好,所以今天先分析一下布局)

第一步先写一个大的div用来放ABC三个部分,这个大的div居中!

第二步分别写ABC三个部分,ABC三个部分分别使用浮动(float)来定位。A和B都各使用了一张非常小的图片,通过重复(repeat)属性生成A和B

第三步C部分分别写好3~16这几个模块,在通过组合利用浮动定位。分组如下:

  E:3

  F:4、7、10、13

  G:5、8、11、14

  H:5、9、12、15

  J:16

然后利用E、F、G、H、J通过浮动定位。

这期间有许多问题,比如ABC的居中,浮动之间的相互影响。这些问题,我会在明天结合相关的代码进行详细的解释。PS:由于代码不是很合理所以今天就不上传代码和素材了。

Html5开发——html+css基础二(个人博客一),布布扣,bubuko.com

时间: 2024-10-05 07:10:18

Html5开发——html+css基础二(个人博客一)的相关文章

Html5开发——html+css基础一(百度首页)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{text-align: center;} .header{text-align: right;f

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

安卓开发笔记——打造属于自己的博客园APP(二)

在上一篇文章<安卓开发笔记——打造属于自己的博客园APP(一)>中,我们基本上实现了博客园的主体UI框架(后面可能会有些小变化,等遇到了再说).今天来讲讲博客园首页模块的大体实现,国际惯例,先来看下效果图: 整体UI效果: 下拉刷新和上拉加载的动画效果: 在上篇文章中,我们定义的Tabs主题文字分别是(首页,精华,候选,推荐),这边的命名我是根据博客园网站首页的栏目来命名的,那时候我还没仔细看过博客园的开放接口,后来才发现原来博客园没有对应开放这些栏目的接口,博客园只开放了(文章列表,48小时

使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理

原文:使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理 摘要 通过对博客文章的管理,实现外键操作. 目录[-] 八.博客文章管理 1.查看文章 2.添加博客? ? ? ? 3.查看博文详情 4.修改博客内容 5.删除博客文章 九.尾声? ? ? ?? 1.如何部署 2.进一步的学习 3.ENDING 转载请注明出处:Gaussic(一个致力于AI研究却不得不兼顾项目的研究生) . 注:在阅读本文前,请先阅读: 使用IntelliJ IDEA开发SpringMVC网站(一

安卓开发笔记——打造属于自己的博客园APP(四)

在上篇文章<安卓开发笔记——打造属于自己的博客园APP(三)>中,我们对博客文章的详情页和评论页进行了实现,慢慢的一个APP已经出现雏形了,当然这只是完成了"表面效果",要真正做好一个APP并不是一件很轻松的事情,有很多细节需要我们一点一滴的去完善. 好了,来讲下今天要完成的效果,在优化了之前部分代码的前提下,今天来说下关于博客搜索和博客详情页的实现,依旧国际惯例,来看下效果图:(动态图片比较大,加载需要点时间) 效果比较简单,很多东西我们还是可以复用之前的代码,毕竟这种列

玩转HTML5+跨平台开发[8] CSS基础-体验CSS

CSS起源 web的衰落: 在web早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对html的要求越来越大,人们迫切需要html增加新的元素,去完成一个特定的功能 迫于压力,html开始出现<font>,<i> , <s>等标签.但是html是一种描述结构的语言,也开始描述外在表现了.几年之后这种随便的做法暴露出严重的问题:1:由于html既写结构又写样式,导致

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

使用CSS/JS代码修改博客模板plus

之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和.对应的东西控制的都是啥子,这回不在看那个CSS了,直接用浏览器的开发者模式打开博客,一级一级找下去,看控制要改的内容的都是哪个DIV,把那些呆滞傻二的字体一一改掉: .cnblogs_code pre { font-family: Courier New!important; font-size:

css回归之国外博客

发觉学了好久的布局基础,经常是看了然后一段时间没用就忘了,当然对知识点理解不到位不彻底所以导致使用起来没有章法. 所以发觉,单纯的百度寻找知识点再总结,是一种很不讨好的方法,你可以观察一下自己一天的工作效率,再百度上的时间一定非常多,而且理解没有深度. 所以,直接看国外博客,系统学习是最好的选择. 1.w3cSchool http://www.w3schools.com/css/css_display_visibility.asp