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">

    <title >综艺</title>

    <base href="http://www.360kan.com/va/YsEmcHNx8Zk4DD.html">

    <link rel="stylesheet"type="text/css"href="171.css">

</head>

<body >

<!--这是一个注释-->

<h1 >爸爸去哪儿<span style="font-size: larger";>5</span></h1>

<style type="text/css">

     p{

            color: crimson;

        }

        h2{

     background-color: darkred;

        }

        .textyellow{

            color: gold;

                   }

        #tt{

            color: chartreuse;

        }

</style>

<nav>

    <img src="https://p1.ssl.qhmsg.com/dr/270_500_/t01a6b17df8e1c94a39.jpg"><br>

    <a href="">首页</a>

    <a href="">下载APP</a>

    <input type="text"name="search"placeholder="搜索季度">

    <button type="submit">搜索</button>

    <a href="">登录</a>

    <a href="">注册</a>

    </nav>

<a href="#2">1</a>

 <div>看爸爸去哪儿免费领取<span style="background-color: chartreuse;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 50px;color: darkred">999元大红包啦！</span></div>

       <h3 id="2015">2015</h3>

       <script>

           document.write(Date())

           document.getElementById("2015").innerHTML="????";

       </script>

       <p style="color: blueviolet;margin-left: 20px;">This is a paragraph</p>

       <p>This is a paragraph</p>

       <a href="#2">2</a>

       <div id="container" style="width: 400px">

    <div id="header" style="background-color: chartreuse"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>

       <div id="content" style="background-color: aqua;height: 180px;width: 400px;float: left;">

           <form align="center">

           Username:<input type="text" name="username"placeholder="请输入手机号"><br><br>

           Password:<input type="Password" name="passname"placeholder="8位密码"><br><br>

            <input type="radio" value="student">student

            <input type="radio" value="teacher">teacher<br>

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

            <input type="button" value="login" onclick=" alert('登录验证')">

            <input type="button" value="cancel">

            </form>

<h2 align="center">通知</h2>

<p id="tt">看爸爸去哪儿免费领取999元大红包</p>

<p >看爸爸去哪儿免费领取999元大红包</p>

<p class="textyellow">看爸爸去哪儿免费领取999元大红包</p>

</body>

</html>

css:

   p{

            color: crimson;

        }

        h1{

     background-color: cyan;

        }

        .textyellow{

            color: gold;

            background-color: cyan;

        }

        #tt{

            color: chartreuse;

        }

导航，头部，CSS基础的更多相关文章

  1. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  2. 【JavaWeb】HTML&CSS 基础

    HTML&CSS 基础 HTML 基础 HTML 标签 HTML标题:HTML 标题(Heading)是通过 h1 - h6 等标签进行定义的. HTML段落: HTML 段落是通过 p 标签 ...

  3. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  4. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  5. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  6. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  7. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  8. css基础-语法篇

    CSS基础 1.css简介 cascading style sheets    汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...

  9. CSS基础入门

    css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...

  10. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

随机推荐

  1. js数组方法汇总

    下面主要汇总一下数组的方法 数组方法: 1.检测是否为数组的方法:Array.isArrray(); var arr=[1,2,3,4,5]; var str='string'; console.lo ...

  2. file 选取文件/文件夹

    一般网页上传文件大家都会用到这个标签 <input type="file" id="file_input"/> 我们可以通过这个标签选取文件,使用j ...

  3. 生成器-代码举例：（）和yield

    怎么自定义一个生成器:两个方法: 1.小括号包裹表达式 2.函数中用yield返回 方法一:①小括号包裹表达式 G=(x*2 for x in range(5)) print(G)输出:<gen ...

  4. linux 修改centos7的网卡ens33修改为eth0

    Linux 操作系统的网卡设备的传统命名方式是 eth0.eth1.eth2等,而 CentOS7 提供了不同的命名规则,默认是基于固件.拓扑.位置信息来分配.这样做的优点是命名全自动的.可预知的,缺 ...

  5. Kinect2.0点云数据获取

    接上一篇:Kinect2.0获取数据 http://blog.csdn.net/jiaojialulu/article/details/53087988 博主好细心,代码基本上帖过来就可以用,注释掉的 ...

  6. Python 全栈开发一 python初识

    1.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

  7. 自动出借-python+selenium

    自动出借 import time from selenium import webdriver # import os #B username = " # 请替换成你的用户名 passwor ...

  8. 收藏住：金融&电商类原型模板重磅来袭，免费使用！

    经常有很多产品经理和设计师想要各行业的产品原型模板,可以直接下载使用.现在分享下一个资源渠道:墨刀的原型模板. 上新了金融类和电商类的主要App设计原型,可以直接免费使用,具体包括: 金融类 招商银行 ...

  9. Navicat 连接Oracle11g时出现ORA-12514：TNS：no listener

    前两天做系统时用navicat连接Oracle数据库还好好的,今天一连突然就开始报ORA-12514:TNS:no listener.然后看网上大部分教程需要改listener.ora文件中的 将HO ...

  10. python导入csv/txt文件

    1. 导入csv文件 ### python导入csv文件的三种方法 ```python #原始的方式 lines = [line.split(',') for line in open('iris.c ...