css的常用操作示例

2020-11-27 来源：爱站旅游

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的常用操作示例