【html】简单网页模板源码

【html】简单网页模板源码

码农世界 2024-06-18 后端 96 次浏览 0个评论

大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用,大家也可以利用自己的想法去做空间的美化和完善。

源码:

html:



	
		
		
		Document
		
	
	
		
			
XXX官网
网页主体
版权信息

css:

* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}
.container {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100vh;
}
header {
	background-color: #000;
	color: #fff;
	padding: 10px;
	text-align: center;
}
main {
	display: flex;
	flex: 1;
}
.sidebar {
	flex: 1;
	background-color: #f5f5f5;
	padding: 20px;
}
.content {
	flex: 3;
	padding: 20px;
}
footer {
	background-color: #000;
	color: #fff;
	text-align: center;
	padding: 10px;
}
ul {
	max-width: 1000px;
	display: flex;
	margin: auto;
	display: flex;
	justify-content: center;
}
ul li {
	margin-left: 50px;
	list-style-type: none;
	list-style-position: inside;
	height: 40px;
	line-height: 40px;
}
ul li a {
	text-decoration: none;
}

代码中的左右侧边栏可根据需要打开 

转载请注明来自码农世界,本文标题:《【html】简单网页模板源码》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,96人围观)参与讨论

还没有评论,来说两句吧...

Top