zoukankan      html  css  js  c++  java
  • CSS实例

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>圆形的头像示例</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          background-color: #eeeeee;
        }
        .header-img {
           150px;
          height: 150px;
          border: 3px solid white;
          border-radius: 100%;
          overflow: hidden;
        }
        .header-img>img {
          max- 100%;
        }
      </style>
    </head>
    <body>
    
    <div class="header-img">
      <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
    </div>
    
    </body>
    </html>
    圆形头像实例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>滚动背景图示例</title>
        <style>
            * {
                margin: 0;
            }
            .box {
                 100%;
                height: 500px;
                background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
                background-attachment: fixed;
            }
            .d1 {
                height: 500px;
                background-color: tomato;
            }
            .d2 {
                height: 500px;
                background-color: steelblue;
            }
            .d3 {
                height: 500px;
                background-color: mediumorchid;
            }
        </style>
    </head>
    <body>
        <div class="d1"></div>
        <div class="box"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </body>
    </html>
    背景图片固定不动
  • 相关阅读:
    小学生需要不断练习的四则运算题,在编程者的手上竟然会变成。。。
    在学习紧张的时候不如放松下来听听歌曲练练单词
    3.基础语法(变量,字符转义和注释)
    .NET基础
    初学.NET
    第七次实验作业
    自我介绍
    第七次实验总结
    第二次实验总结
    实验作业总结
  • 原文地址:https://www.cnblogs.com/fu-yong/p/8525885.html
Copyright © 2011-2022 走看看