导航，头部，CSS基础

1.制作自己的导航条。

HTML头部元素：

<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式
<link> 定义了一个文档和外部资源之间的关系练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表

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

HTML 选择器
CLASS 类选择器

ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>
<nav>
    <img src="http://www.iconpng.com/png/webdev-seo/home19.png" width="50"height="30">
    <a href="http://www.gzcc.cn/">首页</a>
    <input type="text">
    <button>zearch</button>
</nav>
   <link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<h1 class="zao">广州商学院</h1>
<h2 >2015</h2>
<h3><span id="commentcount" >欢迎</span>boom</h3>

<div id="2015"style="width: 400px">
    <div id="header"style="background-color: #FFA500":><h2 align="center "style="margin-bottom: 0">登录</h2></div>
    <div id="content"style="background-color: #EEEEEE;height:150px;width: 400px;float: left">
        <from action="">
            Username:<input type="text"name="user"placeholder="用户名"><br>
            Passward:<input type="password"name="password"><br>
            <input type="radio"name="role"value="stu">student
            <input type="radio"name="role"value="tea">teacher<br>

            <input type="checkbox"value="true"><span>记住我</span><a href="">登录遇到的问题</a><br>

            <input type="button"value="login"onclick="alert('登录验证')">
        </from>
    </div>
<div id="footer"style="background-color: #FFA500 "><i>版权@CNY</i></div>
</div>
<hr>
<div>
        <ul>
        <li>python</li>
        <li>html</li>
    </ul>
    <select>
        <option>收藏</option>
        <option>点赞</option>
        <option>评论</option>
    </select>
    <hr><br>
    <h3 id="学院介绍">学院介绍</h3>
    <d1>
        <dt><a href="http://site.gzcc.cn/">信息技术与工程学院</a> </dt>
            <dd><a href="http://site.gzcc.cn/html/xsgz/jsjxtw/">学院团学</a> </dd>
        <dt><a href="http://sfl.gzcc.cn/">外国语学院</a></dt>
            <dd><a href="http://sfl.gzcc.cn/html/xsyd/txfc/">学院团学</a> </dd>
    </d1>
    <hr><br>

</div>


 <a href="http://www.gzcc.cn/" >友情链接：广州商学院官网</a>

</body>
</html>

     <style>
   h1{
            color:fuchsia;
        }
        .zao{
            color: blueviolet;
        }
        #commentcount{
            color: aquamarine;
        }
</style>

posted on 2017-10-18 21:40 137陈楚洪阅读(141) 评论(0) 编辑收藏举报

刷新页面返回顶部

137陈楚洪

导航，头部，CSS基础

导航

公告