前端-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.毗邻选 ...
随机推荐
- BZOJ 3680: 吊打XXX【模拟退火算法裸题学习，爬山算法学习】
3680: 吊打XXX Time Limit: 10 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 3192 Solved: 1198[Sub ...
- Codeforces Round #345(Div. 2)-651A.水题 651B.。。。 651C.去重操作 真是让人头大
A. Joysticks time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- Linux下gdb的安装及使用入门
1.安装gdb. 在root用户权限下: root@iZ2zeeailqvwws5dcuivdbZ:~# apt-get update ...... ...... ...... root@iZ2zee ...
- HTML5 Canvas 数据持久化存储之属性列表
属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框, ...
- .23-浅析webpack源码之事件流compilation(1)
正式开始跑编译,依次解析,首先是: compiler.apply( new JsonpTemplatePlugin(options.output), // start new FunctionModu ...
- dedecms_分页技术
<ul>{dede:list pagesize='30'} <li><a href="[field:arcurl/]">[field:title ...
- [SinGuLaRiTy] 复习模板-图论
[SinGuLaRiTy-1041] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 计算树的直径 //方法:任选一个点作为起点进行一次BFS ...
- Struts的session问题
问题描述: 在一个action中设置session之后,在jsp中得不到session的值或者在另一个action中得不到session的值. 解决方案: 1.不要把session设置成为静态的,同时 ...
- [JS]Math.random()
参考网址:http://www.soulteary.com/2014/07/05/js-math-random-trick.html [JS]Math.random()的二三事 看到题目,如果大家平时 ...
- Python中执行系统命令常见的几种方法
(1) os.system 这个方法是直接调用标准C的system() 函数,仅仅在一个子终端运行系统命令,而不能获取命令执行后的返回信息. import os os.system('cat /pro ...