导航,头部,CSS基础
1.制作自己的导航条。
2.HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
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基础的更多相关文章
- 第五模块:WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- 【JavaWeb】HTML&CSS 基础
HTML&CSS 基础 HTML 基础 HTML 标签 HTML标题:HTML 标题(Heading)是通过 h1 - h6 等标签进行定义的. HTML段落: HTML 段落是通过 p 标签 ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- css基础-语法篇
CSS基础 1.css简介 cascading style sheets 汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...
- CSS基础入门
css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...
- h5 . css入门 2.CSS基础
CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
随机推荐
- java 之程序中的http请求
背景 java程序中有时需要我们发起http级别的请求,例如抓数据或者第三方对接时,一般分为两种:一种是只需我们发起请求,还有一种是我们不但要发起请求,还要拿到请求后的数据来进行下一步处理 实现 针对 ...
- Servlet (三)HttpServletResponse
package cn.sasa.serv; import java.io.IOException; import javax.servlet.ServletException; import java ...
- 【python基础】os.path模块常用方法详解
os.path模块 主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法. 更多的方法可以去查看官方文档:http://docs.python.org/library/os.path. ...
- (1.14)mysql锁问题之MyIsam
1.mysql锁概述 BDB被InnoDB代替了,MyIsam在8.0也被抛弃了 2.MyIsam表锁(读写是串行的) [2.1]查看表锁争用情况. MyIsam存储引擎只支持表锁. 查看表锁争用情况 ...
- finecms5采集接口下载
哪里有finecms采集接口可以下载?我们在用finecms建站时比较纠结的是要如何采集文章,finecms商城是有售卖采集插件,价格是50元,有些朋友感觉比较贵,不太愿意买,我们也是比较权衡了才很久 ...
- LeetCode之有效括号
class Solution: def isValid(self,s): #第一步,if 判断传入为空的情况 if s == "": ...
- dubbo发布和引用服务
1.首先添加相关的jar包到工程中 2.在spring(mvc)的配置文件中添加约束 xmlns:dubbo=http://code.alibabatech.com/schema/dubbo http ...
- shell 中 标准输出和错误输出
命令 标准输出 标准错误 >/dev/null 2>&1 丢弃 丢弃 2>&1 >/dev/null 丢弃 屏幕 1>/dev/null 丢弃 屏幕 2& ...
- [LeetCode] 747. Largest Number At Least Twice of Others_Easy
In a given integer array nums, there is always exactly one largest element. Find whether the largest ...
- [LeetCode] 884. Uncommon Words from Two Sentences_Easy tag: Hash Table
We are given two sentences A and B. (A sentence is a string of space separated words. Each word co ...