前端-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 2257: [Jsoi2009]瓶子和燃料【数论：裴蜀定理】
2257: [Jsoi2009]瓶子和燃料 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1326 Solved: 815[Submit][Stat ...
- 2017ecjtu-summer training #1 UVA 12050
A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example, th ...
- 2017ecjtu-summer training #4 UESTC 1599
题目链接 http://acm.uestc.edu.cn/#/problem/show/1599 题意 n个数 每次合并最小的两个数加到sum中,直到只剩一个数为止 常规解会超时,后来想到了用 ...
- dp水一天
水一些dp的联系题 标签: dp ###hdu_2045 题意 一穿珠子,用三种颜色染色,要求相邻的珠子和两端的珠子不能是同一种颜色,求当有n个珠子的时候有几种染色方案 题解 表示dp[i][j][k ...
- 教你如何解决Sublime Text 3使用中出现的中文乱码问题
Sublime Text 3 是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. 不过Sublime Package Control所提供的插件可以让Sub ...
- Android开发之漫漫长途 XII——Fragment详解
该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...
- php 下载文件的头信息 Determine Content Type
<?php if(!function_exists('mime_content_type')) { function mime_content_type($filename) { $mime_t ...
- ecshop商城_
一.Ecshop简介: ECShop是Comsenz公司推出的一款B2C独立网店系统,适合企业及个人快速构建个性化网上商店.系统是基于PHP语言及MYSQL数据库构架开发的跨平台开源程序. ECSho ...
- Web API <五> 序列化
在 Asp.Net Web Api 中提供了两种 媒体类型格式化器(mime-type formatter),分别用于支持 JSON 和 XML 数据的格式化处理.默认两种格式化器已集成到了 Asp. ...
- (Release Candidate)Candidate
RC:(Release Candidate)Candidate是候选人的意思,用在软件或者操作系统上就是候选版本