导航，头部，CSS基础

制作自己的导航条。

<nav>
    <a href="http://www.gzcc.cn"><img src="http://oa.gzcc.cn/uploadfile/2017/0901/20170901030703376.jpg" width="80px">首页</a>
    <a href="www.gzcc.cn">下载App</a>
    <input type="text"name="search">
    <button typw="submit">搜索</button>
    <select>
        <option>学校</option>
        <option>图书馆</option>
        <option>教学楼</option>
        <option>教务处</option>
        <option>宿舍</option>
    </select>
    <a href="">登录</a>
    <a href=""></a>
</nav>

HTML头部元素：

<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>
    <style type="text/css">
        p{
            color: blue;
        }
        textblue{
            color: blue;
        }
        textblue{
            color:red;
        }
        #commentcount{
            background-color: cornsilk;
        }
    </style>
    <base href="http://i1.sinaimg.cn/dy/weather/main/indexl4/007/icons_32_yl/"target="_blank">
    <style>
        body
        {
            background-color: antiquewhite;
        }
        h1
        {
            color:blue;
            text-align: center;
        }
    </style>
</head>

练习样式表：

行内样式表

<div id="header" style="background-color: coral;"><h2 align="center" ></div>

内嵌样式表

<h3><span id="good">nice</span>评论</h3>

外部样式表

<h1 align="center">欢迎您的到来</h1>
<h2 i="2015">2015</h2>
<div id="container"style="width: 400px">
    <div id="header"style="background-color: aqua"><h2 align="center" >欢迎登录</h2></div>
    <div id="content"style="background-color: coral";height:150px,width:400px;float:left>
        <from>
            用户名:<input type="text"name="username"placeholder="请输入用户名"><br>
            密码:<input type="password">
            <input type="radio"name="role"value="stu">学生
            <input type="radio"name="role"value="tea">老师
            <br>
            <input type="checkbox"value="true">记住我
            <input type="button"value="登录";οnclick="alert('登录')">
            <input type="button"value="退出">
        </from>
    </div>
    <div id="footer"style="background-color: burlywood"><p align="center" ><i>版权@</i></div>
</div>

<div>

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

HTML 选择器
```
p{
    color: blue;
}
```

CLASS 类选择器

textblue{
    color: blue;
}
textblue{
    color:red;
}

ID 选择器

#commentcount{
    background-color: cornsilk;
}

导航，头部，CSS基础

相关推荐