![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
第三册:HTML+CSS
文章平均质量分 83
HTML+CSS
Learn 学一点
创新的前提是坚持,技术永远不嫌多。
展开
-
14、什么是HTML 5,HTML5与HTML的比较及其基础语法
2.22 什么是HTML 5,HTML5相关基础知识 一、官方概念:HTML5草案的前身名为Web Applications 1.0,是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性,加强了网页的标准、语义化与web表现性能,同时还增加了本地数据库等 Web 应用的功能。 二、广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括:HTML5,CSS3,Javascrip原创 2021-01-20 11:13:52 · 219 阅读 · 0 评论 -
13、定位(position)、CSS Sprites技术及绝对定位盒子居中
2.18 定位(定位属性:position,以下属性都需要top、bottom、left、right配合使用)1、Absoulute:绝对定位 特点:(1)以页面的左上角为原点 (2)不保留原来的位置 (3)z-index调节图层的顺序 ......<style type="text/css">#a,#b,#c{ width:200px; height:200px; background-color:#FF0000;}#b{ background-col原创 2021-01-20 10:06:55 · 181 阅读 · 0 评论 -
12、margin边界、图片拼版及圆角表格制作知识
2.15 margin边界Margin是边界,一个盒子的边界是4个。Margin:10px;上、下、左、右全是10pxMargin:10px 50px;第一个参数是上、下,第二个参数是左、右。Margin:10px auto 50px;第一个是上,第二个是左右,第三个是下Margin:10px 20px 30px 40px;顺序:上右下左(顺时针旋转)同理:padding后面参数的属性是一样的。例1:导航栏的CSS样式示例<style type="text/css">原创 2020-12-24 09:21:00 · 302 阅读 · 0 评论 -
11、关于CSS样式中“颜色”的概念介绍及 Overflow(overflow属性规定当内容溢出元素框时发生的事情)
2.13 关于CSS样式中“颜色”的概念介绍 光的颜色很多,但是所有的光线都是由三种基本的光线组成红(red)、绿(green)、蓝(blue),网站的图片模式都是RGB模式;网页图片中任何一种颜色都是由这三个颜色构成。(印刷用的CMYK模式)。每个颜色的色值范围是0-255,如果用十进制来表示颜色,肯定会出现歧义。在实际表示颜色的值用16进制来表示(00-FF)。十六进制和十进制的转换:十进制有十个数,最大数是9;十六进制有十六个数:0-9、 A 、B 、C 、D、 E 、F(FF)16=(2原创 2020-12-23 10:34:51 · 665 阅读 · 0 评论 -
10、浮动和清除浮动影响
2.12 浮动和清除浮动影响Float(浮动)属性: 1、改变块元素(block element)对象的默认显示方式。 2、浮动元素(float)会被移出标准流,但是没有脱离文件流。 3、float开始之初是为了实现文本环绕。将块显示标记左右排列的时候使用浮动属性。<style>#aa,#bb,#cc{ width:100px; height:100px; background-color:#FF0000; float:left;/*当全部左浮动时,三个盒子原创 2020-12-23 09:39:02 · 119 阅读 · 0 评论 -
9、盒子模型
2.11 盒子模型Div+CSS排版优点:执行效率高 1、 缩减页面代码,提高页面执行效率 2、 带宽要求降低(代码更简洁) 3、 更容易被搜索引擎搜索到学完div+css后思考为什么div+css执行效率高?什么是盒子?只要是存放内容的标签就是盒子,最大的盒子是HTML。边界(margin):盒子的外面叫边界,边界有四个,上下左右填充(padding):盒子的里面叫填充,填充有四个,上下左右边框(border):盒子的本身有边框,边框有四个,上下左右a盒子的上填充,原创 2020-12-23 09:31:56 · 171 阅读 · 2 评论 -
8、强制优先级、权重叠加、标记的显示模式
2.8 强制优先级(!important)<style type="text/css">p{ color:#FF0000 !important;/*红色*//*强制优先级*/}.aa{ color:#00FF00;/*绿色*/}#bb{ color:#000099;/*蓝色*/}</style></head><body> <p class="aa" id="bb" style=" color:#9933CC">锄禾原创 2020-12-22 14:32:26 · 382 阅读 · 0 评论 -
7、样式继承、样式优先级、应用多个类样式
2.5 样式的继承<style type="text/css">(父元素) p{font-size:24px;被子元素继承 color:#FF0000;/*红色*/ } (子元素)b{color:#0000CC;/*蓝色*/覆盖父元素的颜色 font:"隶书"; }</style></head><body> <p><b>锄禾日当午</b></p></body>原创 2020-12-22 14:06:58 · 390 阅读 · 1 评论 -
6、样式分类——按CSS的位置分类
2.4 样式分类——按CSS的位置分类1. 内嵌样式(内部样式):在HTML页面中以<style>开头,</style>结束,这里边的样式只能供本页面使用。<style type="text/css"></style> (样式代码)2. 行内样式:通过元素的style属性直接写的样式。 <标记 style=“属性”>3. 外部样式:写一个css文件,在需要使用css的页面中引入外部css。我们可以将页面公用的css写到外原创 2020-12-22 13:46:18 · 1340 阅读 · 0 评论 -
5、CSS(上)
CSS2.1 CSS介绍和类样式 CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 思考题:为什么CSS叫层叠样式表,“层叠”表示什么意思? 将网站分成两个部分,表现和内容,表现由CSS来控制,内容由PHP从数据库中读取。2.2 CSS基本语法样式以<style>开头,以</style>结束。样式一般写在<head></head>之间。CSS的定义原创 2020-12-18 15:28:52 · 90 阅读 · 0 评论 -
4、HTML(下)
1.29 关于图片的几个概念和格式关于图片的基本概念: 1. 位图图像:由屏幕上的像素点描述图像,放大失真,会出现马赛克模糊。操作位图软件PS,FW。 2. 矢量图形:使用线和面组成的图像,放大不失真。操作矢量图的软件ai,fw。 3. 分辨率:衡量位图质量好坏的指标,分辨率越大,图片质量越好,但是体积越大。在单位长度上的像素数,通常以“像素/英寸”,网上一般72像素/英寸。 4. 网上默认尺寸单位为像素。常见的图像格式: 1. JPG/JPEG: 2. GIF:注意:二者比原创 2020-12-18 14:01:42 · 120 阅读 · 0 评论 -
3、框架
1.28 框架框架是HTML5新标准中淘汰的标签。框架属于将要被淘汰的标签,W3c建议以后使用内嵌框架,现在主要应用在后台管理处。思考:如何实现在一个浏览器上看到多个页面?用框架。框架集:<frameset> (set:集合)框架:<frame>如果有N个框架,则保存N+1个文件。在保存框架时注意事项:光标放在哪个框架中就保存哪个框架中的页面,如果要保存所有的页面,点击文件——保存全部(先保存框架集,再一个一个保存框架)。如何将已经有的页面显示到框架原创 2020-12-16 17:40:19 · 155 阅读 · 0 评论 -
1、HTML(上)
1 HTML1.1 两个概念1.1.1 客户端和服务端#mermaid-svg-VuSQOQVMo9vAenPq .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-VuSQOQVMo9vAenPq .label text{fill:#333}#mermaid-svg-VuSQOQVMo9vAenPq .nod原创 2020-12-14 11:46:49 · 223 阅读 · 0 评论 -
2、HTML(中)
1.14 路径路径分为两种:1、 绝对地址:从盘符开始。只要移动位置就找不到。2、 相对地址:以自身文件为准,相对于自己的位置。*注意:../代表上一级目录,./表示当前目录 现学现用:<a href =”../../test.html”>点击</a> <a href =”./2-滚动文字.html”>点击</a>1.15 链接链接的标记是<a></a>1.15.1 内部链接网站内部页面和页面之间的链接原创 2020-12-15 11:11:23 · 213 阅读 · 0 评论