前端-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.毗邻选 ...
随机推荐
- 【Java学习笔记之二十】final关键字在Java继承中的用法小结
谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...
- [bzoj3955] [WF2013]Surely You Congest
首先最短路长度不同的人肯定不会冲突. 对于最短路长度相同的人,跑个最大流就行了..当然只有一个人就不用跑了 看起来会T得很惨..但dinic在单位网络里是O(m*n^0.5)的... #include ...
- POJ 2387 Til the Cows Come Home（模板——Dijkstra算法）
题目连接: http://poj.org/problem?id=2387 Description Bessie is out in the field and wants to get back to ...
- bat脚本设置系统环境变量即时生效
关于bat的资料多但零碎,记录一下. 1.设置环境变量即时生效:通过重启explorer来实现即时生效(亲测有效) @echo off set curPath=%cd% wmic ENVIRONMEN ...
- windows下github 出现Permission denied (publickey).解决方法
今天在学习github的时候遇到了一些问题,然后爬了一会,找到了解决方法记录下来,以防忘记,当然能帮助别人最好啦! github教科书传送门:http://www.liaoxuefeng.com/wi ...
- vim 命令大全 / vi 命令大全
vim 命令大全 光标控制命令: 命令 光标移动 h 向左移一个字符 j 向下移一行 k 向上移一行 l 向右移一个字符 G 移到文件的最后一行 w 移到下一个字的开头 W 移到下一个字的开头,忽略标 ...
- 无格式转换php
// 无格式转换function ClearHtml($content,$allowtags='') { mb_regex_encoding('UTF-8'); //replace MS specia ...
- OKMX6Q在ltib生成的rootfs基础上制作带QT库的根文件系统
ltib每次执行后会在其目录下生成rootfs目录,并以其为基础生成rootfs.ext2.gz文件,而litb自带的QT库又太老,所以想到按照飞凌的<OKMX6X-S2-Qt4.8.5移植手册 ...
- 【开发技术】Java生成验证码
Java生成验证码 为了防止用户恶意,或者使用软件外挂提交一些内容,就得用验证码来阻止,虽然这个会影响用户体验,但为了避免一些问题很多网站都使用了验证码;今天下午参考文档弄了一个验证码,这里分享一下; ...
- PostgreSql 分页limit
摘录自:http://jingyan.baidu.com/article/a17d528538119b8098c8f2ca.html 语法: select * from persons limit ...