CSS样式常见样式

1、高度和宽度

默认情况下，高度和宽度无法应用在行内标签上。

 默认情况下，块级标签虽然设置的宽度，右边空白区域也不许被占用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--块级标签-->
  <div style="height:100px;width:200px;background-color:red">中国移动</div>
  <div style="height:100px;width:200px;background-color:green">中国联通</div>
<!--行内标签-->
  <span style="height:100px;width:200px;background-color:pink">中国联通</span>
<!--行内标签转换成块级标签-->
    <span style="display:block;height:100px;width:200px;background-color:pink">中国联通</span>
</body>
</html>

 2、行内和块级标签

1）块级标签：

2）行内标签：无法应用高度和宽度

转换前代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--块级标签-->
<div>块级标签</div>
<!--行内标签-->
<span>行内标签</span>
<div style="display:inline-block;height: 100px;">行内标签有块级标签的特点</div>
</body>
</html>

转换后代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--块级标签转换为行内标签-->
<div style="display:inline;">块级标签</div>
<!--行内标签转换为块级标签-->
<span style="display:block;">行内标签</span>
<div style="display:inline-block;height: 100px;background-color:red;">行内标签有块级标签的特点</div>
</body>
</html>

3、文本对齐方式

1）文本水平方向：style=text-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--text-align:水平方向对齐方式-->
  <h1 style="text-align: left">左边</h1>
  <h1 style="text-align: right">右边</h1>
  <h1 style="text-align: center">中间</h1>
</body>
</html>

2）文本垂直方向：line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--垂直方向对齐-->
    <h1 style="text-align: center;width:500px;height:200px;background-color:olive;line-height:200px">垂直对齐</h1>
