【一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则】的更多相关文章

HTML+CSS结构与表现原则

CSS网页布局即版式布局,是网页设计师将有限的视觉元素进行有机的排列组合.主要通过CSS的浮动.定位功能来实现UI设计的布局要求. 常见的布局有:一列布局,两列布局,三列布局和混合布局. HTML清除默认样式:body{margin:0;padding:0;} 浮动(float).绝对定位(position:absolute)导致元素脱离文档流(即元素所显示的位置和文档代码不一定一致). 清除浮动:clear:both 页面布局的结构与表现原则:先考虑设计图中的内容和内容模块之间的关系,重点放在…

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

【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含content.padding.border //width和height属性包括content.padding和border,但是不包括margin(外边距)box-sizing: border-box; 1.2 内边距 padding 1.3 边框 border 1.4 外边距 margin 外边距塌陷:…

网页简单布局之结构与表现原则（HTML/CSS）

结构 样式 行为真正的分离 前端初级人员会在页面上单纯的用各个div把相关内容独立开: 前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写: 前端高级人员会以及其简单的和稳定的方式实现相应的效果. 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .demo1 {…

【WEB基础】HTML & CSS 基础入门（10）布局与定位

块级元素和行内元素 HTML里的元素可以分为块级元素和行内元素两大类:…

CSS 基础：HTML 标记与文档结构(1)<思维导图>

这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏查看:HTML 标记与文档结构<思维导图>): 参考资料:<CSS设计指南(第二版)>…

网页布局（html＋css基础）

一.如何用CSS进行网页布局 二.网页布局基础 三.网页简单布局之结构和表现原则 四.CSS Sprite雪碧图应用 什么叫布局? 网页的特点: 网页自适应宽度: 网页长度无限延长: (分栏也叫分列,混合布局,一列布局,二列布局,三列布局.) 使用float和绝对定位position:relative都会脱离文档流. 清除浮动两个方法: 1.为受浮动影响元素设置{clear:both;}属性2.为受浮动影响元素设置{width:100%;overflow:hidden;}固定长度以及溢出隐藏属性…

css基础 -文本溢出 text-overflow:ellipsis;

.className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class="ha"> <span>范冰冰摔倒李晨"英雄救美" 事后大呼:吓死牛了(图)</span> <p class="date"> <span class="related-time"…

HTML/CSS基础知识（四）

WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结构化标准语言主要包括HTML, XHTML和XML, 表现标准语言主要包括CSS, 行为标准主要包括对象模型(如W3C DOM).ECMAScript等. 这些标准大部分由万维网联盟(外语缩写:W3C)起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer M…

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

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