码迷,mamicode.com
首页 > Web开发 > 详细

Head first html and CSS

时间:2017-11-01 01:04:14      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:页面   css样式   color   steam   1.4   one   ice   ever   head   

耽误了很多时间,一直不能确定方向。从今天起,开始从前端学吧。毕竟立刻有成果的东西,还是好学一些。大道理讲了很多,都不如立刻开始做。
So,开干!
HTML写结构,元素组成:开始标记,内容,结束标记。
CSS写样式
<!--样例-starbuzz咖啡-->
<html>
  <head>
    <title>Starbuzz Coffee</title>

    <style type="text/css">
      body{
        background-color: #CDC1C5;
        margin-left: 20%;
        margin-right: 20%;
        border: 2px dotted gray;
        padding: 50px 50px 50px 50px;
        font-family: sans-serif;
       }
    </style>
  </head>

  <body>

    <h1>Starbuzz Coffee beverages</h1>

    <h2>House Blend, $1.49</h2>
    <p id="houseblend">A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>

    <h2>Mocha cafe Latte, $2.35</h2>
    <p>Espresso, steamed milk and chocolate syrup.</p>

    <h2>Cappuccino, $1.89</h2>
    <p>A mixture of espresso, steamed milk and foam.<>/p

    <h2>Chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and honey.</p>

  </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!--HTML 的基本框架与书写规范-->
<html> <!--浏览器识别-->
  <head> <!--页面开始-->
    <title> </title>

    <style type="text/css"> <!--CSS样式,也能脱离style?-->
      body{ <!--body表示样式用于body,页面主体-->
         background-color: ;<!--背景色-->
         margin-left: ;<!--左余量,边框与浏览器的距离-->
         margin-right: ;<!--右余量-->
         border: ;<!--边框-->
         padding: ;<!内边距,文本与边框的距离,数量:4,顺序:上下右左-->
         font-family: ;<!--字体-->
      }
     </style>
  </head>

  <body> <!--页面主体开始-->
    <h1> </h1>
    <p> </p>
    
    <h2> </h2>
    <p> </p>
  </body>
</html>

 

Head first html and CSS

标签:页面   css样式   color   steam   1.4   one   ice   ever   head   

原文地址:http://www.cnblogs.com/chrioz/p/7764470.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!