分类目录归档:div/css

div+css实战,布局出自己的博客首页

假如我们要布局出一个网站首页,就拿我的blog来说,首先就应该对布局需求进行分析,本次的需求是仿自己的首页,所以第一步打开自己的网站首页。 打开首页后, 我们可以看到body背景颜色是灰白色的, 在body体里, 有一个div, div居中, 并且下移几个像素,div的背景颜色是白色的, 在div里 有一个header, 一个main, 一个footer, 在header中, 包括一个logo和menu, 在main中,是自增的内容区域, 和右边框, 所以main里要给两个边框一左一右, footer里定义尾信息, 那么好, 咱们开始。

发表在 div/css, Uncategorized | 标签为 , , , , , | 留下评论

header内div浮动背景消失的问题

为了保证易用性,我们一般会把首页切成三大块(header,main,footer),然后再给三大块里分各自的区域,又因为需要在大容器里水平对齐,所以我们会用到float,在用到float的时候,有时候会遇到之前给定背景颜色消失的问题,那就来看一下,这个到底是为什么。

发表在 div/css | 标签为 , , , , , | 留下评论

position 居中问题详解

<!–  position 居中问题详解 Type:笔记 Date: 2015/12/23 前几天看过这个问题, 昨天在写完一个留言添加居中后, 就把怎么计算的给忘了, 今天经过师傅级指点,又会了, 于是就有了本篇笔记。 –>

发表在 div/css | 标签为 , , | 留下评论

三种常见的块居中方式

非强制要求,全凭项目要求或者个人喜好, 一般用在比如用户注册页面模块,后台登录模块,新闻栏模块等等。 正常方式一,使用position固定居中 <html> <head> <title>position</title> <style type="text/css"> body {     background:blue;     margin:0px; } #main {         width:300px;     height:300px;         background:yellow;     position:absolute;     top:50%;     … 继续阅读

发表在 div/css | 标签为 , , , | 留下评论

css之position

昨天看了这个属性, 刚开始对照网上的解释看有点云里雾里, 不过小平同志有句话说的好, 实践是检验真理的唯一标准,那咱们就来动手实践看一下! 首先,position支持这么几个属性值的设置 absolute(绝对定位) fixed(绝对定位, 以浏览器窗口为基础) relative(相对父窗口定位) static(默认的,在文档流中) inherit(继承父元素中设置的属性值) 咱们先来看一下absolute 在说到absolute之前就要先说一下文档流, 文档流, 简单点理解就是, 一段div, 或者一段表格, 自上而下, 从左到右, 有序排列,absolute的作用就是让某一元素脱离文档流, 然后再通过top,left,right,bottom对元素位置进行从新设置。 它遵从两个基本原则 原则1: 父级设置了position属性, 则当前定位根据父级position里的属性值进行定位。 原则2: 父级没有设置position属性, 则当前从浏览器的左上角开始定位。

发表在 div/css | 标签为 , , | 留下评论

margin和padding

margin可以被用来设置外边距, 简单点说就是边框与边框的距离,可以使用的属性有 top right bottom left, 也可以按照margin:上,右,下,左的形式设置或者直接使用margin-top的形式。 <html> <head> <title>margin</title> <style type="text/css"> body {     background:red; } .main {         width:100%; /*  百分比是按照body原始的大小  */     height:100%;     background:yellow; } </style> </head> <body> <div class="main"> … 继续阅读

发表在 div/css | 标签为 , , | 留下评论

css常见属性

font-family: 字体的系列 防止设置一个不存在, 可以设置多个 font-size: 字体的大小 可以用百分比, 也可以用实际大小 font-style: 字体的风格  normal 普通 italic 斜体 oblique 倾斜 font-weight: 字体加粗 可以按font: xxx xxx xxx 定义 font-variant: 字体变形  normal 普通 或small-caps 小型大写字母 text-align: 文字排列 letter-spacing: 字符间距 text-decoration: 文本修饰, 可以加下划线删除线什么的。 text-indent: 缩进 text-transform: 大小写状态 … 继续阅读

发表在 div/css | 标签为 , , , , | 留下评论

css选择器

要应用哪个html元素,就可以把该元素作为选择器 <html> <head> <title>css选择器-html选择器</title> <meta http-equiv="Content-Type" Content="text/html;charset=’UTF-8’"/> <style type="text/css"> a {     color:blue; } </style> </head> <body> <a href="http://gonvshenhome.localhost">点击访问</a> </body> </html> <html> <head> <title>css选择器-class(类)选择器</title> <meta http-equiv="Content-Type" Content="text/html;charset=’UTF-8’"/> <style type="text/css"> a.o {     color:green; } </style> </head> <body> <a … 继续阅读

发表在 div/css | 标签为 , , , , | 留下评论

css的几种使用方式和区别

在html中, 使用css有以下几种方式 嵌入式 内连式 导入式 外部css样式表 直接在html中使用style标签,这种写法叫做嵌入式css写法,比如 <html> <head> <title>嵌入式样式表</title> <style type="text/css"> body {      background-image:url(nvshen.png);color:red; } </style> </head> <body> i love her. </body> </html> 这样我就给当前body区定义了一个图片,并把文字颜色设置成了红色。 下面来看看内连式,内连式是在html属性中直接设置的, 比如, 我们知道, 任意的html属性标签都支持name class id style这四个属性, 我们就可以这样来设置内连css <html> <head> <title>内连式样式表</title> </head> <body> … 继续阅读

发表在 div/css | 标签为 , , , , , | 留下评论