CSS基础和布局复习

【CSS基础和布局复习】的更多相关文章

CSS基础和布局复习

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

一、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文档…

[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…

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

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

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

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

一、HTML和CSS基础--网页布局--实践--固定层效果

absolute和fixed的相同点: 第一,完全脱离标准文档流第二,未设置偏移量时,都定位在父元素的左上角 absolute和fixed的不同点: 第一.当设置偏移量时,偏移参照基准不同 absolute:1.没有已经定位的祖先元素,以<html>为基准偏移 2.有已经定位的祖先元素,以距其最近的.已定位的祖先元素为基准偏移 fixed:有.无已定位的祖先元素,都以浏览器可视窗口为基准偏移第二.表现形式(产生滚动条时) absolute:位置会随滚动条变化 fixed:…

前端开发：css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局前言楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^ 下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们…

CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; } </style> <div id="user"></div> (2)( class ) 类选择器 : . => 标签拥有 class="user" 属性 <style> .user { widt…

css基础引用方式标签选择器优先级各式布局

今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: 50px;background: #E91115"> </div>' 2内嵌式语法例子 ( head里面) div{height: 100px;width: 100px;background: #EF0E12} 3外部样式表语法例子 ( head里面) <…