HTML+CSS 学习笔记-优快云博客

本文介绍了HTML和CSS的基础知识，并通过三个实例演示了如何使用这两种语言创建网页布局和样式。涉及的技术包括网页结构搭建、背景设置、响应式设计等。

3.30日更新

HTML + CSS 是组成前端网页的基础语言。HTML语法用来搭建网页的structure, 而CSS syntax和rules 用来美化网站的内容。

网页中的“一切都是盒子”的设计思想，可以方便网页的最初方案设计，同时盒子的分割和替换可以使得网页的设计具有更大的灵活性。

语法的总结

上一周在DASH网站做了三个入门的网页，贴出来相关的代码进行一些知识点的整理：

<!DOCTYPE html>
<head>
  <title>Anna Dowlin</title>
  <style>
    body {
      text-align: center;
      background: url("http://dash.ga.co/assets/anna-bg.png");
      background-size: cover;
      background-position: center;
      color: white;
      font-family: helvetica;
    }
    
    p{
      font-size: 22px;
    }
    input{
      border: 0;
      padding: 10px;
      font-size: 18px;
    }
    
    input[type="submit"]{
      background: red;
      color: white;
    }
  </style>
</head>
<body>
  <img src="/assets/anna.png">Anna Dowlin</h1>
  <p>Hi! I'm Anna, a NYC-based marketer. Say hello!</p>
  <input type="email" placeholder="Your email">
  <input type="submit">
</body>

<!DOCTYPE html>
<head>
  <link href="/normalize.css" rel="stylesheet">
  <style>
    header {
      text-align: center;
      background: url('http://dash.ga.co/assets/jeff-bg.png');
      background-size: cover;
      color: white;
    }
    a {
      color: white;
    }
    h1 {
      font-size: 70px;
    }
    img {
      margin: 40px 0px 0px 0px;
      border: 7px solid white;
      border-radius: 20px;
    }
    ul {
      padding: 10px;
      background: rgba(0,0,0,0.5);
    }
    li {
      display: inline;
      padding: 0px 10px 0px 10px;
    }
    article{
      max-width: 500px;
      padding: 20px;
      margin: 0 auto;
    }
    @media (max-width: 500px) {
      h1{
        font-size: 36px;
      }
      li{
        display: block;
        padding: 5px;
      }
      body{
        background: red;
      }
    }
  </style>
</head>
<body>
  <header>
    <img src="/assets/jeff.png">
    <h1>Jeff's Blog</h1>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Best Poems</a></li>
      <li><a href="#">Worst Poems</a></li>
    </ul>
  </header>
  <article>
    <h2>VHS umami pop-up trust fund</h2>
    <p>Marfa church-key kitsch bicycle rights, 8-bit mixtape cardigan gentrify Echo Park. Street art swag brunch, next level roof party Schlitz hella organic keffiyeh selfies. You probably haven't heard of them polaroid hashtag +1, meggings biodiesel Portland High Life cray tumblr retro.</p>
    <button>like</button>
    </article>
    
  <article>
    <h2>Sartorial synth Echo Park, roof party</h2>
    <p>chambray you probably haven't heard of them pour-over viral selvage umami skateboard VHS post-ironic selfies. Wes Anderson gentrify fanny pack twee, bicycle rights bitters blog keffiyeh plaid flannel. Tonx irony cliche sustainable mlkshk bitters. Four loko leggings chambray Vice.</p>
  <button>like</button>
  </article>
  
  <article>
  <h2>Forage food truck keytar master cleanse</h2>
  <p>ethical thundercats sustainable locavore quinoa Neutra. Aesthetic tacky sweater single-origin coffee, bicycle rights organic lo-fi street art american apparel ennui four loko ethnic Brooklyn small batch. Forage YOLO polaroid</p>
  <button>like</button>
  </article>
<script>
  $("button").on("scroll",function(){alert("clicked!")})
</script>

</body>

<!DOCTYPE html>

<head>
<script src="/assets/jquery.js"></script>
<link href='https://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: helvetica, sans-serif;
  margin: 0 auto;
  max-width: 600px;
  background: #232323;
}
div {
  height: 200px;
  background-size: cover;
  position: relative;
  margin: 40px 0 0 0;
  border-radius: 12px;
}
h1 {
  font-family: 'Londrina Shadow', cursive;
  text-align: center;
  font-size: 75px;
  color: #aaaaaa;
  margin: 60px 0 0 0;
}
h2 {
  text-align: center;
  color: #bbbbbb;
  margin: 0px 0 70px 0;
}
p {
  color: rgba(255,255,255,1);
  background: black;
  background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  padding: 10px;
  height: 30px;
  line-height: 28px;
  text-align: justify;
  position: absolute;
  bottom: 0;
  margin: 0;
  transition: height .5s;
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
}

small {
  opacity: 0;
}

.show-description p{ 
  height:150px;
}

.show-description small{
  opacity: 1;
}

.first{
  background-image: url("http://dash.ga.co/assets/firstcourse.jpg");
}
.second{
  background-image: url("http://dash.ga.co/assets/secondcourse.jpg");
}
.dessert{
  background-image: url("http://dash.ga.co/assets/dessertcourse.jpg");
}
.price {
  float: right;
}
@media (max-width:500px) {
  h1 {
    font-size:50px;
    margin-top: 20px;
    line-height:40px;
  }
  
  h2{
    font-size: 20px;
    margin：20px 0px 30px 0px;
  }
  
  div{
    margin: 20px 12px 0 12px;
  }  
  p{
    font-size: 20px;
    line-height: 24px;
    font-size: 16px;
  }
  
  small{ 
    font-size: 16px;
  }
  
}

</style>

</head>

<body>
<h1>esha's restaurant</h1>
<h2>a New York City eatery</h2>
<div class="first">
  <p>welsh onion soko <span class="price">$14</span><br />
  <small>Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil. </small></p>
</div>

<div class="second">
  <p>pastrami boudin tongue <span class="price">$22</span><br />
  <small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drumstick. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork loin prosciutto bresaola.</small></p>
</div>
  
<div class="dessert">
  <p>fruitcake marzipan pudding dragee <span class="price">$8</span><br />
  <small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly-o bear claw ice cream candy canes.</small></p>
</div>

<script>
  $('div').on('click', function() {
    $(this).toggleClass('show-description');
  });
</script>
</body>