导航，头部，CSS基础

最新推荐文章于 2025-04-17 09:09:17 发布

原创最新推荐文章于 2025-04-17 09:09:17 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

导航，头部，CSS基础

1.制作自己的导航条

2.HTML头部元素：

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

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

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

3.练习样式表：

a.行内样式表

b.内嵌样式表

c.外部样式表

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

a.HTML 选择器

b.CLASS 类选择器

c.ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎进入登录首页</title>
    <base  target="_blank">
     <link rel="stylesheet" href="t.css" type="text/css">
    <style>
        p{
           color:fuchsia;
        }
     .kk{
      color:darkcyan;font-weight: bold;font-style: italic;font-size: 20px;
     }
     #abc{
         color: darkblue;text-decoration: underline;font-size: 25px;
     }
    </style>>
</head>
<body>
<nav>

     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508243735544&di=c701fb49572a9ab415e5e4d5307960c2&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F67%2F15%2F31300544065109148093156889945.jpg" height="200" width="200">
    <img alt="扫码下载 APP" src="//faas.elemecdn.com/desktop/media/img/appqc.95e532.png" height="60" width="60">
    <a href="https://www.ele.me/home/">饿了么官网首页</a>


    <a href="">登录</a>
    <a href="">注册</a>
    <input type="text"placeholder="请输入搜索内容">
    <input type="button"value="搜索">
</nav>
<h1></h1>
<h3 id="2015">2015</h3>
       <script>
           document.write(Date())
           document.getElementById("2015").innerHTML="欢迎下单";
       </script>

       <a href="#2">2</a>
       <div id="container" style="width: 400px">
    <div id="header" style="background-color: antiquewhite"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>
       <div id="content" style="background-color:aquamarine;height: 180px;width: 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>

<div>
    <p class="yellow">饿了就上饿了么</p>
    <p id="abc">饿了就上饿了么</p>
    <p>饿了么<span style="background-color:grey;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 35px;color:red">就上饿了么</span></p>
</div>
</body>
</html>

p{
           color:fuchsia;
        }
     .kk{
      color:darkcyan;font-weight: bold;font-style: italic;font-size: 20px;
     }
     #abc{
         color: darkblue;text-decoration: underline;font-size: 25px;
     }