导航,头部,CSS基础

一、制作自己的导航条。

二、HTML头部元素:

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

 

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

 

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

 

三、练习样式表:

行内样式表

内嵌样式表

外部样式表

四、分别练习定义三类选择器:

HTML 选择器

CLASS 类选择器

ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title >江苏卫视</title>
    <base href="http://www.360kan.com/va/YsEmcHNx8Zk4DD.html">
    <link rel="stylesheet"type="text/css"href="171.css">
</head>
<body >
<!--这是一个注释-->
<h1 >蒙面唱将猜猜猜<span style="font-size: larger";>5</span></h1>
<style type="text/css">
     p{
            color: skyblue;
        }
        h2{
     background-color: darkred;
        }
        .textyellow{
            color: pink;
                   }
        #tt{
            color: grey;
        }
</style>

<nav>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508238468810&di=322f24861e0b0762fee55e7d2b4799a7&imgtype=0&src=http%3A%2F%2Fimge.kugou.com%2Fsoft%2Fcollection%2F400%2F20160918%2F20160918215143740618.jpg"><br>
    <a href="http://list.youku.com/show/id_zefbfbd66efbfbd365eef.html?tpa=dW5pb25faWQ9MTAzNzUzXzEwMDAwMV8wMV8wMQ&refer=baiduald1705">首页</a>
    <a href="http://v.youku.com/v_show/id_XMzA4NzU3Nzg4MA==.html?spm=a2h1n.8261147.0.0">下载APP</a>
    <input type="text"name="search"placeholder="搜索歌手">
    <button type="submit">搜索</button>
    <a href="">登录</a>
    <a href="">注册</a>
    </nav>
<a href="#2">1</a>
 <div>看蒙面唱将猜猜猜<span style="background-color: skyblue;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 50px;color: darkred">猜猜歌手是谁!</span></div>



       <h3 id="2015">2015</h3>
       <script>
           document.write(Date())
           document.getElementById("2015").innerHTML="????";
       </script>
       <p style="color: blueviolet;margin-left: 20px;">This is a paragraph</p>
       <p>This is a paragraph</p>
       <a href="#2">2</a>
       <div id="container" style=" 400px">
    <div id="header" style="background-color:pink"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>
       <div id="content" style="background-color: skyblue;height: 180px; 400px;float: left;">
           <form align="center">
           Username:<input type="text" name="username"placeholder="请输入账号"><br><br>
           Password:<input type="Password" name="passname"placeholder="8位密码"><br><br>
            <input type="radio" value="student">会员
            <input type="radio" value="teacher">非会员<br>
               <input type="checkbox"value="true"><span>记住我</span><a href="">登录遇到问题</a><br>
            <input type="button" value="login" onclick=" alert('验证码')">
            <input type="button" value="cancel">
            </form>

<h2 align="center">通知</h2>
<p id="tt">你猜到“断肠人在天涯”是谁吗?</p>
<p >你猜到“粉红的淘气女郎”是谁吗?</p>
<p class="textyellow">你猜到“冷场王驾到”是谁吗?</p>
       </div>
            </div>
</body>
</html>

原文地址:https://www.cnblogs.com/hxl316/p/7680921.html