</body>
</html>

 案例：米商城如下图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .header{
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;

            line-height:40px;
        }
        .header a{
            display:inline-black;
            text-align:center;
            color: #b0b0b0;
            text-decoration:none;
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="https://www.mi.com/index.html">小米商城</a>
        <a href="https://www.miui.com/" target="_blank">MUMI</a>
        <a href="https://iot.mi.com/" target="_blank">IoT</a>
        <a href="https://i.mi.com/" target="_blank">云服务</a>
    </div>
</body>
</html>

对于颜色的处理：使用RGB颜色对照表：https://www.917118.com/tool/color_3.html

4、外边距（两人离远一点）margin

margin-top：10px； /* 距上边*/
margin-left：10px； /* 距左边*/

margin：10px;   /* 距上下左右边*/

margin:10px 20px;   /* 距上下边10px 左右边20px*/

margin:10px 20px 30px 40px;   /* 距上边10px 右边20px 下边30px 左40px  --> 顺时针方向*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
    </style>
</head>
<body>
  <div style="background-color: red;height: 100px"></div>
  <div style="background-color: green;height: 100px;margin-top:10px;"></div>
</body>
</html>

  特殊的margin，左右边距自动=>标签居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login-box{
            height: 300px;
            width: 500px;
            background: gray;
            # 左右居中;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="login-box"></div>
</body>
</html>

 常见布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .header{
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;

            line-height:40px;
        }
        .header a{
            display:inline-black;
            text-align:center;
            color: #b0b0b0;
            text-decoration:none;
        }
        .container{
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a href="https://www.miui.com/" target="_blank">MUMI</a>
            <a href="https://iot.mi.com/" target="_blank">IoT</a>
            <a href="https://i.mi.com/" target="_blank">云服务</a>
            <a href="https://i.mi.com/" target="_blank" style="float: right">商城</a>
        </div>
    </div>

</body>
</html>

5、内边距（一个人吃胖一点），自己会变大。

padding-left: 10px;  //内边距距离左边10

padding：10px；  //内边距距离上下左右10

padding：10px 20px；  //内边距距离上下10 距离左右20

padding：10px 20px 30px 40px；  //内边距距离上10 距离右20 距离下30 距离左40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .header{
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;

            line-height:40px;
        }
        .header a{
            display:inline-black;
            text-align:center;
            color: #b0b0b0;
            text-decoration:none;
        }
        .container{
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
        .header .menu{
            padding: 0 20px; //设置内边距
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a class="menu" href="https://www.miui.com/" target="_blank">MUMI</a>
            <a class="menu" href="https://iot.mi.com/" target="_blank">IoT</a>
            <a class="menu" href="https://i.mi.com/" target="_blank">云服务</a>
            <a class="menu" href="https://i.mi.com/" target="_blank" style="float: right">商城</a>
        </div>
    </div>

</body>
</html>

 关于内外边距的提示：

行内标签设置外边距和内边距都是无效的注意使用 display:inline-black;

 6、float，页面布局必不可少的一个样式，让标签左右飘。 float可以让标签浮动展示，脱离文档流。

1）标签向左瓢

如上的效果代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .item{
            height: 270px;
            width: 180px;
            background-color: olive;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="course">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

2）标签左右瓢

 如上的效果代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div style="width: 500px;">
        <div style="float: left">瓢向左边</div>
        <div style="float: right">瓢向右边</div>
    </div>
</body>
</html>

没有瓢：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div style="background-color: green">
        <div>瓢了么？</div>
    </div>
</body>
</html>

如果瓢：使用笨方法处理（<div style="clear: both"></div>）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div style="background-color: green">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>

<!--        飘了我再给拉回来-->
        <div style="clear: both"></div>
    </div>
</body>
</html>

 如果瓢：使用聪明的方法处理（after伪类）

 先了解after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:before{
            content: "他们和";
        }
        li:after{
            content:"打篮球";
        }
    </style>
</head>
<body>
    <ul>
        <li>周杰伦</li>
        <li>刘耕宏</li>
    </ul>
</body>
</html>

  使用after处理瓢的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .bg{
          background-color: green;
        }
        .bg:after{
          display: block;
          content: '';
          clear: both;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
</body>
</html>

上面只是处理一个，要是很多该怎么处理？如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .bg,.xxx,.hhhh{
          background-color: green;
        }
        .clearfix:after{
          display: block;
          content: '';
          clear: both;
        }
    </style>
</head>
<body>
    <div class="bg clearfix">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
    <div class="xxx clearfix">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
    <div class="hhhh clearfix">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
</body>
</html>

 7、hover 鼠标悬停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
        color: red;
      }
      .c1:hover{
        color:green;
      }
    </style>
</head>
<body>
  <div class="c1">中国移动</div>

</body>
</html>

鼠标悬停后效果

 小米案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .top{
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .clearfix:after{
          display: block;
          content: '';
          clear: both;
        }
        .top a{
            display: inline-block;
            line-height: 40px;
            color: #b0b0b0;
            font-size: 12px;

            text-decoration: none;
        }
        .top a:hover{
            color:white;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="container clearfix">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a href="https://www.miui.com/">MUMI</a>
            <a href="https://iot.mi.com/" >IoT</a>
            <a href="https://i.mi.com/" >云服务</a>
            <div style="float: right">
                <a>登录</a>
                <a>注册</a>
            </div>
        </div>
    </div>
</body>
</html>

效果如下图：

8、小米logo菜单案例

 

 

 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .top {
            background: #333;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .clearfix:after {
            display: block;
            content: '';
            clear: both;
        }

        .top a {
            display: inline-block;
            line-height: 40px;
            color: #b0b0b0;
            font-size: 12px;

            text-decoration: none;
        }
        .top a:hover {
            color: white;
        }

        .hd .logo {
            float: left;
            width: 234px;
        }
        .hd .main-menu{
            float: left;
        }
        .hd .main-menu a{
            display: inline-block;
            padding: 40px 20px;
            color: #333;
            text-decoration: none;
        }
        .hd .main-menu a:hover{
            color: #ff6700;
        }
        .hd .search{
            float: right;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="container clearfix">
        <a href="https://www.mi.com/index.html">小米商城</a>
        <a href="https://www.miui.com/">MUMI</a>
        <a href="https://iot.mi.com/">IoT</a>
        <a href="https://i.mi.com/">云服务</a>
        <div style="float: right">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>
</div>
<div class="hd">
    <div class="container clearfix">
        <div class="logo">
            <a href="" style="height: 56px;width: 56px;display: inline-block;margin-top: 20px">
                <img src="imgs/logo-mi2.png" alt="" style="width: 100%">
            </a>
        </div>
        <div class="main-menu">
            <a href="https://www.mi.com/index.html">Xiaomi手机</a>
            <a href="https://www.mi.com/index.html">Redmi手机</a>
            <a href="https://www.mi.com/index.html">电视</a>
            <a href="https://www.mi.com/index.html">笔记本</a>
            <a href="https://www.mi.com/index.html">平板</a>
        </div>
        <div class="search">
            asdfghj
        </div>
    </div>
</div>
<div class="banner">
    <div class="container">
        <a href="" style="width: 1226px;">
            <img src="imgs/b1.png" alt="" style="width: 100%">
        </a>
    </div>
</div>
</body>
</html>

9、边框border实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 300px;
            border: 1px solid #ff6700;
            /*border-right: 1px solid #ff6700;
            border-bottom: 1px solid #ff6700;*/
        }
    </style>
