UI自动化（四）css样式

最新推荐文章于 2022-06-09 21:01:46 发布

weixin_30530523

最新推荐文章于 2022-06-09 21:01:46 发布

阅读量276

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/wangtingting920416/p/10437184.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .c1{
            /*字体变粗 变大*/
            font-size: larger;
            font-weight: bolder;
        }
        .c2{
            height: 100px;
            width: 100px;
            /*1像素的红色实线边框*/
            border: 1px red solid;
            /*水平居中*/
            text-align: center;
            /*垂直居中*/
            line-height: 100px;
        }
        .c3{
            float: left;
        }
        .base{
            height: 100px;
            width: 100px;
            border: 1px red solid;
            /*background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');*/
            /*background-repeat: no-repeat; !* 不堆叠*!*/
            /*background-repeat: repeat-x;!* 横向堆叠*!*/
            /*background-repeat: repeat-y;!* 纵向堆叠*!*/
        }
        .c4{
            width: 100%;
            border: 1px blue solid;
        }
         .outer{
            width: 100%;
            height: 100px;
            border: 1px red solid;
        }
        .inner{
            width: 100%;
            height: 40px;
            background-color: aqua;
            /*外边距 不改变自身，针对外部进行移动*/
            /*margin-top: 1px;*/
            /*内边距 改变自身 */
            padding-top: 1px;
        }
        .header{
            background-color: aquamarine;
            /*width: 100%;*/
            height: 48px;
            /*分层绝对定位*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            line-height: 48px;
            text-align: center;
        }
        .c5{
            border: 1px red solid;
            height: 200px;
            width: 200px;
            position: relative;
        }
        .c6{
            background-color: black;
            height: 45px;
            width: 45px;
            /*postion的相对定位*/
            position: absolute;

        }
        .bp{
            width: 20px;
            height: 20px;
            border: 1px red solid;
            background-image: url('http://ui.imdsx.cn/static/image/icon.png');
            background-position: 10px 10px;
        }
    </style>
</head>
<body style="margin: 0">
<div class="c1">天秤座</div>
<div class="c2">1</div>
<!--<div class="base c3"></div>-->
<!--<div class="base c3"></div>-->
<div class="c4">
    <div style="width:100px;height: 100px;background-color: aqua;float: left"></div>
    <div style="width:100px;height: 100px;background-color: aqua;float: right"></div>
    <div style="clear:both"></div>
</div>
    <!--display 行内转块 块转行内-->
    <!--行内标签设置了宽高不生效-->
    <div class="base" style="display: inline">块转行内</div>
    <div class="base" style="display: inline-block">既是块又是行内</div>
    <span class="base" style="display: block;">行内转块</span>
    <!--隐藏元素-->
    <div class="base" style="display: none"></div>
    <!--外边距和内边距-->
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="base" style="margin-top: 10px"></div>
    <div class="base" style="margin-top: 10px"></div>
    <!--分层-->
    <div class="header">HTML</div>
    <div class="c5">
        <div class="c6" style="background-color: red;right: 0;top:0;"></div>
        <div class="c6" style="background-color: blue;right: 0;bottom: 0"></div>
        <div class="c6" style="background-color: black;z-index: 9"></div>
        <div class="c6" style="background-color: pink;z-index: 10"></div>
    </div>
    <!--修改鼠标的箭头样式-->
    <input type="button" value="登录" style="cursor: pointer">
    <!--overflow 如果div内的内容大于外部div的宽高自动出现滚动条-->
    <div class="base" style="overflow: auto">
        <img src="timg.jpg">
    </div>
    </div>
    <!--scroll 如果图小于外部div 会强制加上滚动条-->
    <div class="base" style="overflow: scroll">
        <img src="timg.jpg">
    </div>
    <!--hidden如果图片或内容大于外部div宽高，自动截图左上角-->
    <div class="base" style="overflow: hidden;">
        <img src="timg.jpg">
    </div>
    <div class="base" style=""></div>
    <div class="bp"></div>
</body>
</html>

转载于:https://www.cnblogs.com/wangtingting920416/p/10437184.html

weixin_30530523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UI自动化（四）css样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ /*字体变粗变大*/ font-size: l...
复制链接

扫一扫