-
Recent Posts
Recent Comments
Archives
Categories
Tags
友情链接
标签归档：css
div+css实战,布局出自己的博客首页
假如我们要布局出一个网站首页,就拿我的blog来说，首先就应该对布局需求进行分析，本次的需求是仿自己的首页，所以第一步打开自己的网站首页。 打开首页后， 我们可以看到body背景颜色是灰白色的， 在body体里， 有一个div, div居中， 并且下移几个像素，div的背景颜色是白色的， 在div里 有一个header, 一个main, 一个footer, 在header中， 包括一个logo和menu, 在main中，是自增的内容区域， 和右边框， 所以main里要给两个边框一左一右， footer里定义尾信息， 那么好， 咱们开始。
header内div浮动背景消失的问题
为了保证易用性，我们一般会把首页切成三大块(header,main,footer),然后再给三大块里分各自的区域,又因为需要在大容器里水平对齐,所以我们会用到float，在用到float的时候，有时候会遇到之前给定背景颜色消失的问题，那就来看一下，这个到底是为什么。
三种常见的块居中方式
非强制要求，全凭项目要求或者个人喜好， 一般用在比如用户注册页面模块，后台登录模块，新闻栏模块等等。 正常方式一，使用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%; … 继续阅读
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"> … 继续阅读
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: 大小写状态 … 继续阅读
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 … 继续阅读