css相关问题（一）

来源：互联网发布：mac网盘下载速度慢编辑：程序博客网时间：2024/06/05 09:13

一. html中表格table的内容居中显示
在表格td中，有两个属性控制居中显示
align——表示左右居中——left，center，right
valign——控制上下居中——left，center，right
这两个属性综合使用，就可以让单元格的内容上下左右都居中显示。
但是有的时候吧，会失效，那么在td中设置text-align为center也可。
td
{
text-align:center;
}

二. div 左右分栏排版怎么做

<html><head><style type="text/css">div{margin:0;padding:0}#container{width:800px;height:500px;border:1px solid #ccc;}#container .box1{width:380px;height:500px;float: left;background:red;}#container .box2{margin-left: 40px;width:380px;height:500px;float:left;background: green;}</style></head><body><div id="container"><div class="box1"></div><div class="box2"></div></div></body></html>

三.字体颜色

style="color:red"

四、长方形圆角

css3-圆角矩形的效果
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css圆角特效</title>
    <style>
        div{
            text-align: center;
            font-size: 32px;
            width: 100px;
            color: white;
            padding: 10px;
            margin: 10px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
        }
        .box1{
            background-color: black;
        }
        .box2{
            background: -webkit-gradient(linear,left top,left bottom,from(#000),to(#999));
            background: -moz-linear-gradient(top,red,blue);
        }
        .box3{
            background-color: blue;
            -webkit-box-shadow:3px 3px 5px #000;
            -moz-box-shadow: 3px 3px 5px #000;
        }
    </style>
</head>
<body>
    <div class="box1">圆角1</div>
    <div class="box2">圆角2</div>
    <div class="box3">圆角3</div>
</body>
</html>

0 0