CSS Color

最新推荐文章于 2024-04-18 14:13:00 发布

xiao哈哈哈

最新推荐文章于 2024-04-18 14:13:00 发布

阅读量566

点赞数

分类专栏： HTML and CSS

本文链接：https://blog.csdn.net/rong05151005/article/details/72780524

版权

HTML and CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码示例：

index.html
<!DOCTYPE html>
<html>
<head>
  <title>The Best Coffee - By Region</title>
  <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <div class="header">
    <h1>The Best Coffee Regions</h1>
  </div>

  <ul>
    <li>
      <h2>Brazil</h2>
      <p>Arabica dominates both Brazil and the world as a whole with about 85% of the production; robusta accounts for the remaining 30%. In Brazil, arabica production is located in the main coffee-growing cluster of states led by Rio where arabica is
        produced almost exclusively. Robusta is primarily grown in the northwestern much smaller state of Espirito Santo where about 80% of the coffee is robusta.</p>
      <a href="#">Learn More about Brazil</a>
    </li>
    <li>
      <h2>Colombia</h2>
      <p>Colombia has a reputation as producing mild, well balanced coffee beans.Colombia's average annual coffee production of 11.5 million bags is the third total highest in the world, after Brazil and Vietnam; though highest in terms of the arabica
        bean. The beans are exported to United States, Germany, France, Japan, and Italy. Most coffee is grown in the Colombian coffee growing axis region.</p>
      <a href="#">Learn More about Colombia</a>
    </li>
    <li>
      <h2>India</h2>
      <p>Indian coffee, grown mostly in southern India under monsoon rainfall conditions, is also termed as Indian monsooned coffee". Its flavor is defined as: "At its best similar to the flavor characteristics of Pacific coffees, but at its worst bland and uninspiring. The two well known species of coffee grown are the Arabica and Robusta. Probably the most commonly planted Arabica in India and Southeast Asia is S.795.</p>
      <a href="#">Learn More about India</a>
    </li>
    <li>
      <h2>Ethiopia</h2>
      <p>Ethiopian beans can be divided into 3 categories: Longberry, Shortberry, and Mocha. Longberry varieties consist of the largest beans and are often considered of the highest quality in both value and flavor. Shortberry varieties are smaller. The Mocha variety is a highly prized commodity. Mocha Harars are known for their peaberry beans that often have complex chocolate, spice and citrus notes.</p>
      <a href="#">Learn More about Ethiopia</a>
    </li>
    <li>
      <h2>Costa Rica</h2>
      <p>Costa Rican coffee beans are considered among the best in the world. Tarrazu is thought to produce the most desirable coffee beans in Costa Rica. In 2012, Tarrazu Geisha coffee became the most expensive coffee sold by Starbucks in 48 of their stores in the United States, using the Clover automated French press. The finest coffee is typically grown at altitudes of 1200 to 1700 meters.</p>
      <a href="#">Learn More about Costa Rica</a>
    </li>
    <li>
      <h2>Kenya</h2>
      <p>The acidic soil in highlands of central Kenya, just the right amount of sunlight and rainfall provide excellent conditions for growing coffee plants. Coffee from Kenya is of the 'Colombia mild' type, and is well known for its intense flavor, full body, and pleasant aroma with notes of cocoa and high grade coffee from Kenya is one of the most sought-after coffees in the world.</p>
      <a href="#">Learn More about Kenya</a>
    </li>
  </ul>

</body>
</html>

style.css
body {
  padding: 0;
  margin: 0;
  background: #f7f7f7;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
}

/** Header styles **/

.header {
  color:rgb(3,150,100);
  color:rgba(3,101,100,0.75);

  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg");
  height: 400px;
  background-position: center center;
}

h1 {
   background-color:Aqua;

  font-family: 'Covered By Your Grace', sans-serif;
  font-size: 100px;
  line-height: 76px;
  margin: 0;
  position: relative;
  text-align: center;
  top: 20%;
}

/** List style **/

h2 {
  color: #E4BB97;
  background-color:#AA8EB5;
  font-family: 'Raleway', sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
}

ul {
  margin: 0 auto;
  padding: 0;
  width: 50%;
}

li {
  border-bottom: 1px solid #E4BB97;
  list-style: none;
  margin: 100px 0px;
  padding-bottom: 60px;
}

p {
  color: #444444;
  line-height: 32px;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 100;
}

a {
  color: #214E34;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

xiao哈哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Color

代码示例：index.html The Best Coffee - By Region The Best Coffee Regions Brazil Arabica dominates both Brazil and the world as a whole with about 85% of the pro
复制链接

扫一扫

专栏目录