举个栗子:css样式的运用

css样式的表达效果及其运用

方法/步骤

  1. 1

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8"> 

    <title>文章标题</title> 

    </head>

    <body>

    这是一个DIV元素

    </body>

    </html>

    运行结果如下

    举个栗子:css样式的运用

  2. 2

    如果添加div元素标签如下,

    <div>这是一个 DIV 元素。</div>

    <div id="div2">这是一个 DIV 元素。</div>

    我们看运行结果

    举个栗子:css样式的运用

  3. 3

    给第一个盒子添加css

    div

    {

    width:100px;

    height:75px;

    background-color:blue;

    border:1px solid black;

    }

    运行结果如下

    举个栗子:css样式的运用

  4. 4

    给第二个盒子添加css

    div#div2

    {

    transform:rotate(30deg);

    -ms-transform:rotate(30deg); /* IE 9 */

    -webkit-transform:rotate(30deg); /* Safari and Chrome */

    }

    举个栗子:css样式的运用

  5. 5

    两个盒子均加入css,显示效果如下

    举个栗子:css样式的运用

  6. 6

    注意样式引入要在head标签里

    举个栗子:css样式的运用

  7. 7

    另外,就是浏览器兼容问题啦

    举个栗子:css样式的运用END

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

栗子博客 网站 举个栗子:css样式的运用 https://www.lizi.tw/web/1517.html

建筑工地上施工员,闲暇时弄个博客打发时间,

常见问题
  • 1、杰齐1.7仅适用于PHP5.2 2、需Zend支持 3、尽量使用宝塔面板 4、尽量使用Windows 系统,关关对Linux支持不太友好。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

举个栗子:css样式的运用-海报

分享本文封面