小假期

导航，头部，CSS基础

1.制作自己的导航条。

2.HTML头部元素：

<base>  定义了页面链接标签的默认链接地址

<style>  定义了HTML文档的样式

<link>  定义了一个文档和外部资源之间的关系

3.练习样式表：

行内样式表

内嵌样式表

外部样式表

4.分别练习定义三类选择器：

HTML 选择器

CLASS 类选择器

ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小假期</title>
        <base href="http://p2.so.qhimgs1.com/sdr/1417_900_/t01933a30d37fb4009e.jpg" target="_blank">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav>
    <h2>首页</h2>
    <img src="t01933a30d37fb4009e.jpg" height="20" width="20">
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="https://www.jianshu.com/sign_in">登录</a>
    <a href="https://www.jianshu.com/sign_up">注册</a>
</nav>
<style>
           p {
            color: blue;
        }

        .starone {
            collapse: red;
        }

        #id {
            color: pink;
        }
</style>

<div>
    <p><span>全场6折</span></p>
    <p><span>全场6折</span></p>
    <p><span>全场6折</span></p>
    <h2 class="starone">今天6折起</h2>
    <p><span id="content">666</span>点击</p>
</div>


   <h1 align="center">Hello你好</h1>
   <h3>2015</h3>
   <hr>
   <div id="container" style="width: 400px">
       <div id="header" style="background-color: darkorange"><h2 align="center">登录</h2></div>
       <div id="content">
           <form>
               username：<input type="text"name="username"placeholder="请输入用户名"><br>
               password：<input type="password"name="pwd"><br>
               <input type="radio"name="role"value="stu">student
               <input type="radio"name="role"value="tea">teacher<br>
               <input type="checkbox"name="vehicle"value="remember me">记住我<br>
               <input type="button" value="登录验证">
           </form>
       </div>
       <div id="footer" style="background-color: darkorange"><p align="center"><i>版权@xiaojiaqi</i></p></div>
   </div>
   <div>
       <select>
           <option>喜欢</option>
           <option>收藏</option>
           <option>点击</option>
       </select>
       <ul>
          <li>python</li>
           <li>html</li>
       </ul>
       <ol>
           <li>python</li>
           <li>html</li>
       </ol>
   </div>
   <hr>
   <a href="http://www.baidu.com/s?wd=多啦a梦&ie=UTF-8">多啦A梦<br>
       <img src="http://a.cphotos.bdimg.com/timg?image&quality=100&size=b4000_4000&sec=1507859219&di=3a04247590e4cf6d501bfd8f164e5101&src=http://pic72.nipic.com/file/20150716/21109289_143220717453_2.jpg" height="100" width="50
"></a>
</body>

</html>

　　

       p {
            color: blue;
        }

        .starone {
            collapse: red;
        }

        #id {
            color: pink;
        }

 

posted on 2017-10-18 21:27  028肖家琪  阅读(153)  评论(0)    收藏  举报

导航