导航，头部，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; }
浙公网安备 33010602011771号