前端-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.毗邻选 ...
随机推荐
- Centos/Rhel7部署Zabbix监控（部署篇之服务器篇）
Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...
- Centos7安装和卸载Mongodb数据库
MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...
- redis3.0 集群在windows上的配置（转）
1. 安装Redis版本:win-3.0.501https://github.com/MSOpenTech/redis/releases页面有,我下载的是zip版本的:Redis-x64-3.0.50 ...
- 安装linux的关键步骤
- 数据库01创建表和DML语言
楼主用的数据库时mysql,用的时navacat for mysql. 数据库层面: 1.显示所有数据库 show databases; 2.创建数据库,名字叫lyh,编码为utf-8 create ...
- ThinkPHP模板IF标签用法详解
投稿:shichen2014 字体:[增加 减小] 类型:转载 时间:2014-07-01 我要评论 这篇文章主要介绍了ThinkPHP模板IF标签用法,需要的朋友可以参考下 ThinkPHP的IF标 ...
- ffmpeg批量实现视频转码命令行
ffmpeg实现视频转码命令行,result需要提前建好作为保存转码后的视频路径: ffmpeg -i .mp4 -vcodec h264 "result\1.mp4" 当有大量视 ...
- 5分钟把任意网站变成桌面软件--windows版
本文源自于segmentfault的一篇专栏文章:https://segmentfault.com/a/1190000012924855 只不过这篇是MAC版本的,所以我试了下windows版的: ...
- java.lang.NoClassDefFoundError: javax/mail/Authenticator
摘录自:http://stackoverflow.com/questions/1630002/java-lang-noclassdeffounderror-javax-mail-authenticat ...
- Python3.6.1的安装
Python 3.61的下载和安装,下载地址:https://www.python.org/downloads/ 选择最近的版本,目前为Python3.6.1,下载后直接安装即可 下载包为: 双击安装 ...