导航，头部，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>LAY</title>
    <base href="http://weibo.com/u/2706896955?refer_flag=1001030201_&is_all=1" target="_blank">
    <link rel="stylesheet"type="text/css"href="color.css">
    <style type="text/css">

   h1{
       font-family: "Microsoft JhengHei";
       font-size:xx-large;
       color:black;
   }
   h2{
       font-family:"Baskerville Old Face";
       font-size:large;
       color:black;
   }
   </style>

</head>
<body bgcolor="#FFD9EC">

<nav>
    <img src="http://wx3.sinaimg.cn/mw1024/737b5f84gy1fklmf56fxxj211304wtfm.jpg"><br>
    <a href="">首页</a>
    <a href="">新闻</a>
    <a href="">登陆</a>
    <a href="">注册</a>
    <a href="">退出</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
</nav>
<h1> 张艺兴生日快乐 </h1>
<h2>Happy Lay's Day </h2>>

<div  id="container" style="width:400px;" >
     <div id="header" style="background-color:palevioletred"><h2 align="center" style="margin-bottom: 0;"><font face="华文行楷" color="black" size="6" >登 录 </font></h2></div>
         <div id="content" style="background-color:pink;width:400px;float:left;line-height:40px;">
             <form >
             用户名:<br><input type="text" style="border-radius: 8px;height: 20px;width: 350px" name="user" PLACEHOLDER="请输入用户名"><br>
             密码:<a href="http://www.baidu.com"><font size="2" color="tomato"style="float: right" >忘记密码？</font> </a>
                <br><input type="password" style="border-radius: 8px;height: 20px;width: 350px;" name="password" PLACEHOLDER="请输入密码"><br>
                <div id="content" style="background-color:lightcoral;width:400px;float:left;line-height:40px;">
                    <input type="checkbox" value="Keep me logged in">下次自动登录<br>
                    <input type="button" style="border-radius: 5px;background-color: seashell;height: 30px;width: 200px;margin-right: 10px;float: right"value="登录">
                 </div>
           </form>

         </div>
     <div id="footer" style="background-color:palevioletred;;clear:both;text-align:center;">版权©Judy-L</div>
</div>
<div  id="container" style="width:400px;" >
    <div id="header" style="background-color:palevioletred"><h2 align="center" style="margin-bottom: 0;"><font face="华文行楷" color="black"size="6">搜 索</font></h2></div>
         <div id="content" style="background-color:lightpink;;;width:400px;float:left;line-height:20px;">
            范围：<select>
               <option value="" style="color: #c2c2c2;">---请选择---</option>
                <option>图片</option>
                <option>饭拍视频</option>
                <option>官方视频</option>
                <option>音频</option>
            </select>
             <ul>
             <li>MV汇总</li>
             <li>花絮汇总</li>
             </ul>
             <ol>
                 <li>同人画作</li>
                 <li>饭制视频</li>
             </ol>
         </div>
         <div id="footer" style="background-color:palevioletred;clear:both;text-align:center;">版权©Judy-L</div>
 </div><br>
<p>友情链接</p>
<a href ="http://v.yinyuetai.com/video/3059775">张艺兴--SHEEP--MV</a>

</body> </html>

 

posted @ 2017-10-17 23:34  011赖颖璇  阅读(164)  评论(0)    收藏  举报