前端-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 宽度、高度、内容水平居中，垂直居中　

1     height:          　　 高度  像素 百分比（高度百分比直接使用有问题，要配合父级标签）
2     width：         　　  宽度  像素 百分比
3     text-align       　　 水平方向居中
4     line-height：38px  　 垂直方向，根据标签高度居中 
5     color        　　　　  字体颜色
6     front-size  　　 　　  字体大小
7     front-weight 　　　　  字体加粗
   <div style="
             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; 50%;float: left">1</div>
    <div style="background-color: aqua; 30%;float:right">2</div>
    <div style=" 300px;border: red solid;">
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="clear: both"></div>

    </div>
float

 3.4 display

行内标签：无法设置宽度（默认文本占多少就是多少），长度，边距
块级标签：可以设置宽度（默认宽度就是占一行），高度，边距

1     display none 让标签消失
2     display inline
3     display block
4     display inline-block
5             具有linline的默认的宽度
6             又具有block的设置高度

 3.5 边距

magrin 内边距

pading 外边距  增加自己本身

1         <div style="border: red 1px solid; 60px;height: 60px;">
2             <div style="height: 30px; 60px;background-color: blue;padding-top: 0px">123<div>
3         </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=" 40px;height: 40px;background-color: aqua;position: fixed;bottom: 10px;right: 10px;line-height: 40px;">TOP</div>

    <div style="margin-top:52px; 100%;height: 1000px;background-color: #dddddd">内容：我在哪</div>
    <div class="caidan">首页</div>

</body>
View Code

 3.7 图层  透明度 索引

　　在使用position以后，margin：0 auto的居中方式会失效：

　后期，js一点就出现的按钮 可以通过图层加上 display：none 一起操作

z-index：图层索引，越大就在顶端

opacity：不透明度
1    <div style="top:20%;left:50%;margin-left: -50px; margin-top:-50px; 200px;height: 50px;position: fixed;background-color: white;z-index: 10"></div>
2    <div style="z-index:8; 100%;height: 5000px;background-color: black;"></div>
3    <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：把超出部分隐藏起来

1 <div style=" 200px;height: 200px;overflow: auto">
2     <img src="1.jpg">
3 </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>
View Code

3.10 backgroud-imag 背景图片

当一个页面中使用多个小图片，加载多个图片，可以把小图片做到一张图片里面，这样就省下了很多下载链接;

1     <div style="background-image: url(tip.png);
2         background-repeat: no-repeat;
3          20px;
4         height: 30px;
5         background-position-x: 0px;
6         background-position-y:-100px ;
7     "></div>

 3.11 小练习-登入加图片

    <div style=" 200px;height:40px;position: relative;">
        <input type="text" style="font-size:25px;font-weight:lighter;200px;height:40px;padding-right: 26px">
        <div style="height:40px;40px;position: absolute;right:-44px;top:6px;background-image: url(user.png);background-repeat: no-repeat"></div>
    </div>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/louhui/p/8025778.html