css常用综合案例

最新推荐文章于 2023-05-09 12:51:21 发布

booooooooooooooooooo

最新推荐文章于 2023-05-09 12:51:21 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/liubo2012/article/details/8580765

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.基本css样例

1.圆角

效果图：

设计思想，利用一组高为1px的块状元素逐行缩进，达到圆角的效果。这里使用b元素（简单只有一个字母）。圆角边框示意图：

源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #container{
            margin:0 20%;
            background: #9bd1fa;
        }
        b.rtop, b.rbottom{
            display: block;
            background:#fff; /*设置白色为背景色*/
        }
        b.rtop b, b.rbottom b {
            display:block;
            height:1px;
            overflow: hidden;
            background:#9bd1fa;/*在白层上涂上新的颜色*/
        }
        b.r1 {margin: 0 5px}
        b.r2 {margin: 0 3px}
        b.r3 {margin: 0 2px}
        b.r4 {margin: 0 1px; height:2px;}

        h2, p {padding:10px;}
        h2 {text-align:center}
    </style>
</head>
<body >
   <div id="container">
       <b class="rtop">
            <b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
       </b>
       <h2>this is a title</h2>
       <p>this is content of this page!</p>
       <b class="rbottom">
           <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
       </b>
   </div>

</body>
</html>

2.frame排版页面

网页包含标题区，左侧导航菜单，主内容区，footer页脚区域。

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #container{
            width:90%;
            margin: 0 auto;
            background-color: #fff;
            border: 1px solid gray;
            color: #333;
            line-height: 130%;
        }
        #top{
            padding:.5em;
            background-color:#ddd;
            border-bottom:1px solid gray;
        }
        #top h1{
            padding:0;
            margin:0;
        }
        #leftnav{
            width: 160px;
            margin:0;
            padding:1em;
            float:left;
        }
        #leftnav p{margin:0 0 .5em 0;}
        #content{
            margin-left:200px;
            border-left:1px solid grey;
            padding:1em;
            max-width:40em;
        }
        #content h2{ margin:0 0 .5em 0;}

        #footer{
            clear:both;
            margin:0;
            padding: .5em;
            color:#333;
            background-color:#ddd;
            border-top:1px solid grey;
        }
        #footer p{margin: 0; padding: 0;}
    </style>
</head>
<body >
    <div id="container">
        <div id="top">
            <h1>this's ad parts.</h1>
        </div>
        <div id="leftnav">
            <ul>
                <li><a href="#">menu1 </a></li>
                <li><a href="#">menu2 </a></li>
                <li><a href="#">menu3 </a></li>
            </ul>
        </div>
        <div id="content">
            <h2>this is the main title</h2>
            <p>this is the content.</p>
            <p>...</p>
        </div>
        <div id="footer">
            <p>this is the footer parts.</p>
        </div>
    </div>
</body>
</html>

3,简单的导向菜单条

先上效果图了

包含四个文件：home.html,menu.html,contract.html和menu.css,其中前三个文件结构是一致的。

home.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="menu.css">
</head>
<body id="home">
    <div id="menu">
        <ul>
            <li><a href="home.html" class="home">主页</a></li>
            <li><a href="search.html" class="search">search</a></li>
            <li><a href="contact.html" class="contact">contact us</a></li>
        </ul>
    </div>
    <div id="content">
        this the content of the main frame!
    </div>
</body>
</html>

home.html,menu.html,contract.html的差别在于body标签的id的差异

home.html------><body id="home">

menu.html------><body id="menu">

contract.html------><body id="contract">

menu.css的代码如下：

#menu{
    margin:0;
    padding:0;
}

#menu li{
    padding:0;
    margin:0;
    list-style: none; /*取消列表项符号*/
    float:left; /*横向左排列 */
}

#menu li a{
    display:block; /* 块状显示，以便背景色填充*/
    margin:0 1px 0 0;
    padding:4px 10px;
    width:80px;
    background:#5970B2;
    color:#fff;
    text-align:center;
    text-decoration: none; /*取消下划线*/
}

#menu li a:hover{
    background:#49A3FF;
}

#content{
    clear:both; /*清除横向标识*/
    margin:10px;
}

#home a.home, #search a.search, #contact a.contact{
    background:#49A3ff;
    text-decoration: none;
    cursor:default;
}

4.简单的标签菜单

效果图：

同样包含四个文件

包含四个文件：home.html,menu.html,contract.html和menu.css,其中前三个文件结构是一致的。

home.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="menu.css">
</head>
<body id="home">
    <div id="menu">
        <ul>
            <li class="home"><a href="home.html" >主页</a></li>
            <li class="search"><a href="search.html" >search</a></li>
            <li class="contact"><a href="contact.html" >contact us</a></li>
        </ul>
    </div>
    <div id="content">
        this the content of the main frame!
    </div>
</body>
</html>

menu.css代码：

#menu ul{
    margin:0 10px; /*起始标签缩进10px； */
    padding:5px 0;
}

#menu li{
    padding:5px 15px;
    list-style: none; /*取消列表项符号*/
    /*float:left; 横向左排列 */
    display:inline; /*横向排列*/
    background-color: #d5d0ba;
    border-right:1px solid #666;
}

#menu li a{
    /*display:block;  块状显示，以便背景色填充
    margin:0 1px 0 0;
    padding:4px 10px;
    width:80px;
    background:#5970B2;*/
    color:#776655;
    /*text-align:center;*/
    text-decoration: none; /*取消下划线*/
}

#menu li a:hover{
    background:#49A3FF;
}

 body{
     background: #f5deb3;
 }

#content{
    background:#fff;
    height:500px;
    padding:10px;
}

#home li.home, #search li.search, #contact li.contact{
    border-bottom:1px solid #fff;
    background:#fff;
}

#home li.home a, #search li.search a, #contact li.contact a{
    color:#000;
}

booooooooooooooooooo

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css常用综合案例

一.基本css样例 1.圆角效果图：设计思想，利用一组高为1px的块状元素逐行缩进，达到圆角的效果。这里使用b元素（简单只有一个字母）。圆角边框示意图：源码如下： #container{ margin:0 20%;
复制链接

扫一扫

专栏目录