일반적인 CSS 작업의 예-CSS 튜토리얼-php.cn

일반적인 CSS 작업의 예

黄舟

풀어 주다： 2016-12-28 16:23:25

원래의

1403명이 탐색했습니다.

1, 스타일 정렬

.div {  
    width: 70%;  
    height: 1000px;  
    background-color: red;  
    position: relative;  
    left: 15%;  
    right: 15%;  
    /*margin: 10px auto;*/  
}

로그인 후 복사

2, 스타일 크기

<body>  
<p class="p1">hell world html5 hell world html5</p>  
<p class="p2">hell world html5 hell world html5</p>  
<p class="p3">hell world html5 hell world html5</p>  
<ul>  
    <li>111111</li>  
    <li>222222</li>  
    <li>33333333</li>  
</ul>  
</body>

로그인 후 복사

.p1 {  
    width: 200px;  
    /*行高*/  
    line-height: normal;  
}  
  
.p2 {  
    width: 200px;  
    line-height: 20px;  
    /*元素 是否显示*/  
    visibility: visible;  
}  
  
.p3 {  
    width: 200px;  
    line-height: 50%;  
    /*鼠标焦点 显示*/  
    cursor: cell;  
}  
  
li {  
    /*元素是否显示，如何显示 块元素还是内联元素*/  
    display: inline;  
}

로그인 후 복사

3, 탐색바

<body>  
<ul>  
    <li><a>导航1</a></li>  
    <li><a>导航2</a></li>  
    <li><a>导航3</a></li>  
    <li><a>导航4</a></li>  
</ul>  
</body>

로그인 후 복사

ul {  
    list-style-type: none;  
    margin: 0px auto;  
    padding: 0px;  
    width: 300px;  
    background-color: chocolate;  
    text-align: center;  
}  
  
li {  
    /*none不显示,block作为块元素，  
    inline内联元素，元素前后没有换行符,  
    inherit规定应该从父元素继承 display 属性的值*/  
    display: inline;  
    padding: 10px;  
}  
  
a:link, a:hover {  
    background-color: aqua;  
    text-decoration: none;  
    width: 50px;  
    text-align: center;  
}  
  
a:visited, a:active {  
    background-color: blue;  
}

로그인 후 복사

4, 그림 표시

<body>  
<div class="content">  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
  
</div>  
</body>

로그인 후 복사

* {  
    margin: 0px;  
    padding: 0px  
}  
  
body {  
    width: 70%;  
    height: auto;  
    margin: 0px auto;  
}  
  
img {  
    width: 100px;  
    height: 100px;  
    border: 1px solid black;  
}  
  
.text {  
    text-align: center;  
    background-color: chocolate;  
    width: inherit;  
}  
  
.div {  
    width: auto;  
    border: 1px solid red;  
    padding: 1px;  
    height: auto;  
    margin: 5px;  
    float: left;  
}

로그인 후 복사

위 내용은 일반적인 CSS 연산 예제 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!