css写的一些好看的网页

在当今的互联网时代，网页设计和页面排版对于网站的重要性越来越突出。作为网页设计的重要工具之一，CSS在设计中起着重要的作用，可以让网页的外观焕然一新。下面将为大家介绍一些使用CSS写的好看的网页，希望对大家的网页设计有所启发。

/*网页一*/
body {
  background-color: #ECECEC;
}

h1 {
  font-size: 4rem;
  font-weight: 700;
  color: #FF4B38;
  text-align: center;
  margin-top: 5rem;
}

p {
  font-size: 2.5rem;
  line-height: 1.5;
  color: #444;
  text-align: center;
  margin-top: 2rem;
}

button {
  font-size: 2rem;
  border-radius: 30px;
  background-color: #FF4B38;
  color: white;
  border: none;
  padding: 1rem 2rem;
  margin-top: 5rem;
  cursor: pointer;
}

/*网页二*/
body {
  background-color: #F8F8F8;
}

h1 {
  font-size: 3rem;
  color: #FF6978;
  text-align: center;
  margin-top: 3rem;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 3rem;
}

.card {
  width: 30%;
  min-width: 200px;
  background-color: white;
  border-radius: 20px;
  Box-shadow: 0px 5px 10px rgba(0,0.2);
  margin-bottom: 2rem;
}

.card__img {
  width: 100%;
  border-radius: 20px 20px 0px 0px;
}

.card__content {
  padding: 2rem;
}

.card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1rem;
}

.card__desc {
  font-size: 1rem;
  line-height: 1.5;
  color: #666;
}

/*网页三*/
body {
  background-color: #292F36;
}

h1 {
  font-size: 5rem;
  color: white;
  text-align: center;
  margin-top: 10rem;
}

.container {
  display: flex;
  justify-content: center;
  font-size: 2rem;
  margin-top: 5rem;
}

.link {
  color: white;
  text-decoration: none;
  margin-right: 5rem;
  cursor: pointer;
}

.link:hover {
  color: #BFBFBF;

}

这些代码可以让网页设计的排版更加优美，让网站更加吸引人的眼球。当然，要想成为一名优秀的网页设计师，还需要不断学习和实践。希望大家可以通过这些例子，不断地从中学习、借鉴和创造，打造出属于自己的好看网页。