html5+css+js完成简单页面（顶部+底部）

最新推荐文章于 2023-01-17 16:32:52 发布

S_yeol

最新推荐文章于 2023-01-17 16:32:52 发布

阅读量806

点赞数

文章标签： css es6 html5

本文链接：https://blog.csdn.net/qq_45228525/article/details/105990293

版权

【效果图】
一、关键代码：
1.demo.html

	<title>我的第一个界面</title>
</head>
<body>
	<div class="content">
		<div class="header">
			<div class="search-warp">
				<div class="iconfont  icon-baseline-search-px"></div>
				<input class"input-wrap" type="search" placeholder="请输入内容">
		</div>
		</div>
		<div class="name">
			3177102502 曾怡
		</div>
	</div>
		<div class="footer">
			<div class="batBar">
				<div class="iconfont icon-home myicon"></div>
				<div class="iconfont icon-message myicon"></div>
				<div class="iconfont icon-share myicon"></div>
				<div class="iconfont icon-home myicon"></div>
			</div>
		</div>
	</div>
</body>

2.demo.css @BK-color:#708090;

.content{
width:100%;
height:100%;
}
.header{
width:100%;
height:70px;
position:fixed;
left:0;
top:0;
background: @BK-color;
}
.search-warp{
display:flex;
flex-direction:row;
align-items:center;
margin-left:15px;
margin-top:20px;
height:30px;
background:white;
width:80%;
border-radius:10px;
}

.input-wrap{
width:80%;
border:none;
outline:none;
}
.footer{
width:100%;
height:40px;
position:fixed;
left:0;
bottom:0;
background: @BK-color;
}
.batBar{
width:100%;
display:flex;
flex-direction:row;
justify-content:space-around;
margin-top:5px;
}
.myicon{
font-size:28px;
line-height:28px;
color:black;
}
.name{
text-align:center;
line-height:200px;
}
二、总结
从iconfont的使用中可以了解这是很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。优点是：自由变化大小、自由修改颜色、可以添加一些视觉效果如：阴影、旋转、透明度并且兼容IE6。
从CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。它的作用可以达到:(1)在几乎所有的浏览器上都可以使用。(2)以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。(3)使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。(4)你可以轻松地控制页面的布局。(5)你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。