前端-css
页面css排版不错乱：
1.最外层div中 定义width=980px，当页面缩小以后，就在下面出现滚动条
2.使用 media 技术，bootstrp技术。页面自使用
一、css选择器
|
选择器 |
样式 |
说明 |
|
类选择器 |
.page-top |
选择class=“page-top” |
|
ID选择器 |
#pag-1 |
选择id=“page-1” |
|
标签选择器 |
p |
选择所有<p> 标签 |
|
层级选择器 |
div p |
选择 <div> 标签内部的所有 <p> 标签 |
|
组合选择器 |
div，p |
选择所有 <div> 标签和所有 <p> 标签 |
|
属性选择器 |
.c1[n='alex'] |
第一次筛选class=c1，再次通过属性进行筛选 |
二、导入方式
一个标签可以应用多种样式，当属性重叠的时候，标签上的style优先级最高，head中与link中，重上而下进行覆盖操作！ 跟读写顺序一致
- 标签上直接应用
- 在head头部中加载
- 在head中引入css文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
三、各种样式
3.1 边框
<div style="border: 1px red dotted;">得到</div>
宽度 颜色 样式虚线，solid实线
border 是有四个防线的
3.2 宽度、高度、内容水平居中，垂直居中
height: 高度 像素 百分比（高度百分比直接使用有问题，要配合父级标签）
width： 宽度 像素 百分比
text-align 水平方向居中
line-height：38px 垂直方向，根据标签高度居中
color 字体颜色
front-size 字体大小
front-weight 字体加粗
<div style="
width: 20%;
height:40px;
line-height: 40px;
text-align: center;
color: aqua;
font-size: larger;
font-weight: bolder;
">人呢</div>
列子
3.3 float
让便签飘起来，让块级标签也能in-line 堆叠。 注意：父级标签，因为包含的标签 飘起来，撑起来 不可控了 最后要加上 clear:both
<div style="background-color: red;width: 50%;float: left">1</div>
<div style="background-color: aqua;width: 30%;float:right">2</div>
<div style="width: 300px;border: red solid;">
<div style="border: blue solid;width: 96px;height: 30px;float: left"></div>
<div style="border: blue solid;width: 96px;height: 30px;float: left"></div>
<div style="border: blue solid;width: 96px;height: 30px;float: left"></div>
<div style="border: blue solid;width: 96px;height: 30px;float: left"></div>
<div style="border: blue solid;width: 96px;height: 30px;float: left"></div>
<div style="clear: both"></div> </div>
float
3.4 display
行内标签：无法设置宽度（默认文本占多少就是多少），长度，边距
块级标签：可以设置宽度（默认宽度就是占一行），高度，边距
display none 让标签消失
display inline
display block
display inline-block
具有linline的默认的宽度
又具有block的设置高度
3.5 边距
magrin 内边距
pading 外边距 增加自己本身
<div style="border: red 1px solid;width: 60px;height: 60px;">
<div style="height: 30px;width: 60px;background-color: blue;padding-top: 0px">123<div>
</div>
3.6 position
位置属性，直接加上一个<div> 是分区域的，position=fixed类似一个墙体上的吸铁石。
进行分层
fixed --------------》固定在浏览器窗口的固定位置
relative 单独没有意思
absolute 第一次定位在指定位置，在
relative+basolute 做相对的定位 basolute对relative进行定位
<div style="position"
放回顶部 与 菜单 固定的实例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.caidan{
width: 100%;
height: 50px;
background-color: blue;
position: fixed;
top:0;
left: 0;
}
</style>
</head>
<body style="margin: 0">
<div style="width: 40px;height: 40px;background-color: aqua;position: fixed;bottom: 10px;right: 10px;line-height: 40px;">TOP</div> <div style="margin-top:52px;width: 100%;height: 1000px;background-color: #dddddd">内容：我在哪</div>
<div class="caidan">首页</div> </body>
3.7 图层 透明度 索引
在使用position以后，margin：0 auto的居中方式会失效：
后期，js一点就出现的按钮 可以通过图层加上 display：none 一起操作
z-index：图层索引，越大就在顶端 opacity：不透明度
<div style="top:20%;left:50%;margin-left: -50px; margin-top:-50px;width: 200px;height: 50px;position: fixed;background-color: white;z-index: 10"></div>
<div style="z-index:8;width: 100%;height: 5000px;background-color: black;"></div>
<div style="z-index:9;opacity:0.5;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #dddddd"></div>
3.8 overflow
当图片太大把标签撑起来的时候，使用overflow
auto：加上滑动窗口
hidden：把超出部分隐藏起来
<div style="width: 200px;height: 200px;overflow: auto">
<img src="1.jpg">
</div>
3.9 hower 当鼠标盘旋到该区域，就把内容显示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page-top{
width: 100%;
height: 45px;
background-color: #2459a2;
position:fixed;
top:0;
left:0;
rihgt:0;
}
.context{
margin-top: 48px;
}
.page-top .w{
width: 80%;
margin:0 auto;
line-height: 45px;
color: white;
}
.page-top .w .menu{
display: inline-block;
/*默认a便签是inline标签，so 无法改变，要改变显示形式*/
height: 45px;
padding: 0 10px;
}
/*当鼠标盘旋到这一块的时候，就把下面内容显示出来*/
.page-top .w .menu:hover{
background-color: #7ca1ff;
} </style>
</head>
<body>
<div class="page-top">
<div class="w">
<a class="menu">全部</a>
<a class="menu" >42区</a>
<a class="menu" >段子</a>
<a class="menu" >图片</a> </div>
</div>
<div class="context">dead</div>
</body>
</html>
3.10 backgroud-imag 背景图片
当一个页面中使用多个小图片，加载多个图片，可以把小图片做到一张图片里面，这样就省下了很多下载链接;
<div style="background-image: url(tip.png);
background-repeat: no-repeat;
width: 20px;
height: 30px;
background-position-x: 0px;
background-position-y:-100px ;
"></div>
3.11 小练习-登入加图片
<div style=" width:200px;height:40px;position: relative;">
<input type="text" style="font-size:25px;font-weight:lighter;width:200px;height:40px;padding-right: 26px">
<div style="height:40px;width:40px;position: absolute;right:-44px;top:6px;background-image: url(user.png);background-repeat: no-repeat"></div>
</div>
前端-css的更多相关文章
- 前端CSS编程之道-LESS
由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
- 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿
周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- 前端 CSS 目录
前端 CSS 介绍 前端 CSS语法 前端 CSS 注释
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
- day 45 前端CSS
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...
- 前端——CSS选择器
目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...
随机推荐
- HDU 2639 Bone Collector II(01背包变形【第K大最优解】)
Bone Collector II Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- [bzoj1227] [SDOI2009]虔诚的墓主人
终于填上了这个万年巨坑....从初二的时候就听说过这题...然后一直不敢写QAQ 现在感觉也不是很烦(然而我还是写麻烦了 离散化一波,预处理出组合数什么的.. 要维护对于当前行,每列上方和下方节点凑出 ...
- [bzoj4098] [Usaco2015 Open]Palindromic Paths
DP.. f[i][j][k]表示左上结束节点是第i条副对角线上的第j个点,右下结束节点是第n*2-i条副对角线上的第k个点,构成回文的方案数. i那维滚动一下.时间复杂度O(n^3)空间复杂度O(n ...
- [bzoj3048] [Usaco2013 Jan]Cow Lineup
一开始一脸懵逼.. 后来才想到维护一左一右俩指针l和r..表示[l,r]这段内不同种类的数字<=k+1种. 显然最左的.合法的l随着r的增加而不减. 顺便离散化,记一下各个种类数字出现的次数就可 ...
- malloc函数用法
malloc函数用法 函数声明(函数原型): void *malloc(int size); 说明:malloc 向系统申请分配指定size个字节的内存空间.返回类型是 void* 类型.void* ...
- Lucene学习笔记1(V7.1)
Lucene是一个搜索类库,solr.nutch和elasticsearch都是基于Lucene.个人感觉学习高级搜索引擎应用程序之前 有必要了解Lucene. 开发环境:idea maven spr ...
- Node.js进阶：5分钟入门非对称加密方法
前言 刚回答了SegmentFault上一个兄弟提的问题<非对称解密出错>.这个属于Node.js在安全上的应用,遇到同样问题的人应该不少,基于回答的问题,这里简单总结下. 非对称加密的理 ...
- QTP10破解方法及mgn-mqt82.exe下载
经试验可以成功安装license,具体步骤如下:一.从HP官方网上下载QTP10.0并安装.二.安装成功后,在C:\Program Files\Common Files\Mercury Interac ...
- 【Android】版本的名称
http://www.cnblogs.com/imlucky/archive/2011/10/21/2220596.html
- 引用类型之数组array最全的详解
Array类型 今天总结一下array类型. js中的数组是有着非常强大的功能.具有很大的灵活性,有两个方面的特点 1.数组的每一项可以保存任何的数据类型:2.数组大小可以动态的调整:看下面的例子: ...