HTML布局总结
网页的三大元素
结构(内容html标签)+表现(布局CSS)+行为(js)
CSS选择器
1.标记选择器
2.类别选择器(.red)
3.ID选择器(#name)
4.复合选择器
(交集选择器 标记选择器+类别选择器||ID选择器)
(并集选择器 以逗号相连)
(后代选择器 p span|| p>span)
使用CSS的方法
1.行内样式 style=””;
2.内嵌式 <style type=”text/css”> </style>
3.链接式 <link href=””, type=”text/css”, rel=”stylesheet”>
4.导入样式<style type=”text/css”> @import url(“sheet1.css”) </style>
网页盒子模型
margin-border-paddding
盒子定位->postion
分为四大类
1.satic(默认,静态定准、标准流定位,包括浮动方式float)
2.relative(相对定位,以标准流定位为基础)
3.absolute(绝对定位,脱离标准流,找父类绝对定位为基础)
4.fixed(固定定位,以浏览器窗口为基础)
HTML布局总结的更多相关文章
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- Xamarin+Prism开发详解五:页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- Android如何制作漂亮的自适布局的键盘
最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高 ...
- 页面布局class常见命名规范
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- CSS3新特性应用之结构与布局
一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...
随机推荐
- ARM 之LCD和LCD控制器
既然提到 了LCD那么我们首先必须要了解的就是他的种类,CD(liquid crystal display), 即液晶显示器,是这一种采用了液晶控制透光度计数来实现色彩的显示器,他与传统的CRT显示 ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- c# Random太快产生的随机数会重复
c# Random快速连续产生相同随机数的解决方案 Random类是一个产生伪随机数字的类,它的构造函数有两种,一个是直接New Random(),另外一个是New Random(Int32),前者是 ...
- 在C语言控制台程序中播放MP3音乐
游戏没有声音多单调. 这里做一个简单的范例,用 mciSendString 函数播放 MP3 格式的音乐,先看看代码吧: // 编译该范例前,请把 background.mp3 放在项目文件夹中 // ...
- 使用Query 进行空值(empty)校验
效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- MySQL 优化方案
基本上通过索引来解决 . 通常索引键在where , group by , order by 相关的列 一个表只能用一个索引(查询的时候)所以当要执行复杂查询时最好使用联合索引就是 index (a, ...
- cf C. Matrix
http://codeforces.com/contest/365/problem/C 构造出的矩阵中的长方形的和等于构成它的长的那些数字的和加上构成它的宽的那些数字的和. 也就是求这个字符串中的两个 ...
- cf B. Petya and Staircases
http://codeforces.com/contest/362/problem/B 先排序,然后判断第一个和最后一个是不是脏的,如果是则输出NO,然后判断其中三个脏的是不是连着的,如果是也输出NO ...
- NGINX配置小随笔
达到以下效果: 1,特定目录被指定IP访问 2,不是指定的IP地址不能执行URI中特定字符串 3,特定目录中不能执行PHP文件 set $self_visit ''; if ( $request_ur ...
- 面试题 46 1+ 2+3+...+n
class Temp{ public: Temp(){ ++N; sum+=N; } static void Reset(){ N = ; sum = ; } static int getSum(){ ...