码迷,mamicode.com
首页 > Web开发 > 详细

导航,头部,CSS基础

时间:2017-10-17 21:46:57      阅读:290      评论:0      收藏:0      [点我收藏+]

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

    1. 制作自己的导航条。
    2. HTML头部元素:
      1. <base>  定义了页面链接标签的默认链接地址
      2. <style>  定义了HTML文档的样式文件
      3. <link>  定义了一个文档和外部资源之间的关系
    3. 练习样式表:
      1. 行内样式表
      2. 内嵌样式表
      3. 外部样式表
    4. 分别练习定义三类选择器:
      1. HTML 选择器
      2. CLASS 类选择器
      3. ID 选择器
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <base target="_blank">
            <title>Title</title>
            <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">一键安装APP</a><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;">版权*liuda</div>
        </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;
             }

         

        技术分享

         

导航,头部,CSS基础

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

原文地址:http://www.cnblogs.com/1996liuda/p/7683878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!