导航，头部，CSS基础

2021-05-23 20:29

阅读：565

标签：code 标签 aix alt www. 选择器 back password otto

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

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>登陆页面title>
    base href="http://www.gzcc.cn/"target="_blank">
    link rel="stylesheet"type="text/css"href="123.css">
    style>
           h2{ text-align: center;margin-bottom:0;}
           #headertwo{background-color:#FF359A;}
           #contenttwo{background-color:#9D9D9D;height:200px;width:400px;float:left;}
           #footertwo{background-color:#FF5151;clear:both;text-align:center;}
           #wedang{width:400px;float:right}
           #school{width:400px;float:left}

    style>

head>
body>
img src="http://img3.redocn.com/tupian/20150312/haixinghezhenzhubeikeshiliangbeijing_3937174.jpg"width="100" height="20" alt="h" >
    a href="">首页a>
    a href="">下载a>
    input type="text"name="search">
    input type="submit"value="搜索">
    a href="">登录a>
    a href="">注册a>
nav>

h1>登陆页面h1>
h2>2017h2>

p>p>
div>
    p>注意认真阅读信息span style="font-family: ‘‘, monospace; font-size: 25px;background-color:#750000">认真阅读span>p>
div>

div  id="container" style="width:400px " >
    div id="header" style="background-color:green;">h2 align="center" style="margin-bottom:0;">LOGINh2>div>

    div id="content" style="background-color:#EEEEEE;height:150px;width:400px;float:left;">
        form action="">
            Username:input type="text" name="user"placeholder="Username">br>
            Password:input type="password" name="password"placeholder="Password">
            br>
            input type="radio"name="role"value="stu">student
            input type="radio"name="role"value="tea">teacher
            br>
            input type="button" value="login">
            input type="button" value="cancel">
        form>
    div>


    div id="footer" style="background-color:mediumpurple;clear:both;text-align:center;">版权 ? duymdiv>

div>
div  id="container" style="width:400px " >
    div id="header" style="background-color:green;">h2 align="center" style="margin-bottom:0;">SEARCHh2>div>

    div id="content" style="background-color:#EEEEEE;height:150px;width:400px;float:left;">
        from>
            select>
                option>选择option>
                option>收藏option>
                option>喜欢option>
            select>
        form>br>
      相关查询：
      ul>
         li>教学资料查询li>
          li>考试查询li>
      ul>
       ol>
         li>教学管理li>
           li>资源管理li>
      ol>

    div>
    div id="footer" style="background-color:#C0C0C0;clear:both;text-align:center;">版权 ? duymdiv>

div>


hr>
 P>友情链接P>
  a href="http://www.gzcc.cn/">广州商学院br>
      img src="http://img1.3lian.com/img013/v3/2/d/61.jpg" width="258" height="39" alt="gzcc.cn"  >a>
body>
html>