欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css的常用操作示例

程序员文章站 2022-05-06 17:21:20
...

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)!

相关标签: css 常用操作