程序员的时光
用心写好每一篇文章。
展开
-
CSS(十四)——变宽度布局
利用相对于浏览器的百分比来设置页面布局大小:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> body{ text-align: ce...原创 2019-03-20 19:31:01 · 465 阅读 · 0 评论 -
CSS(十三)——固定宽度布局
目录1.CSS布局2.绝对定位法3.浮动法1.CSS布局2.绝对定位法首先来看一个基本的布局框架:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><styl...原创 2019-03-20 19:22:04 · 1350 阅读 · 0 评论 -
CSS(十二)——用CSS设置列表样式
目录1.设置列表的符号2.设置列表图片符号3.创建简单导航菜单1.设置列表的符号首先看两个默认的列表符号;<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></h原创 2019-03-15 16:46:15 · 890 阅读 · 0 评论 -
CSS(十一)——用CSS设置超链接样式
目录1.使用CSS伪类别来设置超链接样式1.1普通的、未被访问的链接1.2用户已访问的链接1.3鼠标指针位于链接的上方2.创建按钮式超链接2.1设置三个超链接(默认格式)2.2设置超链接的边距和字体格式2.3设置类似于按钮格式的超链接2.4设置点击按钮后的动态效果1.使用CSS伪类别来设置超链接样式链接的四种状态:a:link:普通的、未被访问的...原创 2019-03-14 16:39:42 · 1834 阅读 · 0 评论 -
CSS(十)——用CSS设置表格样式
目录1.设置表格的边框1.1设置表格边框1.2设置单元格的间距;1.3设置边框分离,合并 默认是 separate(分离) collapse (合并);1.4设置单元格内容和边框之间的距离;2.设置表格的宽度3.设置表格隔行换色4.设置表格列样式5.设置鼠标经过时行变色效果;1.设置表格的边框border:设置表格边框;border-spacing...原创 2019-03-14 15:34:28 · 735 阅读 · 0 评论 -
CSS(九)——盒子的浮动与定位
目录1.盒子浮动 float2.使用clear清除浮动的影响;2.1不允许左边有浮动对象;2.2不允许右边有悬浮对象;2.3左右都不允许有浮动对象;3.盒子定位position;3.1.Relative:相对定位,相对于原本的标准位置偏移指定的距离;3.2.Absolute:绝对定位,以它的包含框为基准进行偏移;3.3.Fixed:固定定位,以浏览器窗口为基准...原创 2019-03-14 09:12:18 · 1585 阅读 · 0 评论 -
CSS(八)——CSS盒模型
目录1.盒模型基本概念2.边框3.内边距4.外边距5.网页布局与盒模型1.标准文档流;2.块级元素 VS 行内元素;6.盒子在标准流中的定位1.行内元素之间的水平margin;2.块级元素之间的竖直margin;3.嵌套盒子之间的margin;4.margin的属性可以设置成负值;1.盒模型基本概念我们可以好好看一下这张图;盒模型:相...原创 2019-03-12 20:54:11 · 276 阅读 · 0 评论 -
CSS(七)——设置背景颜色和背景图像
目录1.设置背景颜色2.设置背景图片3.设置背景图像位置4.设置背景图片位置固定1.设置背景颜色<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head&a原创 2019-03-12 15:13:03 · 3671 阅读 · 0 评论 -
CSS(六)——用CSS设置图像效果
目录1.设置图像边框2.设置图片大小3.图文混排4.设置图片与文字的对齐方式1.设置图像边框下面给出四种图像边框的样式:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>&原创 2019-03-12 09:48:12 · 617 阅读 · 0 评论 -
CSS(五)——设置文本样式
目录1.设置文字的字体2.设置文字倾斜效果3.设置文字的加粗效果4.设置英文字母大小写转换5.设置文字的大小6.设置文字的装饰效果7.设置段落首行缩进8.设置字词间距9.设置文字的行高;10.设置段落之间的距离11.设置文本的水平位置12.设置文字和背景的颜色1.设置文字的字体<!DOCTYPE html><htm...原创 2019-03-11 14:27:28 · 359 阅读 · 0 评论 -
CSS(四)——CSS高级特性
目录1.复合选择器1.1 交集选择器;1.2并集选择器;1.3后代选择器;1.4子选择器;2.继承特性3.层叠特性1.复合选择器复合选择器包括交集选择器、并集选择器、后代选择器和子选择器等;1.1 交集选择器;可以将一个标签设置成多个共同的属性值;<!DOCTYPE html><html><head><...原创 2019-03-11 08:50:50 · 298 阅读 · 0 评论 -
CSS(三)——简单的网页制作
通过前面的HTML和CSS的学习,我们现在可以做一个简单的网页;预览效果:1.首先新建一个.html文件(wangye.html):<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Java之父</title><link原创 2019-03-07 10:41:14 · 1884 阅读 · 0 评论 -
CSS(二)——CSS核心基础
目录1.CSS基本语法2.CSS基本选择器1.标签选择器;2.类别选择器;3.ID选择器;3.在HTML中引入CSS的方法1.行内样式2.内嵌式3.链接式4.几种方式的优先级比较1.CSS基本语法CSS有选择器,然后我们可以在选择器里面添加装饰;2.CSS基本选择器1.标签选择器;<!DOCTYPE html>&...原创 2019-03-06 10:10:15 · 364 阅读 · 0 评论 -
CSS(一)——CSS概述
1.CSS简介CSS是指层叠样式表(Cascading Style Sheets);在前面我们讲过HTML,比方说html是骨架的话,那么css就是肉体了;具体介绍请看百度百科;2.CSS简单引用比方说在一个html文件中,想要将多个段落的文件统一设置格式,那么就可以在head标签中添加相应的css样式;<!DOCTYPE html><html&...原创 2019-03-05 19:48:35 · 399 阅读 · 0 评论