导航，头部，CSS基础.

制作自己的导航条。
HTML头部元素：
1. <base> 定义了页面链接标签的默认链接地址
2. <style> 定义了HTML文档的样式文件
3. <link> 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表
分别练习定义三类选择器：
1. HTML 选择器
2. CLASS 类选择器
3. ID 选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>LAY</title><base href="http://weibo.com/u/2706896955?refer_flag=1001030201_&is_all=1" target="_blank"><link rel="stylesheet"type="text/css"href="color.css"><style type="text/css">h1{font-family: "Microsoft JhengHei";font-size:xx-large;color:black;}h2{font-family:"Baskerville Old Face";font-size:large;color:black;}</style></head>
<body bgcolor="#FFD9EC"><nav><img src="http://wx3.sinaimg.cn/mw1024/737b5f84gy1fklmf56fxxj211304wtfm.jpg"><br><a href="">首页</a><a href="">新闻</a><a href="">登陆</a><a href="">注册</a><a href="">退出</a><input type="text"name="search"><button type="submit">搜索</button>
</nav>
<h1> 张艺兴生日快乐 </h1>
<h2>Happy Lay's Day </h2>><div  id="container" style="width:400px;" ><div id="header" style="background-color:palevioletred"><h2 align="center" style="margin-bottom: 0;"><font face="华文行楷" color="black" size="6" >登 录 </font></h2></div><div id="content" style="background-color:pink;width:400px;float:left;line-height:40px;"><form >用户名:<br><input type="text" style="border-radius: 8px;height: 20px;width: 350px" name="user" PLACEHOLDER="请输入用户名"><br>密码:<a href="http://www.baidu.com"><font size="2" color="tomato"style="float: right" >忘记密码？</font> </a><br><input type="password" style="border-radius: 8px;height: 20px;width: 350px;" name="password" PLACEHOLDER="请输入密码"><br><div id="content" style="background-color:lightcoral;width:400px;float:left;line-height:40px;"><input type="checkbox" value="Keep me logged in">下次自动登录<br><input type="button" style="border-radius: 5px;background-color: seashell;height: 30px;width: 200px;margin-right: 10px;float: right"value="登录"></div></form></div><div id="footer" style="background-color:palevioletred;;clear:both;text-align:center;">版权©Judy-L</div>
</div>
<div  id="container" style="width:400px;" ><div id="header" style="background-color:palevioletred"><h2 align="center" style="margin-bottom: 0;"><font face="华文行楷" color="black"size="6">搜 索</font></h2></div><div id="content" style="background-color:lightpink;;;width:400px;float:left;line-height:20px;">范围：<select><option value="" style="color: #c2c2c2;">---请选择---</option><option>图片</option><option>饭拍视频</option><option>官方视频</option><option>音频</option></select><ul><li>MV汇总</li><li>花絮汇总</li></ul><ol><li>同人画作</li><li>饭制视频</li></ol></div><div id="footer" style="background-color:palevioletred;clear:both;text-align:center;">版权©Judy-L</div></div><br>
<p>友情链接</p>
<a href ="http://v.yinyuetai.com/video/3059775">张艺兴--SHEEP--MV</a></body> </html>

转载于:https://www.cnblogs.com/lyx1997/p/7684664.html

导航，头部，CSS基础.相关推荐

HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
Html+CSS基础知识（一）
1 前端常识 1.1 HTML的作用定义网页结构: 1.2 CSS的作用修饰网页结构和样式: 1.3 javascript 定义网页之间的交互 2 HTML基础 2.1 什么是HTML HTML是 ...
【前端开发基础】CSS基础知识以及CSS3
文章目录一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...
HTML基础，CSS基础
目录 HTML基础标签 1.文本格式化,图片,音频,视频,链接标签列表(有序,无序,自定义) 表格 1.表格(基本使用) 2.表格(合并单元格) 表单 1.input基本使用 2.表单占位符,单选 ...
html基础、css基础（前端基础知识入门）
html以及css知识点总结前言:大家好啊,我是小编达闻西.我相信在茫茫的文海之中相遇,这是一份莫大的缘分.在武侠小说中,遇见有缘人都会传你绝世神功,从而你就可以称霸武林,迎娶白富美,走上人生巅峰. ...
html基础和CSS基础
HTML和CSS基础 html基本结构 vscode推荐插件插件作用 Chinese (Simplified)LanguagePack for vs Code 中文(简体)语言包 Open in ...
CSS基础学习教程（一）
一.CSS基础教程 1.1 CSS介绍 CSS1 是一种描述 HTML 文档样式的语言.CSS 描述应该如何显示 HTML 元素. 定义: CSS 指的是层叠样式表* (Cascading Style ...
CSS基础教程（上） - 阿蜜果 - BlogJava
导读: 因为本人是个CSS盲,为了改善这种情况,特意扫了一下盲,前不久不买书时,看到一本不错的CSS基础书,顺手买了一本,觉得还不错,记了一下笔记,共享给大家. 一． CSS 入门 1. CSS 应用 ...
学习笔记（二）——CSS基础
文章目录一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式三.选择器 3.1.基础选择器 3.1.1.标签 ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...

导航，头部，CSS基础.

导航，头部，CSS基础.相关推荐

最新文章

热门文章