【[19/06/07-星期五] CSS基础_布局&定位&背景样式】的更多相关文章

[19/06/07-星期五] CSS基础_布局&定位&背景样式

一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单布局</title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } .header{ width: 1000px; height: 100p…

[19/06/09-星期日] CSS基础_示例

一.图片格式&Hack(尽量不要使用) IE6对图片png-24的透明效果不支持,IE6中背景会发灰,可以使用png-8来代替.但是使用png-8代替之后清晰度会有所下降. 使用js来解决该问题,但是需要引入一个外部的js文件. 有些代码只需要在指定浏览器中(主要指IE)执行,可以使用CSS Hack 来解决. 条件Hack,如<!-- [if IE]>  语句 <![endif]-->  只对IE浏览器有效,其他的浏览器会把它当成注释. IE10以下的支持这种模式. 在样…

[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的.而CSS可以分别为网页的各个层次设置样式. 书写的位置: 1.内联样式:可以将css样式表书写到元素(标签)的style属性中,只对当前标签中的内容起作用,不方便复用.属于结构与表现耦合,不推荐使用. 2.内部样式:可以将css样式编写的head中style标签中,然后通过css选择器…

[19/06/06-星期四] CSS基础_盒子模型

一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒子摆放到网页中对应的位置即可完成网页布局. 模型图片: 参数: 1.width 和height:设置内容区.元素的高度和宽度,而不是盒子的整个大小,盒子的可见大小=内容区+内边距+边框 2.border:为一个元素设置边框,必须指定3个元素,缺一不可.但是不写的话,有默认值,都不写是没有的,写至少一…

[19/06/08-星期六] CSS基础_表格&表单

一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. 在表格中使用tr(table-row 行)来表示表格中的一行,在tr中使用td(table data cell ,表格数据元素)来创建单元格,几个td就是几个单元格. td表示列名(table Header,头部信息,如“姓名”.“年龄”),也是位于一行当中,即tr之间,th就是一个特殊的td.默认…

一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与CSS耦合度. 案例一:微博对话框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd…

一、HTML和CSS基础--网页布局--网页布局基础

W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的定位机制有三种,分别是标准文档流.浮动及绝对定位. 标准文档流 特点:从上到下,从左到右,输出文档内容,由块级元素和行级元素组成 块级元素:从左到右撑满页面,独占一行,碰到页面边缘时会自动换行 常见的块级元素:div ul li dl dt p... 行级元素:能在同一行内显示,不会改变HTML文档…

CSS基础和布局复习

table布局 div布局优势   浏览器支持完善   表现和结构分离   样式设计控制功能强大   可以继承,层叠处理 Transitional // 松散过度型 Strict //严格型 Frameset //比较不常用的,使用框架使用这种模式 XHTML中的所有标签都是要闭合的比如 "<input/>" 但是在HTML中就不必这样 "<input>"即可  CSS中的数据单位: px : 像素 em : 当前对象体内的字体尺寸(好像英文…

一、HTML和CSS基础--网页布局--实践--导航条菜单的制作

案例一:导航菜单的制作 垂直菜单…

一、HTML和CSS基础--网页布局--如何用css进行网页布局

什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局.二列布局.三列布局.混合布局 前端工程师是将艺术与技术完美融合的关键岗位. 一列布局 通常作为网站首页,适合放置简单的内容,大多固定宽度. 二列布局 左left右right 宽度自适应的话要用百分比来设置 自适应宽度的二列布局用的很少,一般都是用固定宽度的二列布局 三列布局 左中右 如果左右是固定…