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 ...
随机推荐
- eclipse中导入项目后提示错误:The project was not built due to"Could not delete'/文件夹路径名
eclipse中导入项目 1.新建一个项目: 2.把已存在的项目的所有文件复制到该新建的项目下: 3.把lib文件夹中的jar导入:(右键-)add into path……): 4.常见问题如下 ec ...
- wpf listboxitem添加下划线
1.通过List<string>进行赋值,没有字段绑定 // 前台xaml <ListBox x:Name="list1"> <ListBox.Ite ...
- qemu-nbd使用教程
服务端 服务器环境 已经安装过qemu-img的32位ubuntu ubuntu@ubuntu-virtual-machine:~/laboratory$ uname -a Linux ubuntu- ...
- restfull知识点
网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......).因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致API ...
- flask-sqlalchemy中 backref lazy的参数实例解释和选择
官方文档:http://docs.sqlalchemy.org/en/rel_1_0/orm/basic_relationships.html#relationship-patterns 最近在学习到 ...
- 置换群（本蒟蒻瞎BB的）（未完）
置换群(本蒟蒻瞎BB的)(未完) 群的定义 给定一个集合\(G=\{a, b, c...\}\)和集合\(G\)上的二元运算*,并满足: 封闭性:\(\forall a, b \in G, \exis ...
- Maven的相关知识及使用
一.简介 maven: 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的,Maven是跨平台的项目管理工具. 1.自动化构建和项目管理工具 Ant→Make→Maven ...
- thinkphp5.1使用支付宝接口（沙箱环境）
接口文件以及沙箱的测试账号可以去支付宝开发中心获取,下面给出一个简单地例子 我新建了一个控制器Pay用来专门做支付 <?phpnamespace app\index\controller; us ...
- LDAP相关操作注意事项
lc.Modify(entry.DN, new LdapModification(LdapModification.REPLACE, new LdapAttribute("mDBUseDef ...
- HQL和SQL
hql是面向对象查询,格式:from + 类名 + 类对象 + where + 对象的属性 sql是面向数据库表查询,格式:from + 表名 + where + 表中字段 1.查询 一般在hiber ...