十五、导航,头部,CSS基础

  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 herf="http://music.163.com/#/discover"<link rel="stylesheet" type="text/css" herf="180.css"></head>
      <body>
      <!--这是一个注释-->
      <h1>音乐在线<span style="font-size: larger";>好好听~</span></h1><style type="text/css">p{color:red}p1{color:green}</style><body style="background-color:Gainsboro;"></body>
      <nav>
      <img src="http://img.mp.itc.cn/upload/20161016/b45e3e6b512547c1a8ab866787695733.gif" width="75"height="75"><a herf=""><img src="w_02_08_00.png">首页</a><a herf="http://www.gzcc.cn/">下载APP</a><input type="text" name="search"><button type="submit">搜索</button><a herf="">登录</a><a herf="">注册</a>
      </nav><div><p>双11日韩专辑<span style="font-family:'Consolas','Deja Vu Sans Mono','Bitstream Vera Sans Mono',monospace;font_size:50px;background_color:red">50%OFF</p>
      </div><h2 id="2017">2017</h2>
      <script>document.write(Date())document.getElementById("2017").innerHTML="????";
      </script>
      <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <a herf="#2">2</a>
      <div  id="container" style="width:400px " ><div id="header" style="background-color:cornflowerblue;"><h2 align="center" style="margin-bottom:0;">倾听你的音乐</h2></div><div id="content" style="background-color:lightsteelblue;height:150px;width:400px;float:left;"><form action="">Number:<input type="text" name="user" placeholder="请输入会员号/手机号/邮箱号"><br>Password:<input type="password" name="password" placeholder="请输入专属秘密"><br><input type="radio" name="role" value="stu">普通会员<input type="radio" name="role" value="teacher">高级会员<br><input type="checkbox" value="true"><span>记住我</span><a herf="">登录遇到问题</a><br><input type="button" value="login" οnclick="alert('登录验证')"></form></div><div id="footer" style="background-color:cornflowerblue;clear:both;text-align:center;">独家版权 © wjl</div></div><div  id="container" style="width:400px " ><div id="header" style="background-color:cornflowerblue;"><h2 align="center" style="margin-bottom:0;">搜索</h2></div><div id="content" style="background-color:lightsteelblue;height:200px;width:400px;float:left;"><select><option value="" style="color: lightsteelblue;">---请选择---</option><option>会员</option><option>游客</option></select><ul><li>古典音乐</li><li>摇滚音乐</li><li>嘻哈音乐</li></ul><ol><li>扫一扫</li><li>听歌识曲</li></ol></div><div id="footer" style="background-color:cornflowerblue;clear:both;text-align:center;">独家版权 © wjl</div><hr><P>友情链接</P><a href="http://yue.sina.com.cn/">娱乐one by one<br><img src="http://ww1.sinaimg.cn/bmiddle/6548a21bgw1eglr5kvkohg209s0bkajt.gif" width="300" height="130" alt="music.cn"  ></a></body>
      </html>

      运行结果如图:

转载于:https://www.cnblogs.com/Green-/p/7680909.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js形参(parameter)和实参(argument)

parameter&#xff1a;形参_函数中包含的参数 Parameter 属于变量&#xff0c;用于存储传递到函数中的数据&#xff0c;并供函数使用 argument&#xff1a;实参_函数实际运行中使用的参数 Argument 是当函数被调用时传递到函数中的实际数据转载于:https://www.cnblogs.com/miao…

1461B. Find the Spruce

B. Find the Spruce&#xff1a;题目 题意&#xff1a;找有多少树状结构。 思路&#xff1a;递推&#xff0c;从下往上算树尖。#include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((int)6e5), c((…

ajax跨域请求问题总结

总结一下近期遇到ajax跨域请求问题 业务场景描述&#xff1a; 移动端页面放在阿里云服务器进入页面后&#xff0c; 需要访问另一个服务器的接口&#xff0c;ajax请求使用用GET,POST,PUT等方法服务端需要进行cors配置操作过程中出现的问题 发送PUT请求时&#xff0c;请求头的met…

987C. Three displays

C. Three displays&#xff1a;题目 #include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((int)6e5), c((int)6e5); const int mod 1e9 7; int sum[3333][4]; signed main() {int n;cin >>…

连接池

