使用HTML+CSS制作一个简单的网页-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用HTML+CSS制作一个简单的网页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。

网页预览（网页中的图片与图标均来自阿里巴巴矢量图标库）
使用HTML+CSS制作一个简单的网页

CSS代码
里面包含悬浮、画面自适应等效果文章来源地址https://www.toymoban.com/news/detail-514472.html

* {
   
  box-sizing: border-box;
}
body {
   
	padding: 5px;
    background: #4682B4; 
}
.header {
   
	padding: 10px;
    background: #87CEEB;
	overflow: auto; 
}
.header a {
   
	text-decoration: none; 
}
.biaoti1 {
   
	display: inline-block;    
}
.relation {
   
	display: inline-block;
	float: right;
	margin: 18px 200px 0 0;
}
.relation a{
   
	text-decoration: none;
	color: #FFFACD;
}
.relation a:hover {
   
	color: blue;
}
.biaoti1 h1 {
   
	padding: 0 20px 0 20px;
	margin: 8px 8px 0 30px;
    font-family: Serif;
    font-size: 5vw;
	color: #FFFACD;
    text-shadow: 4px 4px 8px #8B4513;
}
.biaoti1 p {
   
	padding: 0 20px 0 20px;
	margin: 8px 8px 0 50px;
    font-family: Arial;
    font-size: 2vw;
	color: #FFFACD;
    text-shadow: 4px 4px 8px #8B4513;    
}
.logo {
   
	display: inline-block;
	margin: 8px 0 0 100px;
	max-width: 11%;
	height: auto;
	border-radius: 25px;	
}
.topnav {
   
	text-align:center; 
	overflow: hidden;
    background-color: #AFEEEE;
}
.topnav li {
   
	display: inline;
}
.topnav a {
   
    display: inline;
    color: #F8F8FF;
    text-align: center;
    padding:16px;
	font-family: Arial;
    text-decoration: none;
}
.topnav a:hover {
   
	background-color: #FFFACD;
    color: black;
}
.active {
   
	background-color: #4CAF50;
}
.row:after {
   
	content: "";
    display: table;
    clear: both;
}
.menubtn {
   
	background-color: #00BFFF;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.menu {
   
	overflow: visible
    position: relative;
    display: inline-block;
}
.menu-content {
   
	display: none;
	position: absolute;
	background-color: #FFFAF0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	padding: 0;
	margin: 12px 0 0 0;
	min-width: 140px;
}
.menu-content li {
   display: block;}
.menu-content a {
   
  color: black;
  text-align:left;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.menu-content a:hover {
   background-color: #f1f1f1}
.menu:hover .menu-content {
   
  display: block;
  background-color: white;
}
.menu:hover .menubtn {
   
  background-color: #FFFACD;
  color: black;
}
.content {
   
	float: left;
    width: 20%;
    padding: 10px;
 	height: 500px;
    font-size: 17px;
    letter-spacing: 2px;
    text-indent: 30px;
    line-height: 1.5;                                      
    border-radius: 9px;
    overflow: auto;
    background-color: #ADD8E6;
}
.content-main {
   
	float: left;
    width: 60%;
    padding: 10px;
 	height: 500px;
    font-size: 17px;
    letter-spacing: 2px;
    text-indent: 30px;
    line-height: 1.5;
    border-radius: 9px;
    overflow: auto;
    background-color: #D4F2E7;
}
.content:hover {
   
	background-color: #FFFACD;
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
.content-main:hover {
   
	background-color: #FFFACD;
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
@media screen and (max-width:1000px) {
   //画面自适应
  .row ,.leftcolumn ,.rightcolumn ,.row2 {
   
    width: 100%;  
  }
}
@media screen and (