css基础：格式与布局

【css基础：格式与布局】的更多相关文章

一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给div定位 1.position:fixed;锁定位置(相当于浏览器窗口的位置),默认层数最高.例如有些网站的右下角弹窗. 练习:在右下角做一个弹窗,锁定位置,不随网页滚动而滚动. 步骤: 一.先做一个文字的弹窗 <head> <meta http-equiv="Content-Typ…

css基础-定位+网页布局案例

position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不会随着视口滚动而滚动,继承absolute的特点 position:sticky 和top属性搭配,可以设置吸附导航效果,但兼容性不太理想 <!DOCTYPE html> <html lang="en"> <head> <meta charset=…

css基础-2 div布局

div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8"> <style> .toubu {width:100%;height:100px;background:aqua;} .zhuti {width:80%;height:600px;background:red;float:left;} .left {width:20%;height:60…

关于CSS格式与布局中的基础知识的简单操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

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里面) <…

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

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

css样式表格式与布局

1 样式表内联样式表内嵌样式表外部样式表 2 选择器标签选择器 <style type="text\css" class 选择器以.开头 ID选择器以#开头复合选择器 1 以,隔开的表示并列 2 用空格隔开的表示后代 .class p /*找到使用的.class的标签,在该标签中的p标签使用该样式*/ 3 用.隔开的表示筛选 p sp /*在标签p中的"class="'sp" 使用该样式*/ 格式与布…

css样式表：样式分类，选择器。样式属性，格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p //格式对p起作用 {样式: } </style> 3.外部样式表新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→…

前端总结·基础篇·CSS（一）布局

目录这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二.位置(position) 三.补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow…

css样式，边界和边框，格式和布局

1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图片的平铺方式.no-repeat:不平铺,repeat:平铺,repeat-x:水平平铺,repeat-y:垂直平铺 4)background-position:图片位置.center,left,right,top,bottom:eg:左上:left 20px top 20px 5)backgrou…