导航，头部，CSS基础

  1. 制作自己的导航条。
  2. HTML头部元素：
    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式文件
    3. <link>  定义了一个文档和外部资源之间的关系
  3. 练习样式表：
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
  4. 分别练习定义三类选择器：
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cake</title>
    <link rel="stylesheet" type="text/css" href="157.css">
    <base href="http://www.lecake.com/" target="_blank">
</head>
<body>
<nav>
    <img src='http://newimgcdn.lecake.com/web//images/logo.png' width="120" height="20"></img>
<a herf="">首页</a>
<a herf="">蛋糕</a>
<input type="text" name="search">
<button type="submit">搜索</button>
<a href="">登录</a>
<a href="">注册</a>
</nav>
<div>
    <h1>蛋糕预定，现在开始啦！</h1>
    <p>双十一全部商品<span style="font-size: 45px;font: 500;background-color: cornsilk";>50%OFF</span></p>
    <p id="tt">双十一全部商品50%OFF</p>
    <p class="textblue">双十一全部商品50%OFF</p>
</div>
 <body bgcolor="gray">
<img class="media-object newm" src="//imagecdn.lecake.com/postsystem/docroot/images/goods/201709/15657/display_15657_15752.jpg"
     alt="实栗派核桃栗蓉蛋糕" width="25%">
<div class="select_number"><button id="reduce" class="active">-</button>
    <input type="text" value="1" id="addNumber">
    <button id="add">+</button></div>
<a href="javascript:;" id="buy">&nbsp;</a>
    <a href="http://www.lecake.com/shop/goods-105601.html" class="link big">&nbsp;</a>
    <input type="hidden" value="105601" id="goodsId"></div>
<div>
<ul>
    <li> <a href="http://www.lecake.com/SH/category-0-1.html?moment=&amp;taste=,113&amp;spec=">冰淇淋蛋糕</a></li>
    <li><a href="http://www.lecake.com/SH/category-0-1.html?moment=&amp;taste=,114&amp;spec=">奶油蛋糕</a></li>
    <li><a href="http://www.lecake.com/SH/category-0-1.html?moment=&amp;taste=,103&amp;spec=">巧克力蛋糕</a></li>
    <li><a href="http://www.lecake.com/SH/category-0-1.html?moment=&amp;taste=,101&amp;spec=">慕斯蛋糕</a></li>
</ul>
</div>
</body>
</html>
      p{
color:red;
}
h1{
   font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
font-style: italic;
background-color:pink;
color:cornflowerblue;
}
.textblue{

color:deeppink;


}
#tt{
color:#FFD700;

}

posted @ 2017-10-17 19:27  爱学习的土豆  阅读(134)  评论(0)    收藏  举报