前端-css

时间：2023-03-08 16:21:26

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

     height:          　　 高度  像素 百分比（高度百分比直接使用有问题，要配合父级标签）

     width：         　　  宽度  像素 百分比

     text-align       　　 水平方向居中

     line-height：38px  　 垂直方向，根据标签高度居中

     color        　　　　  字体颜色

     front-size  　　 　　  字体大小

     front-weight 　　　　  字体加粗
   <div style="

            width: 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;width: 50%;float: left">1</div>

    <div style="background-color: aqua;width: 30%;float:right">2</div>
    <div style="width: 300px;border: red solid;">

        <div style="border: blue solid;width: 96px;height: 30px;float: left"></div>

        <div style="border: blue solid;width: 96px;height: 30px;float: left"></div>

        <div style="border: blue solid;width: 96px;height: 30px;float: left"></div>

        <div style="border: blue solid;width: 96px;height: 30px;float: left"></div>

        <div style="border: blue solid;width: 96px;height: 30px;float: left"></div>

        <div style="clear: both"></div>

    </div>

float

3.4 display

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

     display none 让标签消失

     display inline

     display block

     display inline-block

             具有linline的默认的宽度

             又具有block的设置高度

3.5 边距

magrin 内边距

pading 外边距  增加自己本身

         <div style="border: red 1px solid;width: 60px;height: 60px;">

             <div style="height: 30px;width: 60px;background-color: blue;padding-top: 0px">123<div>

         </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="width: 40px;height: 40px;background-color: aqua;position: fixed;bottom: 10px;right: 10px;line-height: 40px;">TOP</div>

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

    <div class="caidan">首页</div>

</body>

3.7 图层  透明度 索引

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

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

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

opacity：不透明度
    <div style="top:20%;left:50%;margin-left: -50px; margin-top:-50px;width: 200px;height: 50px;position: fixed;background-color: white;z-index: 10"></div>

    <div style="z-index:8;width: 100%;height: 5000px;background-color: black;"></div>

    <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：把超出部分隐藏起来

 <div style="width: 200px;height: 200px;overflow: auto">

     <img src="1.jpg">

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

3.10 backgroud-imag 背景图片

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

     <div style="background-image: url(tip.png);

         background-repeat: no-repeat;

         width: 20px;

         height: 30px;

         background-position-x: 0px;

         background-position-y:-100px ;

     "></div>

3.11 小练习-登入加图片

    <div style=" width:200px;height:40px;position: relative;">

        <input type="text" style="font-size:25px;font-weight:lighter;width:200px;height:40px;padding-right: 26px">

        <div style="height:40px;width:40px;position: absolute;right:-44px;top:6px;background-image: url(user.png);background-repeat: no-repeat"></div>

    </div>

相关文章