Home > Web Front-end > CSS Tutorial > Examples of common css operations

Examples of common css operations

黄舟
Release: 2016-12-28 16:23:25
Original
1403 people have browsed it

1, style alignment

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

2, style size

<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>
Copy after login
.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;  
}
Copy after login

3, navigation bar

<body>  
<ul>  
    <li><a>导航1</a></li>  
    <li><a>导航2</a></li>  
    <li><a>导航3</a></li>  
    <li><a>导航4</a></li>  
</ul>  
</body>
Copy after login
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;  
}
Copy after login

4, image display

<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>
Copy after login
* {  
    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;  
}
Copy after login

The above is css Contents of common operation examples. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template