CSS综合练习

最新推荐文章于 2024-04-08 20:58:22 发布

流萤free

最新推荐文章于 2024-04-08 20:58:22 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_46331127/article/details/117695134

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Div+css综合练习

一、css小动画
二、Div+css练习

一、css小动画

这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭

别的不说了，代码粘起来，希望可以帮到你！

 <style>
             #box1{
                 margin: 0 auto;
                 width: 500px;
                 height: 500px;
                 background-color:rgb(6, 192, 248);
                 /* position: absolute;
                 left: 200px; */
             }
             #box{
                 width: 100px;
                 height: 100px;
                
                background-color: red;
                animation-name: move;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                position: absolute;
                top:200px;
                }
                 @keyframes move
                 {
                  /* 初始状态 */
                0%{
                 transform: translate(0px,0px);
                 border-radius: 100%;
                }
                50%{
                transform: translate(200px,0x);
                border-radius: 0%;
                }
                /* 终止状态 */
                100%{
                transform: translate(400px,0px);
                background-color: rgb(216, 151, 12) ;
                border-radius: 100%;
                }
                }
         </style>
<body>
    <div id="box1">
        <div id="box"></div>
    </div>
    
</body>

运行结果图大概就是这样，但是ta是一个小小的动画，会动的哦！复制过去运行一下叭！！！
在这里插入图片描述

二、Div+css练习

回归正题，下面要为大家展示的是的一个css的综合练习。

来，author，把代码炸出来：

这个是HTML文件的代码：

<body>
	<div id="m-body">
    	<div id="title">DIV + CSS布局示例</div>
        
        <div id="nav">
        	<ul>
            	<li>首页</li>
                <li>导航菜单</li>
                <li>导航菜单</li>
                <li>导航菜单</li>
                <li>导航菜单</li>
            </ul>
        </div>
        
        <div>
        	<div id="side">
            	<div class="item">
                    <p class="title">侧边栏标题</p>
                    <ul>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                    </ul>
                </div>
                
                <div class="item">
                    <p class="title">侧边栏标题</p>
                    <ul>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                        <li>菜单名称</li>
                    </ul>
                </div>
            </div>
            
            <div id="content">
            	<div class="item">
                	<p class="title">栏目标题</p>
                    <ul>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                    </ul>
                </div>
                
                <div class="item">
                	<p class="title">栏目标题</p>
                    <ul>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                    </ul>
                </div>
                
                <div class="item">
                	<p class="title">栏目标题</p>
                    <ul>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                    </ul>
                </div>
                
                <div class="item">
                	<p class="title">栏目标题</p>
                    <ul>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                        <li><a href="#">栏目中文章的标题</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="clear"></div>
        </div>
        <div id="footer">版权声明 2013.6</div>
    </div>
</body>

css文件的代码：

* {font-size:12px; margin:0px; padding:0px;}
body {margin:0px;}
li {list-style:none;}

a {color:black;text-decoration:none;}
a:hover {color:#C00; text-decoration:underline;}


.clear {clear:both;}

#m-body {width:960px; margin:0px auto; border:1px dashed silver; border-width:0px 1px; background-color:#EEE;}

#title {height:100px; font-size:32px; font-family:黑体,sans-serif; line-height:100px; padding-left:50px;
background-color:#CCC;}

#nav {height:30px; line-height:30px; background-color:#333; color:#FFF; margin:5px 0px;}
#nav ul {margin-left:20px;}
#nav li {float:left; margin:0px 10px;}

#side {float:left; width:200px; padding:0px 5px;}
#side .item {border:1px solid #CCC; margin-bottom:20px;}
#side .item .title {height:30px; line-height:30px; background-color:#CCC; font-size:14px; padding-left:10px;}
#side .item ul {margin-left:15px;}
#side .item li {margin:10px 0px;}

#content {float:left; width:720px; margin-left:10px; padding-left:10px; border-left:1px dotted #CCC; min-height:500px;}
#content .item {width:320px; margin:7px; padding:10px; float:left; background-color:#FFF;}
#content .item .title {line-height:16px; font-size:16px; padding-left:8px; margin-bottom:10px; font-family:黑体,sans-serif;}
#content .item ul {margin-left:10px;}
#content .item li {line-height:22px;}

#footer {height:20px; line-height:20px; padding:5px 15px; margin:5px 0px; background-color:#333; color:#FFF; text-align:right; }

结果非常精炼，没有花里胡哨的图片：
在这里插入图片描述

如果你对如何综合运用我们之前讲述的知识完成一个实际的网页设计还感到无从下手，相信仔细研读这个例子后会有所帮助，并可以学到一些未提到的知识和技巧。

最后，最好的学习就是一边学习一边练习，希望你们快速提高叭！！！！！！！！！！！！

流萤free

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS综合练习

Div+css综合练习一、css小动画二、Div+css练习一、css小动画这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
复制链接

扫一扫