导航，头部，CSS基础

于 2017-10-17 19:42:00 发布
阅读量186 收藏
点赞数
原文链接：http://www.cnblogs.com/linf/p/7683511.html
版权

1、制作自己的导航条。

2、HTML头部元素：

  1. <base>  定义了页面链接标签的默认链接地址
  2. <style>  定义了HTML文档的样式文件
  3. <link>  定义了一个文档和外部资源之间的关系 3、练习样式表：
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
    4、分别练习定义三类选择器：
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器
    4. <!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==&amp;cv=2.0&amp;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>

转载于:https://www.cnblogs.com/linf/p/7683511.html

amldu86246
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值