Tag Archives: css

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

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

Posted in div/css, Uncategorized | Tagged , , , , , | Leave a comment

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

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

Posted in div/css | Tagged , , , , , | Leave a comment

三种常见的块居中方式

非强制要求,全凭项目要求或者个人喜好, 一般用在比如用户注册页面模块,后台登录模块,新闻栏模块等等。 正常方式一,使用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%;     … Continue reading

Posted in div/css | Tagged , , , | Leave a comment

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"> … Continue reading

Posted in div/css | Tagged , , | Leave a comment

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: 大小写状态 … Continue reading

Posted in div/css | Tagged , , , , | Leave a comment

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 … Continue reading

Posted in div/css | Tagged , , , , | Leave a comment