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

导航,头部,CSS基础

时间:2017-10-18 22:10:17      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:back   tool   sea   tar   charset   链接地址   arch   gif   title   

1、制作自己的导航条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简书</title>
    <link rel="stylesheet" href="1018.css">
</head>
<body>
<nav>
    <img src="https://p1.ssl.qhmsg.com/dr/270_500_/t01745b3fd4078d5a9e.jpg?size=512x512" height="50" width="50">
    <a href="http://www.jianshu.com/"></a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="https://www.jianshu.com/sign_in">登陆</a>
    <a href="https://www.jianshu.com/sign_up">注册</a>
</nav>

技术分享

 

2、HTML头部元素:

<base>  定义了页面链接标签的默认链接地址

<base href="" target="_blank">

 

<style>  定义了HTML文档的样式

    <style type="text/css">
        p{
            color: red;
        }
    </style>

 

<link>  定义了一个文档和外部资源之间的关系

<head>
    <meta charset="UTF-8">
    <title>简书</title>
    <link rel="stylesheet" href="1018.css">
</head>

3 练习样式表:

行内样式表

内嵌样式表

外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简书</title>
    <link rel="stylesheet" type="text/css" href="1018.css">
    <style type="text/css">
      p{
      color: red;
    }
      .zidingyi{
         color: blue;
    }
    #commentcount{
          background-color: aquamarine;
    }
    </style>
</head>
<body>
<nav>
    <img src="https://p1.ssl.qhmsg.com/dr/270_500_/t01745b3fd4078d5a9e.jpg?size=512x512" height="50" width="50">
    <a href="http://www.jianshu.com/"></a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="https://www.jianshu.com/sign_in">登陆</a>
    <a href="https://www.jianshu.com/sign_up">注册</a>
</nav>
<p>十九大 <span style="background: black;font-size: 30px;font-family: 微软雅黑">召开</span></p>
<p>十九大召开</p>
<p>十九大召开</p>
<p>十九大召开</p>
<h1 class="zidingyi">评论</h1>
<h2><span id="commentcount" >1000</span>点赞</h2>
</body>

</html>

 

技术分享

 

4、分别练习定义三类选择器:

    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器
技术分享
{#        1  .HTML 选择器#}
        p {
            color: blue;
        }
{#        2  .CLASS 类选择器#}
        .bk{
            color: lavenderblush;
        }
{#        3  .ID 选择器#}
        #ok {
            color:  lightseagreen;
        }

 

导航,头部,CSS基础

标签:back   tool   sea   tar   charset   链接地址   arch   gif   title   

原文地址:http://www.cnblogs.com/lintingting/p/7689268.html

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