数据库连接池 锁定本词条由“科普中国”百科科学词条编写与应用工作项目 审核 。数据库连接池负责分配、管理和释放数据库连接&#xff0c;它允许应用程序重复使用一个现有的数据库连接&#xff0c;而不是再重新建立一个&#xff1b;释放空闲时间超过最大空闲时间的数据库连接…

1276A. As Simple as One and Two

A. As Simple as One and Two&#xff1a;题目 思路&#xff1a;删去中间#include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((int)6e5), c((int)6e5); const int mod 1e9 7; string s; signed …

【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器

【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器 广东职业技术学院 欧浩源 2017-10-21 1、引言 目前&#xff0c;除了官方文档之外&#xff0c;市面上及网络详细介绍BeautifulSoup使用的技术书籍和博客软文并不多&#xff0c;而在这仅有的资料中介绍CSS选择器的少之又少。…

1215B. The Number of Products

B. The Number of Products&#xff1a;题目 #include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); signed main() {int n;cin>>n;for (int i1;i<n;i) cin>>a[i];vector<int>dp(3);dp[1] dp[2] 0…

Mybatis基于XML配置SQL映射器(一)

Durid和Mybatis开发环境搭建 SpringBoot搭建基于SpringSpringMvcMybatis的REST服务&#xff08;http://www.cnblogs.com/nbfujx/p/7694768.html&#xff09; Mybatis之代码生成器 Maven Plugin管理 1 <build>2 <plugins>3 <plugin>4 …

1282B1. K for the Price of One (Easy Version)

B1. K for the Price of One (Easy Version)&#xff1a;题目 两种情况&#xff0c;前面取一或者前面不取#include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((int)6e5), c((int)6e5); const int …

GIT的Push和Pull,强制Pull覆盖本地命令

连接命令&#xff1a; git remote add origin 你Git库的地址 其中&#xff0c;origin是你对这个Git库地址的标识。 一. 把文件从本地上传到库中 第一步&#xff1a;使用命令 git add命令把文件添加到暂存区里面去。git add * 命令是将当前文件夹内所有文件均添加到暂存区。 举…

1284B. New Year and Ascent Sequence

B. New Year and Ascent Sequence&#xff1a;题目 小小思维题#include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((int)6e5), c((int)6e5); const int mod 1e9 7; signed main() {int t;cin>…

linux运维、架构之路-Zabbix监控

一、监控常用命令 1、物理服务器监控命令 ①添加yum源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo ②安装 yum -y install OpenIPMI ipmitoo…

505B. Mr. Kitayuta‘s Colorful Graph

B. Mr. Kitayuta’s Colorful Graph&#xff1a;题目 一开始就像到了DFS&#xff0c;并查集也不难想到。 弗洛伊德算法倒是不容易想到&#xff0c;平时不这么用。。。。。#include <bits/stdc.h> using namespace std; #define int long long // vector<int> a((i…

vi命令

vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器。 Linux中的vi编辑器叫vim&#xff0c;它是vi的增强版&#xff08;vi Improved&#xff09;&#xff0c;与vi编辑器完全兼容&#xff0c;而且实现了很多增强功能。 vi编辑器支持编辑模式和命令模式&#xff…

1189C. Candies

C. Candies&#xff1a;题目 思维题&#xff0c;我是笨蛋。我看了半天也没想明白怎么dp&#xff0c;可恶啊。#include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((int)6e5), c((int)6e5); const i…

SQL基本语法

SQL 基本语法 表库操作 创建表create table 表名(字段名 类型(长度) 约束,字段名 类型(长度) 约束); 创建主键约束id int primary key, primary key(id) // 在创建表最后创建主键约束 删除主键alter table 表名 drop primary key; 主键自动增长主键字段后加auto_increment(只适…

136. Single Number

Given an array of integers, every element appears twice except for one. Find that single one. 题目含义&#xff1a;给定的数组中&#xff0c;每个数字出现两次&#xff0c;只有一个数字出现了一次&#xff0c;找出这个数字 1 public int singleNumber(int[] nums) {…

797B. Odd sum

B. Odd sum&#xff1a;题目 一道小小的贪心#include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((int)6e5), c[(int)6e5]; const int mod 1e9 7; string s; multiset<int> se; signed mai…

602B. Approximating a Constant Range

B. Approximating a Constant Range&#xff1a;题目 可恶啊&#xff0c;不知道为什么我双指针的代码不过&#xff0c;重新写了个。。。。。#include <bits/stdc.h> using namespace std; #define int long long vector<int> a((int)6e5); vector<int> b((i…