CSS3特效页面设计

页面结构

参考资料

2d转换效果


<!DOCTYPE html> <html> <head> <style> div
		{
   
			margin:30px;
			width:300px;
			height:200px;
				
		}
		div img{
   
			width:100%;
			height:100%;
		}
		div:hover{
   
			transition:all 1s;
			//transform:rotate(360deg);
			transform:scale(1.1,1.1);
		}
		</style>
</head>
<body>

<div><img src="building.jpg"></img></div>

</body>
</html>

CSS3过度效果


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div
	{
   
		width:100px;
		height:100px;
		background:yellow;
		transition:width 2s;
	}

	div:hover
	{
   
	    width:300px;
	}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

</html>

导航栏


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <style> .nav_css{
   
     width:100%;
	 height:40px;
	 background:#eeeeee;
	}
	.ul_css{
   
	 list-style:none;
	}
    .ul_css li{
   
		float:left;
		width:100px;
		line-height:40px;
		text-align:center;
	}
   .ul_css li:hover{
   
		background:rgb(127,127,255);

	}

  </style>
 </head>
 <body>
	<article>
  	<header>
			<nav class="nav_css">
				<ul class="ul_css">
					<li><a href="#">链接一</a></li>					
					<li><a href="#">链接二</a></li>	
					<li><a href="#">链接三</a></li>									
					
				</ul>				
			</nav>
		</header>
	</article>
 </body>
</html>

派生选择符


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>派生选择符</title> <style> div p{
   
			color:blue;
		}

		.div_css p {
   
			color:red;
		}

		.div_css{
   
			font-size:28px;
		}

	</style>
 </head>
 <body>
    <div class="div_css">
       <p>第一段落</p>
	</div>
    <div>
      <p>第二段落</p>
	</div>
 </body>
</html>

伪类使用


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类使用</title> <style> a:link,a:visited,a:hover,a:active {
   
		text-decoration:none;
		color:#000000;
	}
	a:hover {
   
		color:red;
	}
</style>
 </head>
 <body>
  <a href="#">点击访问</a>
  
 </body>
</html>

代码实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学校简介</title> <style> .nav_css {
   
            width: 100%;
            height: 60px;
            background: rgb(143, 0, 11);/*设置背景颜色*/
            background-image: url("logo.png");
            background-repeat: no-repeat;/*设置背景不重复*/
        }

        .ul_css1 {
   /*设置任务栏的字体颜色与距离*/
            margin-left: 220px;
            list-style: none;
            color: rgb(255, 255, 255);
        }

        .ul_css1 li {
   
            float: left;
            width: 100px;
            line-height: 60px;
            text-align: center;
        }

        .ul_css1 li:hover {
   
            background: rgb(29, 73, 192);
        }

        .ul_css2 {
   
            list-style: none;
            margin: 0 auto;
        }

        .ul_css2 li {
   /*控制图片大小以及间距*/
            margin-left: 50px;
            width: 400px;
            height: 250px;
            float: left;
            overflow: hidden;
        }

        .ul_css2 li img {
   /*填充图片，并充满整个画面，并且图片浮动在左边*/
            width: 100%;
            height: 100%;
            float: left;
        }

        .tu1:hover {
   /*缩放*/
            transition: all 2s;
            transform: scale(1.2, 1.2);
            overflow: hidden;/*溢出隐藏*/
        }

        .tu2:hover {
   /*向下*/
            transition: all 2s;
            transform: translateY(250px);
            overflow: hidden;
        }

        .tu3:hover {
   /*旋转*/
            transition: all 2s;
            transform: rotate(360deg);
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!--143,0,11  29,73,192-->
    <article style="margin: 0 auto;"><!--上下为0，左右为auto-->
        <header>
            <nav class="nav_css">
                <ul class="ul_css1"><!--ul定义无序列表-->
                    <li>首页</li>
                    <li>学校概况</li>
                    <li>机构设置</li>
                    <li>学院系所</li>
                </ul>
            </nav>
        </header>
        <div style="width: 1000px; margin: 0 auto;"><!-- 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。-->
            <h1 style="text-align:center">学校简介</h1>
            <p style="text-indent:2em">
                湖南中医药大学坐落于中国历史文化名城长沙，是湖南省重点建设本科院校，
                是全国首批设立国家级重点学科的高校，也是首批招收博士研究生、留学生及港澳台学生的中医药院校。
                校（院）共有四大区（含浦新校区、砂子塘老校区、溁湾镇研究院南院、桐子坡研究院北院），总占地面积1400余亩，建筑面积56.8万平方米，主校区依岳麓南坡，临湘江西岸，环境幽雅，风光秀丽，是求学成才的理想之地。
            </p>
        </div>
        <div>
            <ul class="ul_css2">
                <li><img src="image1.png" class="tu1"></li>
                <li><img src="image2.png" class="tu2"></li>
                <li><img src="image3.png" class="tu3"></li>
            </ul>
        </div>
    </article>
</body>

</html>

实现界面

高中的语文老师说过，如果你爱一个人，不是下课给人家买买水，不是短信发来发去，也不是周末一起出来唱唱歌聊聊天吃吃饭。而是做一个出色的人，以后的以后，可能还有别的人爱她，你要做的是把别人都比下去，你要变得优秀，要比其他人都优秀。 你要相信，爱情能改变现实。