小试牛刀-星空桌面

最新推荐文章于 2024-08-27 15:05:59 发布

llyinghua

最新推荐文章于 2024-08-27 15:05:59 发布

阅读量165

点赞数

分类专栏：前端H5

本文链接：https://blog.csdn.net/llyinghua/article/details/79750653

版权

前端H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<hello world!>

刚接触博客其实自己也在琢磨中学习，所以就当是给自己踏出第一步的鼓励吧

下面是自己参考资料做的一个界面，可能有很多不足，不过接下来会继续努力学习的。

HTML5代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mac桌面</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="Mac桌面.css">
</head>
<body>
	<div id="top">
		<ul class="top-left">
            <li><a href="" class="glyphicon glyphicon-apple"></a></li>
            <li><a href="">520IT</a></li>
            <li><a href="">文件</a></li>
            <li><a href="">编辑</a></li>
            <li><a href="">显示</a></li>
            <li><a href="">帮助</a></li>
        </ul>
        <ul class="top-right">
            <li class="glyphicon glyphicon-volume-up"></li>
            <li class="glyphicon glyphicon-align-left"></li>
            <li class="glyphicon glyphicon-question-sign"></li>
            <li class="glyphicon glyphicon-leaf"></li>

        </ul>

	</div>
    <div id="content">
        <div class="file">
            <img src="imgs/file.png">
            <p>资料</p>
        </div>
        <br>
        <div class="file">
            <img src="imgs/file.png">
            <p>文档</p>
        </div>
        <br>
        <div class="file">
            <img src="imgs/file.png">
            <p>数据</p>
    </div>
    <div id="footer">
        <div class="dock">
            <ul>
                <li><a href="#"><img src="imgs/zurb-icon.png"></a></li>
                <li><a href="#"><img src="imgs/linkedin-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/notable-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/lastfm-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/facebook-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/google-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/notable-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/lastfm-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/facebook-icon.png"></a> </li>
                <li><a href="#"><img src="imgs/google-icon.png"></a> </li>
            </ul>
        </div>
    </div>

</body>
</html>

css代码如下：

* {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
a {
	color: black;
}
body {
	background: url("./imgs/111.jpg");
	background-size: cover;
	padding-top: 100px;
}
#top {
	background-color: rgba(241,241,241,0.8);
	height: 44px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	line-height: 44px;
	font-size: 18px;
}
#top .top-left {
	display: inline-block;
}
#top .top-left li {
	float: left;
	margin-left: 8px;
}
#top .top-right {
    float: right;
}
#top .top-right li {
    margin-right: 8px;
}
/*中间的内容*/
#content .file {
	color: white;
	text-align: center;
	display: inline-block;
	margin-left: 18px;
}
#content .file img {
	width: 100px;
}
#footer {
	height: 66px;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
}
#footer .dock {
	width: 60%;
    height: 100%;
    background: url("./imgs/dock_bg.png");
    margin: 0 auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    opacity: 0.8;
    text-align: center;
    line-height: 66px;
}
#footer .dock ul, #footer .dock ul li {
	display: inline-block;
}
#footer .dock img {
	width: 50px;
	margin: 0 5px;
}
#footer .dock ul li:hover {
	/*位置参照*/
	transform-origin: center bottom;
	/*2D变形*/
	transform: scale(1.5);
}

最后实现的功能界面如下：