</head>
<body>
    <div class="c1">边框</div>
</body>
</html>

9.1、场景：当鼠标移到到某一字体上出现下滑线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 300px;
            border: 1px solid #ff6700;
            /*border-right: 1px solid #ff6700;
            border-bottom: 1px solid #ff6700;*/
        }
        .menu{
            display: inline-block;
            padding: 10px;
            margin-right: 20px;

            border-bottom: 2px solid transparent;
        }
        .menu:hover{
            border-bottom: 1px solid #333;
        }
    </style>
</head>
<body>
<div>asdfghjk</div>
<div class="c1">边框</div>
<a class="menu">菜单1</a>
<a class="menu">菜单2</a>
<a class="menu">菜单3</a>
<div>123456789</div>
</body> </html>

9.2、场景：边框的圆角设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 10px 20px;
            border: 1px solid #ff6700;
            border-radius: 50px;  /* 设计圆角半径*/
            text-decoration: none;
            background-color: #b0b0b0;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" class="btn">点击跳转百度</a>
</body>
</html>

10、position定位的使用

10.1、fiexed固定定位：永远固定在窗口的指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 5000px;background-color: #b0b0b0">返回顶部案例</div>
    <div style="position: fixed;right: 10px;bottom: 10px;">返回顶部111</div>
</body>
</html>

 案例：登录窗体所在页面的正中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login-box{
            border: 1px solid red;
            height: 300px;
            width: 500px;
            margin: 0 auto;

            position: fixed;
            left: 0;
            right: 0;
            top: 200px;
        }
    </style>
</head>
<body>
    <!--登录窗体所在页面的正中间-->
    <div class="login-box">
        登录窗体
    </div>
</body>
</html>

案例：登录窗体+遮罩层+内容层

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .middle{
            position: fixed;
            background: #333333;
            left: 0px;
            right: 0;
            top: 0px;
            bottom: 0px;
            opacity: 0.7;
            z-index: 100;
        }
        .outer{
            position: fixed;
            background-color: white;
            height: 100px;
            width: 500px;
            left: 0px;
            right: 0px;
            margin: 0 auto;
            top: 200px;
            z-index:101;
        }
    </style>
</head>
<body>
<!--内容层-->
    <div style="height: 5000px;">
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
    </div>
<!--最外层z-index:101 值越小表示该部分在最底层-->
<div class="outer">登录窗体</div>
<!--中间层遮罩层-->
<div class="middle"></div>
</body>
</html>

10.2、absolute 绝对定位&relative相对定位

右边弹窗的出现随左边的按钮移动而变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--relative相当于是父，absolute相当于子-->
    <div style="height: 500px; width: 500px;border: 1px solid red;position: relative;">
        <div style="position: absolute;right: 0;top: 0;">xxx</div>
    </div>
</body>
</html>

 

posted @ 2022-06-01 17:52  思江  阅读(227)  评论(0)  编辑  收藏  举报