css的常用操作示例
程序员文章站
2022-05-02 16:11:37
...
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）！