CSS基本操作

时间：2015-04-05 20:24:01 阅读：131 评论：0 收藏：0 [点我收藏+]

标签：

1：导航栏制作

　技术分享

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: 微软雅黑;
            text-align: center;
        }

        hgroup{
            margin-bottom: 10px;
        }
        nav{
            background: #ff6600;
            height: 48px;
        }
        a{
            color: #f60;
            text-decoration: none;
        }
        nav li{
            float:left;
            background: #000000;
            border-radius: 5px;  /*圆角*/
            padding :6px 10px; /*先上下 后左右*/
            margin:10px;
            list-style:none;  /*去掉前面的点*/

        }
        footer
        {
            width:auto;
            margin: 50px auto;
        }
        footer a
        {
            color: red;
        }
    </style>
</head>
<body>
<header>
    <hgroup>
        <h1>HTML视频教程</h1>
        <a href="/">[手机版]</a>
        <a href="/">[HTML5论坛]</a>
    </hgroup>
    <nav>
            <ul>
                <li>
                    <a href=".">首页</a>
                </li>
                <li>
                    <a href=".">手机版</a>
                </li>
                <li>
                    <a href=".">论坛</a>
                </li>
            </ul>
    </nav>
</header>
<footer>
        <a href="">版权信息</a>
        <a href="">关于我们</a>
        <a href="">联系我们</a>
</footer>
</body>
</html>

2：图片制作

技术分享

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 10px auto;
            width: 70%;
            height: auto;
            background-color: burlywood;
        }

        .image{
            border: 1px solid darkgray;
            width: auto;
            height: auto;
            float: left;
            text-align: center;
            margin: 5px 7px ;
        }

        img{
            margin: 5px;
            opacity: 0.9;
        }

        .text{
            font-size: 12px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="image">
        <a href="#" target="_self">
            <img src="1.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="2.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="3.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="4.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="5.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="1.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="2.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="3.jpg" width="150px" height="150px">
            <div class="text">如此优美的风景</div>
        </a>
    </div>
</body>
</html>

CSS基本操作

标签：

原文地址：http://www.cnblogs.com/lipeng0824/p/4394652.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行