导航，头部，CSS基础

2021-05-23 17:28

阅读：429

标签：lang blog red san 用户 word abc doctype for

制作自己的导航条。
HTML头部元素：
1. 定义了页面链接标签的默认链接地址
3. 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表

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

HTML 选择器
CLASS 类选择器

ID 选择器

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    base target="_blank">
    title>Titletitle>
    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="http://s4.sinaimg.cn/mw690/6e3c5180gd7e41fd99ef3&690" height="50" width="50">
    a href="http://www.41vs.com/WerewolfWeb/41vs/TotalFlow.do?website=36041">狼人杀官网首页a>
    a href="http://zhushou.360.cn/detail/index/soft_id/3583525">一键安装APPa>br>

     img src="http://upload.chinaz.com/2017/0329/17032914121881842.jpg" height="50" width="50">
    a href="">登录a>
    a href="">注册a>
    input type="text"placeholder="请输入搜索内容">
    input type="button"value="搜索">
nav>
hr>

div  id="container" style="width:400px " >
    div id="header" style="background-color:skyblue;">h2 align="center" style="margin-bottom:0;">狼人杀用户登录h2>div>
    div id="content" style="background-color:#EEEEEE;height: 210px;width:400px;float:left;text-align:center;">
        form>
            br>用户名input type="text" name="user" placeholder="请输入用户账号">br>
            br>密码input type="password" name="pass">br>
            br>input type="radio">普通用户
            input type="radio">VIP用户br>
            br>input type="button"value="登录">
            input type="button"value="注册">
        form>
    div>
    div id="footer" style="background-color:skyblue;clear:both;text-align:center;">版权*liudadiv>
div>
hr>

div>
    p>火爆游戏狼人杀！p>
    p class="kk">火爆游戏狼人杀！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;
     }