微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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;

}

css写的一些好看的网页

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。