首页 > > 网页制作 > css >

css

2019-04-30 23:39:16来源：博客园阅读 ()

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @font-face{
            font-family:myFont;
            src:url("本墨悠圆.ttf");
        }

        p{
            font-family: "myFont";
            font-size: 20px;
            font-style: italic;
            font-weight: bolder;
            color: #ff6e49;
            line-height: 100px;
            letter-spacing: 10px;
            text-decoration: none;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        div{
            width: 300px;
            height: 200px;
        }

    </style>
</head>
<body>
    <div>
        <p>字体相关属性-本墨悠圆-字体很多行-字体很多行-字体很多行-字体很多行-字体很多行</p>
    </div>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #myDiv{
            width: 600px;
            height: 400px;
            /*background-color: lightblue;*/
            background-image: url("baidu_jgylogo3.gif");
            background-repeat: no-repeat;
            background-attachment: scroll;
            border: 1px solid red;
        }

        .div2{
            width: 600px;
            height: 400px;
            border: 2px dashed blue;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>
    <div class="div2"></div>
    <div class="div2"></div>
    <div class="div2"></div>


</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .container{
            border: 2px dashed darkorange;
            width: 500px;
            position: absolute;
        }
        .demo{
            border: 2px solid blue;
            width: 300px;
            position: relative;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>aaaaaa</div>
        <div class="demo">bbbbbb</div>
        <div>cccccc</div>
    </div>

    <!--
    1.子元素有relative定位时，不脱离文档流
    2.子元素有absolute定位时，脱离文档流
    3.子元素有absolute定位时，参考1.父级元素定位 2.body原点定位
    4.子元素有relative定位时，参考1.自身原点定位

    -->
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{
            width: 300px;
            height: 200px;
            border: 1px solid red;
        }
        #div2{
            width: 400px;
            height: 200px;
            border: 2px dashed greenyellow;
            position: fixed;
            right: 100px;
        }
        .div3{
            width: 500px;
            height: 200px;
            border: 3px double burlywood;
        }

    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            position: fixed;
        }
        #myDiv1{
            z-index: 999;
        }


    </style>
</head>
<body>

<div id="myDiv1"><img src="jgz.jpg"/></div>
<div id="myDiv2"><img src="bkb.jpg"/></div>
<div id="myDiv3"><img src="ym.jpg"/></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 100px;
            border: 1px solid #0000FF;
            float: left;
        }
        #div2{
            width: 210px;
            height: 110px;
            border: 2px dashed #ff6e49;
            float: left;
            clear: both;
        }
        #div3{
            width: 220px;
            height: 120px;
            border: 3px double blueviolet;
            float: left;
        }

    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
           <style>
         #myDiv1{
             width: 300px;
             height: 200px;
             border: 3px dashed red;
             /*display: none; /!*消失*!/*/
             visibility: hidden; /*隐藏*/
         }

        #myDiv2{
            width: 300px;
            height: 200px;
            border: 3px dashed blue;
        }

    </style>
</head>
<body>

<div id="myDiv1"></div>
<div id="myDiv2"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #fruits{
            list-style-type: upper-roman;
            list-style-position: inside;
            list-style-image: url("icon.jpg");
        }
    </style>
</head>
<body>
<ul id="fruits">
    <li>香蕉</li>
    <li>哈密瓜</li>
    <li>无籽西瓜</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #myDiv{
            border: 2px #ff6e49 dashed;
            width: 400px;
            height: 300px;

            margin-bottom: 100px;
            padding: 50px;

            background-color: blueviolet;

            /*border-top: ;
              border-left: ;
            */

            /*border-style: solid dashed dotted groove;*/
            /*border-color: #626fff #ff3b2d;*/
            /*border-width: 10px 20px 30px 40px;*/
        }

        #div2{
            width: 400px;
            height: 300px;
            border: 2px red solid;
        }


    </style>
</head>
<body>
    <!-- 盒子模型将html中每一个元素看作为一个盒子，用几个属性描述这个盒子
        border 边框
            border类型：实线、虚线、双实线等
            border的粗细：通过px来描述
            border的颜色：通过color表示颜色
        margin 外边距
            width属性 外边距长：距离其他元素的距离，两个外边距是可以重叠的
        padding 内补丁
            width属性 内补丁长：边距距离内容的距离

    -->

    <div id="myDiv">aaa</div>
    <div id="div2"></div>
</body>