分类目录归档:CSS技巧

CSS技巧

如何CSS脚本将ul中li标签横向居中呢?


摘要:
下文讲述使用css脚本对li标签进行横向居中的示例分享,如下所示:

实现思路: 
     使用display:inline即可实现横向显示
     使用text-align:center即可实现居中显示

例:

<meta charset='utf-8' />
<p>
  maomao365.com <br />
  li元素横向居中示例分享
</p>
<hr />
<style>
#divTest{
  text-align:center;
}
ul li
{
    list-style-type:none;
    display:inline;
}
</style>
    <div id="divtest">
    <ul >
    <li>菜单--1</li>
    <li>菜单--2</li>
    <li>菜单--3</li>
    <li>菜单--4</li>
    <li>菜单--5</li>
    </ul>
    </div>
css ul li元素横向居中的示例分享

css ul li元素横向居中的示例分享

如何使用css脚本将h1,h2,h3,h4,h5标签下的字体变细呢?


摘要:
下文讲述使用css脚本将h1 h2 h3 h4 h5这些特殊标签下的字体变正常的方法分享,如下所示:

实现思路: 
  使用css font-weight:normail即可使字体变细

例:
将html页面中的标题标签字体变细的示例分享

 
 <meta charset='utf-8' />
<p>
 maomao365.com <br />
 css 将 h1,h2,h3,h4,h5标签下的字体变细的示例分享
</p>
<hr />
<style>
h1{ font-weight:normal}
h2{ font-weight:normal}
h3{ font-weight:normal}
h4{ font-weight:normal}
h5{ font-weight:normal}
</style>
<h1>猫猫教程-h1-变细示例</h1>
<h2>猫猫教程-h2-变细示例</h2>
<h3>猫猫教程-h3-变细示例</h3>
<h4>猫猫教程-h4-变细示例</h4>
<h5>猫猫教程-h5-变细示例</h5>
css 将h标签下的字体变细的方法分享

css 将h标签下的字体变细的方法分享

css中如何对不确定(未知)大小的图片进行垂直和水平居中呢?


摘要:
下面讲述css将未知图片大小进行垂直和水平居中的方法分享,如下所示:

css代码中,当一个图片放入div标签中,在标准浏览器中我们可以使用line-height和vertical-align:middle将图片居中,
但是在IE中有时无效,我们可以采用以下方法进行处理,如下所示:

.box{ 
  height:230px;
  width:300px;
  border:solid 1px blue;
  text-align:center;/*水平居中*/
  line-height:230px; 
} 
img{
   vertical-align:middle;/*标准浏览器图片垂直居中*/
}