扁平化demo

最新推荐文章于 2023-02-22 11:00:00 发布

置顶 x_小邪

最新推荐文章于 2023-02-22 11:00:00 发布

阅读量246

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33664573/article/details/52788675

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--<style>
 http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   css重置

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table { 
	border-collapse: collapse;
	border-spacing: 0;
}
-->
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">   	
<style>
	@charset "utf-8";
/* CSS Document */
/*.navigation{
padding:5px;
background-color:#033;
height:80px;
	}
.logo-content a, .logo-list a{
text-decoration:none;
	}
.logo-content, .logo-list{
list-style:none;
	}
.logo li a{
border-radius:20px;
	box-shadow:5px 5px 2px #CCC;	
	}
.logo-content a{
float:left;
color: #FFF;
font-size: 24px;
height:inherit;	
	}

.logo-list a{
padding-right:5px;
height:inherit;
float:right;
color:#fff;
font-size:20px;
padding-top:5px;

	}*/

#banner{
	padding:15px;
background:#FF3;
height:700px;
}
#banner .inner  h1{
margin:0;
}
#banner .inner{
max-width:300px;
text-align:center;
margin:0 auto;
position:relative;
top:160px;
}
button{
border:none;
background:#333;
color:#eee;
padding:10px 20px ;
}
#banner .inner .more{
margin-top:200px;
}
.sub-heading, .gray-text{
line-height:30px;
margin:20px 0;
}

.icon-group{

}
.green-section .icon-group .icon{
display:inline-block;
width:80px;
height:80px;
background:#000;
transform:rotate(45deg);
-ms-transform:rotate(45deg); 	/* IE 9 */
-moz-transform:rotate(45deg); 	/* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); 	/* Opera */margin:20px;
background:#0FC;	
}
.icon-normal{
	padding-right:21px;
	padding-top:21px;
	letter-spacing:5px;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); 	/* IE 9 */
-moz-transform:rotate(-45deg); 	/* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); 	/* Opera */
	
	}
.wrapper{
max-width:1000px;
margin:50px auto;
}
.hr{width:100%;
height:2px;
margin:20px auto;
}
.green-section{
	background:#036;
	text-align:center;
	color:#FFF;
	padding:100px 0;
}
.green-text h2{margin:0 auto;
}
.green-section .hr{
	width:80%;
	background-color: #6CF;
}
.gray-section{
	background:#033;
	padding:100px 0;
	color:white;
}
.gray-wrapper{
max-width:1200px;
	height:480px;
	}

.gray-img a img{
	position:relative;
	
	width:100%;
	height:60%;

	}
.gray-text{
text-align:center;
	width:100%;

		
		}

.footer{background:#999;
}
.footer p{
	text-align:center;
	margin:20px;
	}
   nav .hello{
    position: relative;
    min-height: 50px;
    margin-bottom: 0;
    border: 1px solid transparent;
}

</style>
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

</head>

<body>
<!--
<div class="navigation">
<ul class="logo">
<li class="logo-content"><a href="#">blog</a></li>
<li class="logo-list"><a href="#">one</a></li>
<li class="logo-list"><a href="#">two</a></li>
<li class="logo-list"><a href="#">three</a></li>
<li class="logo-list"><a href="#">four</a></li>
<li class="logo-list"><a href="#">main</a></li>	
</ul>
</div>
-->
<nav class="navbar-default hello" role="navigation">
	 
	<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">JAVA</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">UI</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			WEB <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="../../bootstrap应用示例/html.html" title="点我看html">HTML</a></li>
			<li><a href="../../bootstrap应用示例/css.html" title="点我看css">CSS</a></li>
			<li><a href="../../bootstrap应用示例/javascript.html" title="点我看图片轮播">JS</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</li>
	<li><a href="#">C++</a></li>
</ul>

</nav>

<div id="banner">
<div class="inner">
	
<h1 id="timer">hello</h1>

<p class="sub-heading" id="timer">
Looking out for a new horizon	
Reaching out I can almost see the place
Holding on with the heart that's frozen
In the dark but I am not afraid
No I am not afraid</p>
<a href="#imgshow"><button>了解我</button></a>
<div class="more">更多</div>
</div>
</div>
<div class="content">
<section class="green-section">
<div class="wrapper">
<div class="green-text"><h2>Lions in the wild</h2>
<div class="hr"></div>
<p class="sub-heading">Looking out for a new horizon
　　眺望远处天空的轮廓
　　Reaching out I can almost see the place
　　伸手双手 几乎可以触碰到那片热土
　　Holding on with the heart that's frozen</p>
</div>
<div class="icon-group">
<p><button id="change">隐藏/显示</button></p>
<span class="icon"><p class="icon-normal">博客</p></span>
<span class="icon"><p class="icon-normal">日志</p></span>
<span class="icon"><p class="icon-normal">退出</p></span>
</div>
</div>
</section>

<section class="gray-section">
<div class="gray-wrapper ">
<div class="gray-img col-lg-6  col-sm-8 col-xs-10 col-md-4">
<a name="imgshow"><img src="../picture/pic01.jpg"></a>
</div>
<div class="gray-text col-lg-6 col-sm-8 col-xs-10 col-md-8">
<h2 class="soft" >标题二</h2>
<p class=" soft" style="text-indent:20px;">
Looking out for a new horizon
眺望远处天空的轮廓,Reaching out I can almost see the place,伸手双手 几乎可以触碰到那片热土,Holding on with the heart that's froze
</p>
</div>
</div>
</section>
</div>
<div class="footer col-lg-12 col-sm-12 col-xs-12 col-md-12">
<p>
© mytest.COM 版权所有<br/> 
学习软件开发，找慕课! 
</p>
</div>
<script>


var myTime=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("timer").innerHTML=t;
}
$("#change").click(
function(){
$(".icon").toggle();
});

</script>
</body>
</html>

x_小邪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
扁平化demo

无标题文档 http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) css重置*//* html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockq
复制链接

扫一扫