CSS第二节
div做页面布局的建议
把整个网页从上到下分成若干块（一般分三块：头，中间，尾部）,每一块都按下面的思路
先写第一层，可以设置背景色，或者高度和垂直居中（line-height保证内容不超出高度），不设高度，这个div的高度由内容撑起来
再写第二层，这个可以设置一个宽度=像素的值，这样整个内容就在这个区域内，如果页面宽度太小，页面下方会出现滚动条，不会造成内容混乱
第三次可以开始写你的内容，可以继续用div或者别的标签，宽度可以用百分比，也可以用像素，如果用了float，要使用clear
<body>
<div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;">
<div class="lv2" style="width: 800px;">
<div style="width: 30%;float: left;">左边的内容</div>
<div style="width: 70%;float: left;">中间的内容</div>
<div style="clear: both;"></div>
</div>
</div>
CSS样式重用
可以给一个标签设置多个class值，可以为每个class应用一个样式，标签有多个class,就可以应用多个样式
要设置多个class，只需在class名间加空格即可
<style>
如果整个页面的宽度 > 900px时：
{
.c{
共有
}
.c1{
独有
}
} .c2{
独有
}
</style>
实例如下：
.c1 {
background-color: aliceblue;
height: 40px;
width: 60px;
}
.c2 {
width: 40px;
}
.c3 {
border: 1px pink dotted;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">c2</div>
<div class="c3">c3</div>
<div class="c1 c2">c1 c2</div>
<div class="c1 c3">c1 c3</div>
<div class="c1 c2 c3">c1 c2 c3</div>
</body>
</html>
img标签的优化
在a标签里的img标签（图片），可能在IE上打开的时候，在最外面有一圈蓝色的边框。这个边框的颜色是超链接字体的颜色，只需要写个img标签选择器，设置border为0，
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
border: 0px;
}
</style>
</head>
<body>
<a href="https://www.cnblogs.com/Aline2/">
<img src="mv.jpg" />
</a> </body>
定位-position
fixed-固定在窗口的某个位置，一直在浏览器上显示
position: fixed; 固定在窗口的某个位置，结合top,left,right,bottom固定位置，使用position后，会让块级标签变为行内标签，我们需要设置left,top等属性撑满，并且该标签是浮在页面上的。
如下实例为在页面右下角放置返回按钮的实例：
<body style="margin: 0 auto">
<div style="width: 50px;height: 50px;background-color: #dddddd;
color: yellow;position: fixed;right: 0;bottom: 0">返回顶部</div>
<div style="background-color: lightskyblue;height: 5000px"></div> </body>
菜单始终置顶实例
<body style="margin: 0 auto">
<div style="height: 50px;background-color: #dddddd;
color: yellow;position: fixed;top: 0;right: 0;left: 0">菜单</div>
<div style="background-color: lightskyblue;height: 5000px;margin-top: 50px">内容</div>
</body>
absolute-绝对定位
一般配合relative一起使用，单独只设置relative不起任何作用，
这个和fixed都是决定定位。所以主要来看看和fixed的差别。将上面的实例由fixed改为 absolute ，会发现标签是随着滚动条移动的，不会一直显示在窗口上
应用场景;
将某个标签定位在父标签里面
<body>
<div style="position: relative;width: 400px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;width: 50px;height: 50px;background-color: #dddddd;
left: 0;bottom: 0"></div>
</div>
<div style="position: relative;width: 400px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;width: 50px;height: 50px;background-color: #dddddd;
right: 0;bottom: 0"></div>
</div>
<div style="position: relative;width: 400px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;width: 50px;height: 50px;background-color: #dddddd;
left: 0;top: 0"></div>
</div>
</body>
溢出处理-overflow
一般设置一个div的高度和宽度，而内容比宽高要大，就会出现溢出现象
如在一个div中放置一张图片，而不定义图片大小，此时图片会按照原图显示，不会出现显示的div的大小
<div style="height: 500px;width: 300px;">
<img src="mv.jpg" />
</div>
<div style="background-color: red;">溢出</div>
此时就需要overflow属性了，这样不会改变原图的大小
在div中设置overflow：
overflow: hidden; 内容会被修剪或隐藏
overflow: auto; 浏览器会显示滚动条以便查看其余内容
overflow: scroll; 和auto一样
然而实际应用中可以在图片标签中加宽高来实现，应此更多应用于文字上
<div style="background-color: #dddddd;height: 100px;width: 150px;overflow: auto;">
这个属性定义溢出元素内容区的内容会如何处理。
如果值为 scroll 或 auto，则会提供一种滚动机制。
如果值为 hidden，则溢出的部分会被修剪并隐藏。
默认值是 visible。
</div>
hover 伪类
当鼠标移动到元素上时，才会生效的css样式，
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
line-height: 48px;
background-color: #dddddd;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.pg-body{
margin-top: 48px;
background-color: lightskyblue;
}
.m{
width: 100%;
text-align: center;
margin: 0 auto;
}
.pg-header .menu{
color: aqua;
padding: 0 10px; }
.pg-header .menu:hover{
color: red;
background-color: green;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<div class="m">
<a class="menu">增加</a>
<a class="menu">删除</a>
<a class="menu">修改改</a>
<a class="menu">查寻</a>
</div>
</div>
<div class="pg-body">
<div class="m">以下为主要内容</div>
</div>
</body>
背景图片-background
<div style="background-image: url('1.png');height: 800px;width: 1900px;">
默认背景图片会平铺整个div，并且图片的比例不变，多余的会被裁减
限制平铺的方向
<div style="background-image: url('1.png');height: 800px;width: 1900px;background-repeat: repeat-y;"> #垂直方向平铺
background-repeat: no-repeat ：不允许平铺background-repeat: repeat-x ：横向平铺background-repeat: repeat-y ：纵向平铺
定位背景图（抠图）
主要使用：
background-position
需要实现只显示其中的一个图标，图片宽高都是20px,
设计如下：
<div style="background-image: url('icon_18_118.png');background-repeat: no-repeat;
border: 1px solid darkgray;height: 20px;width: 20px;
background-position-y: -40px;">
</div>
background-position-y: 垂直偏移量
background-position-x: 水平偏移量
也可以直接使用 background-position：0 -20px表示，参数分别为水平偏移和垂直偏移
以上关于背景图的参数都可以简写成
background: url(1.png) 1px -119px no-repeat;，图片路径、纵向位移、横向位移、是否平铺。
像这样的把多张图片放一起的好处是：一次请求能获取多个图标，减少了客户端和服务的的交互，而如果是每个图标弄张图片，就需要每次发送一个请求
练习
实现如下网页，将图片放在输入框的右侧
分析：需要分两层，一层是输入框，第二层是图标，需要用绝对定位让图标悬浮在输入框右侧
代码：
<body>
<div class="m" style="height: 40px;width: 350px;position: relative;">
<form action="">
user:<input type="text" style="height: 40px;width: 250px;padding-right: 30px" />
<span style="display:inline-block;background: url('2.png') no-repeat ;
height: 30px;width: 30px;position: absolute;right: 35px;top: 10px">
</span>
</form>
</div>
</body>
先设置外面div的宽高，
再设置输入框
最后设置背景图片的大小，位置等
这里需要注意的是输入框的内容，因为图标悬浮在输入框中应此会挡住一部分内容，这里就需要设置内容的宽度了，内容宽度+图标宽度不能超过输入框的宽度
CSS第二节的更多相关文章
- 2014年辛星解读css第二节
第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...
- 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 （第二节）
说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...
- 《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第二节：MVC5项目结构
第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...
- android内部培训视频_第二节 布局基础
第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
- seajs第二节，seajs各模块依赖关系
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- VUE2.0实现购物车和地址选配功能学习第二节
第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
- 第二节 安装CentOS
Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...
- 源码讲解 node+mongodb 建站攻略（一期）第二节
源码讲解 node+mongodb 建站攻略(一期)第二节 上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...
随机推荐
- Android APK反编译技巧全讲解
导言:在我们安卓开发当中,我们不仅需要掌握基础的开发技能,也需要掌握软件的安全技能,这样才可以让我们的软件能够成为一款能够真正可以进行发布的软件,同时也可以让自己的核心技术不会被别人所盗取. 首先我们 ...
- 飘逸的python - 单例模式乱弹
方法一:装饰器 利用“装饰器只会执行一次”这个特点 def singleton(cls): instances = []# 为什么这里不直接为None,因为内部函数没法访问外部函数的非容器变量 def ...
- Spring MVC那点事儿
自问自答 1 Spring MVC的启动原理? spring mvc是基于ioc容器的,因此需要先创建IOC容器,才能创建对应的spring mvc执行环境. IOC容器是通过ContextLoade ...
- 自定义进度条PictureProgressBar——从开发到开源发布全过程
自定义进度条PictureProgressBar——从开发到开源发布全过程 出处: 炎之铠邮箱:yanzhikai_yjk@qq.com 本文原创,转载请注明本出处! 本项目JCenter地址:htt ...
- giihub上的关于js的43道题目
参考 https://github.com/lydiahallie/javascript-questions
- excel单元格内容合并
这几天在整理数据,有时候数据都在表格的不同单元格中,想把两格内容合并为一格,于是验证了两种方法 方法一: (1)在B1输入公式=A1&B1 (2)做完第一步后,选中B1后,鼠标移到单元格右下出 ...
- 使用 dbutils 的结果集包装类 StringTrimmedResultSet
1.功能 StringTrimmedResultSet 的功能是去掉结果集中数据的前后空格,这个方法是在取结果的时候处理. 2.使用 一般在新建 QueryRunner 对象的时候使用: QueryR ...
- 配置了SSH后还是每次都要求输入密码
保存凭证可以解决问题 git config --global credential.helper store
- 019 Remove Nth Node From End of List 删除链表的倒数第N个节点
给定一个链表,删除链表的倒数第 n 个节点并返回头结点.例如,给定一个链表: 1->2->3->4->5, 并且 n = 2.当删除了倒数第二个节点后链表变成了 1->2 ...
- View转换为Bitmap及getDrawingCache
View组件显示的内容可以通过cache机制保存为bitmap, 使用到的api有 void setDrawingCacheEnabled(boolean flag), Bitmap get ...