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 ...
随机推荐
- idea中，使用facets添加完web后，项目已变为web项目，但web.xml中内容经常变为红色，并报错，如何解决？
这中错误经常是由于配置facets并添加完web后,没有进一步配置web.xml文件,导致web.xml是使用系统默认的. 如图:需要进一步配置web.xml文件,使用我们src/main/webap ...
- ZOJ 2849【瞎暴力的搜索】
思路: 靠评测机抖一抖的思路: 拿个队列维护一下符合类型的可以搜索(指四周还存在可以遍历的点)的点.然后暴力搜索,所以问题来了,这个暴力搜索会大大地重复遍历次数. DFS遍历图以前一直忽略重复,以为搜 ...
- PHP连接 redis
<?php //连接本地的 Redis 服务 $redis = new Redis(); //连接redis 地址 端口 连接超时时间 连接成功返回true 失败返回false $redis-& ...
- CAS客户端整合（四）-- Cacti
Cacti 是一套纯 lnmp 搭建的服务器监控系统,用 SNMP 抓取数据,RRDTool 绘制表格 登录流程 Cacti 的登录同样是先判断session,再尝试从 cookie 读取 sessi ...
- [Xcode 实际操作]四、常用控件-(11)UIDatePicker日期时间选择器
目录:[Swift]Xcode实际操作 本文将演示日期拾取器的使用. 使用日期拾取器,可以快速设置和选择日期与时间. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] ...
- 今天来记录一下关于ajax跨域的一些问题。以备不时之需。
今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...
- 快速搭建angular7 前端开发环境
第一步:全局安装 Angular CLI (1)打开npm(终端)安装angular-cli 第二步:创造工作区和初始应用 (1)运行命令 ng new my-app 第三步:启动开发服务器 (1)c ...
- 一些有关PyCharm使用总结
目前在这里,你能看见 license server Python版本配置 添加另外版本的Python 设置字体大小 关于编码 关于模版 安装好之后,第一个问题就是 license server 问题, ...
- ThrowableUtil
public class ThrowableUtil { public static Throwable getDeepestCause(final Throwable throwable) { in ...
- Scala_Load csv data to hive via spark2.1_via pass parameters_HiveAllType
prepare CSV data NT,col_SMALLINT,col_BIGINT,col_INT,col_FLOAT,col_DOUBLE,col_DECIMAL,col_TIMESTAMP,c ...