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 ...

随机推荐

Note: EnclaveDB: A Secure Database using SGX
EnclaveDB uses SGX security properties to secure database operations. Why The cloud database is cont ...
Docker 企业级镜像仓库 Harbor 的搭建与维护
目录一.什么是 Harbor 二.Harbor 安装 2.1.Harbor 安装环境 2.2.Harbor安装 2.3 配置HTTPS 三.Harbor 的使用 3.1.登录Harbor并使用 3. ...
Boost Python学习笔记（一）
开发环境搭建下载源码 boost_1_66_0.tar.gz 生成编译工具 # tar axf boost_1_66_0.tar.gz # cd boost_1_66_0 # yum install ...
The Little Prince
Chapter 1 That is why, at the age of six, I gave up what might have been a magnificant career as a p ...
Go:一个可能导致锁失效的坑
先看代码: package main import( "sync" ) var hclock sync.RWMutex func main() { a := make(map[in ...
uva 1615 高速公路（贪心，区间问题）
uva 1615 高速公路(贪心,区间问题) 给定平面上n个点和一个值D,要求在x轴上选出尽量少的点,使得对于给定的每个点,都有一个选出的点离它的欧几里得距离不超过D.(n<=1e5) 对于每个 ...
fastJson Gson对比及java序列化问题
一个案例 POJO没有set方法, 造成反序列化时出现NPE问题.实际场景:POJO是第三方提供的,final public class XJSONTest { public static void ...
Pandas处理数据常用方法
# -*- coding: utf-8 -*-import pandas as pd"""(1)利用pandas读取csv文件"""def ...
asp.net web 开发中配置web.config
一.配置数据库连接字符串 <connectionStrings> <add name="CaoLPractise" connectionString=" ...