导航,头部,CSS基础

1、制作自己的导航条。

2、HTML头部元素:

  1. <base>  定义了页面链接标签的默认链接地址
  2. <style>  定义了HTML文档的样式文件
  3. <link>  定义了一个文档和外部资源之间的关系
  4. 3、练习样式表:
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
    4、分别练习定义三类选择器:
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">mis问答平台<span style="font-size: larger";></span></h1>
<h2 align="center">广州商学院界面</h2>
<style type="text/css">
     p{
            color: red;
        }
        h2{
     background-color: cyan;
        }
        .textyellow{
            color: blue;
                   }
        #tt{
            color: yellow;
        }
</style>

<nav>
    <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"><br>
    <a href="">首页</a>
    <a href="">下载APP</a>
    <input type="text"name="search"placeholder="输入内容">
    <button type="submit">搜索</button>
    <a href="">登录</a>
    <a href="">注册</a>
    </nav>
 <div>广州商学院<span style="background-color: cyan;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 50px;color: yellow">教务系统</span></div>

       <h3 id="2017">2017</h3>
 <script>
           document.write(Date())
           document.getElementById("2017").innerHTML="????";
       </script>
       <p style="color: blueviolet;margin-left: 20px;">he is a english teacher</p>
       <p>he is a english teacher</p>

<div  id="container" style="width:400px " >
    <div id="header" style="background-color:#FFA500;"><h2 align="center" style="margin-bottom:0;">登录</h2></div>

    <div id="content" style="background-color:#EEEEEE;height:150px;width:400px;float:left;">
        <form>
    Username:<input type="text" name="username" placeholder="请输入用户名"><br>
    Password:<input type="password" name="passeword" placeholder="请输入密码"><br>


    <input type="radio" name="role" value="stu">student
    <input type="radio" name="role" value="Bike"> teacher<br>
    <input type="button" value="登录">
    <input type="button" value="退出">
</form>
    </div>
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权  kobe</div>

</div>
<h2 align="center">大新闻</h2>
<p id="tt">广州商学院惊现陆地第四大毒蛇!!!</p>
<p >广州商学院惊现陆地第四大毒蛇!!!</p>
<p class="textyellow">广州商学院惊现陆地第四大毒蛇!!!</p>

</body>
</ht

css:

 p{
            color: red;
        }
        h2{
     background-color: cyan;
        }
        .textyellow{
            color: blue;
                   }
        #tt{
            color: yellow;
        }

posted @ 2017-10-17 19:28  070王学竞  阅读(136)  评论(0编辑  收藏  举报