前端学习3（free code camp part.1）

最新推荐文章于 2021-08-22 22:37:17 发布

baixo

最新推荐文章于 2021-08-22 22:37:17 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/u013014553/article/details/55044615

版权

Yes, yes, baby to open a new pit, fCC combined head head study guide, English entry tutorial, fighting
<Link href = "https://fonts.gdgdocs.org/css?family=Lobster" rel = "stylesheet" type = "text / css"> Add Font Style Lobster
Border-radius Border radius rounded
The value of the attribute of your aelement hrefis replaced by an #alias hash (hash) symbol that turns it into a fixed link.
<Altg src = "www.your-image-source.com/your-image.jpg" alt = "your alt text"> . Alt for text that can not be displayed
<Input type = "text" placeholder = "">

<Link href = "https://fonts.gdgdocs.org/css?family=Lobster" rel = "stylesheet" type = "text / css">
<Style>
  .red-text {
    Color;
  }

  H2 {
    Font-family: Lobster, Monospace;
  }

  # Cat-photo-form {
    Background-color: green
    
  }
  P {
    Font-size: 16px;
    Font-family: Monospace;
  }

  .thick-green-border {
    Border-color: green;
    Border-width: 10px;
    Border-style: solid;
    Border-radius: 50%;
  }

  .smaller-image {
    Width: 100px;
  }

  .gray-background {
    Background-color: gray;
  }
</ Style>

<H2 class = "red-text"> CatPhotoApp </ h2>

<P> Click here for <a href="#"> cat photos </a>. </ P>

<a href="#"> <img class = "smaller-image thick-green-border" alt = "A cute orange cat lying on its back" src = "/ images / relaxing-cat.jpg"> </ a >

<Div class = "gray-background">
  <P> Things cats love: </ p>
  <Ul>
    <Li> cat nip </ li>
    <Li> laser pointers </ li>
    <Li> lasagna </ li>
  </ Ul>
  <P> Top 3 things cats hate: </ p>
  <Ol>
    <Li> flea treatment </ li>
    <Li> thunder </ li>
    <Li> other cats </ li>
  </ Ol>
</ Div>

<Form action = "/ submit-cat-photo" id = "cat-photo-form">
  <Label> <input type = "radio" name = "indoor-outdoor" checked> Indoor </ label>
  <Label> <input type = "radio" name = "indoor-outdoor"> Outdoor </ label>
  <Label> <input type = "checkbox" name = "personality" checked> Loving </ label>
  <Label> <input type = "checkbox" name = "personality"> Lazy </ label>
  <Label> <input type = "checkbox" name = "personality"> Energetic </ label>
  <Input type = "text" placeholder = "cat photo URL" required>
  <Button type = "submit"> Submit </ button>
</ Form>

<P> If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php"

Padding element paddingcontrol element contents contentand element border borderdistance.

Outside elements frommarginthe control element's border borderfrom the elements and the actual space occupied.

padding: 10px 20px 10px 20px; The four values are arranged in a clockwise fashion: the top, the right, the bottom, the left, referred to as: the upper right and left

Yellow padding: 5px;

Red margin: 5px;

Red padding: 10px;

Green margin: 0px;

Green padding: 20px;

In the<style>part of classthe order of declaration: the second declaration covering;

Color: pink! Important;> in- row style> id> declares class> class

Bootstrap response framework

Adjust the elements by screen size

well 创建深度效果

Body: container-fluid 适应浏览器大小

Img: img_responsive

Button: btn btn-block (block-level element) btn-primary深蓝 btn-info

<Button class = "btn btn-block btn-primary"> Like </ button>
<button class = "btn btn-block btn-info"> Info </ button>
<button class = "btn btn-block btn-danger "> Delete </ button>

grid:

md (middle) xs

</div>

Font Awesome

<i class="@@@"></i>