导航,头部,CSS基础
1、制作自己的导航条。
2、HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系 3、练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- HTML 选择器
- CLASS 类选择器
- ID 选择器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东</title> </head> <body > <h1>京东商城</h1> <hr> <P>友情链接</P> <img alt="" src="//img10.360buyimg.com/da/jfs/t10924/231/1297191728/117761/e64aa294/59df27feN732bab56.jpg" class="J_slider_item_img slider_item_img"> <div id="header" style="background-color:cyan"><h2 align="center" style="margin-bottom:0;">登录</h2></div><br><a id="J_event_lk" href="//c-nfa.jd.com/adclick?keyStr=6PQwtwh0f06syGHwQVvRO7pzzm8GVdWoLPSzhvezmOUieGAQ0EB4PPcsnv4tPllwbxK7wW7Kf1CBkRCm1uYvOHqM58Dcknr2GoQi2F40vk4HMQrabvp5p/2QpF85qrUB4fLWlvRBkxoM4QrINBB7LTX65XLC69VOlwH2t5No5p840lAWEtwIvAD+CXKOTw+/jnSIFtrxkX4xkYbQvHViCGKnFtB6rhrxWO1MpkcMG5SoRUSOdb56zrttLfl8vNBFcptr0poJNKZrfeMvuWRplv4bRbtDQshzWfMXyqdyQxyNrmP1wRDLNloYOL46zk6YpGgD9f7DD80JI2OBqrgiZA==&cv=2.0&url=//sale.jd.com/act/MK4jGXvJfq0AUs.html" target="_blank" clstag="h|keycount|2016|99" style="display: block; width: 100%; height: 80px; background: url(//img11.360buyimg.com/da/jfs/t7903/345/2910663304/42843/55bdf027/59e021bcNee202576.jpg) no-repeat 50% 0;" fclog="15624.111725.421114.1.571_1816_8701"></a> <div id="content" style="background-color:navajowhite;height:150px;width:400px;float:left;"> <form> username:<input type="text" name="username" placeholder="请输入用户名"><br> password:<input type="password" name="password"><br> <input type="radio">游客 <input type="radio">会员 <input type="button" value="登录"> <input type="button" value="重置"> </form> </div> </div> <div id="container" style="width:400px " > <div id="header" style="background-color:deepskyblue"><h2 align="center" style="margin-bottom:0;">相关栏目/Related sections</h2> </div> <div id="content" style="background-color:lightskyblue;height:150px;width:400px;float:left;"> <form> <select> <option>问答</option> <option>收藏</option> </select> </form> <ul> <li>发现好货</li> <li>会买专辑</li> <li>排行榜</li> <li>领券中心</li> <li>新品首发</li> </ul> </div> </div> <div id="container" style="width:400px " > <div id="header" style="background-color:hotpink"><h2 align="center" style="margin-bottom:0;">快速通道 Fast Track</h2> </div> <div id="content" style="background-color:lightskyblue;height:150px;width:400px;float:left;"> <ol> <li>300减30用建行卡</li> <li>部分满199减100</li> <li>方太嗨购十月</li> </ol> <dl> < </div> <div id="footer" style="background-color:hotpink;clear:both;text-align:center;">版权 duym</div> </div> </body> </html>