导航，头部，CSS基础

发布时间：2023-09-06 01:18责任编辑：赖小花关键词：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>BIG SALE in TB</title> ???<base href="https://ai.taobao.com/?pid=mm_12351394_2325537_70732358" target="_blank"> ???<style...></style...></head><body><nav> ??????????<a class="logo" href="/"> ?????????????<img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1185915212.png" alt="Logo"></a> ??????????<a href="">我爱淘宝</a> ??????????<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> ??????<p></p> ??????<div> ??????????<p><span style="font-family: ‘Consolas‘, ‘Monaco‘, ‘Bitstream Vera Sans Mono‘, monospace;font-size: 40px;color: crimson">双11全部商品</span> ??????????????<span style="font-family: ‘Consolas‘, ‘Monaco‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 60px;color: crimson">50%OFF!!!</span></p> ??????</div> ??????<p></p> ??????<p></p> ??????<h1>LOOK AT HERE!!!</h1> ??????<p>双11全部商品50%OFF!!</p> ??????<p>双11全部商品50%OFF!!</p> ??????<p>双11全部商品50%OFF!!</p><p></p></body></html>

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>BOB!!!</title> ???<style type="text/css"> ???????p{ ???????????color: chocolate; ???????} ???????h1{ ???????????color: darkred; ???????????background-color: antiquewhite; ???????} ???????.textblue{ ???????????color: burlywood; ???????} ???</style></head><body> ?????<h1>NOTE!!</h1> ?????<p>BIG SALE!!! 50%OFF!!!</p> ?????<p>BIG SALE!!! 50%OFF!!!</p> ?????<p>BIG SALE!!! 50%OFF!!!</p></body></html>

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>BOB!!!</title> ???<style type="text/css"> ???????p{ ???????????color: chocolate; ???????} ???????h1{ ???????????color: darkred; ???????????background-color: antiquewhite; ???????} ???????.textblue{ ???????????color: dimgrey; ???????} ???</style></head><body> ?????<h1>NOTE!!</h1> ?????<p>BIG SALE!!! 50%OFF!!!</p> ?????<p>BIG SALE!!! 50%OFF!!!</p> ?????<p class="textblue">BIG SALE!!! 50%OFF!!!</p></body></html>

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<link rel="stylesheet" type="text/css" href="hw017.css"> ???<title>BOB!!!</title></head><body> ?????<h1>NOTE!!</h1> ?????<p>BIG SALE!!! 50%OFF!!!</p> ?????<p id="brown">BIG SALE!!! 50%OFF!!!</p> ?????<p class="textorange">BIG SALE!!! 50%OFF!!!</p></body></html>

h1{color: brown} ???????p{color: chocolate;} ???????.textorange{color: khaki;} ???????#brown{color: navajowhite;}

导航，头部，CSS基础

原文地址：http://www.cnblogs.com/laifai666/p/7683075.html

导航，头部，CSS基础

知识推荐