• 欢迎访问举个栗子网站
  • 小说APP下载 xsz.tw 不带广告的小说站

举个栗子:css样式的运用

网站 举个栗子 2年前 (2017-11-16) 310次浏览 0个评论 扫描二维码

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


举个栗子 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:举个栗子:css 样式的运用
喜欢 (0)
举个栗子
关于作者:
建筑工地上施工员,闲暇时弄个博客打发时间,
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址