学习打卡 2020/2/4

最新推荐文章于 2024-09-26 17:57:52 发布

1322767161

最新推荐文章于 2024-09-26 17:57:52 发布

阅读量295

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_42150768/article/details/104172733

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

寒假打卡 2020/2/4 ——淘宝静态页面

效果图片（晚上写的明天有空的叭）

一些效果图今天跟着视频整了个淘宝的静态页面，由于一些必要的图片只能截图，自己又懒，so…只写了个大概的框，一些文字内容就，放飞自我了~ 教学视频网址如下：

链接: https://ke.qq.com/webcourse/index.html#cid=231570&term_id=100273162&taid=2861371637336210&vid=5285890796490241647.

一些代码（一部分，我还没写完）

高亮的 代码片.

// An highlighted block
<!DOCTYPE html>
<html>

<head>
    <title>淘！你喜欢~~~</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="icon" href="taobao.ico">
    <base target="_blank">
</head>

<body>
    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix layer">
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#" class="login mr7"><strong>亲,请登录</strong></a>
                <a href="#" class="mr7">免费注册</a>
            </li>
            <li>
                <span class="iconfont mr5">&#xe63b;</span>
                <span>消息</span>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">手机逛淘宝</a>
            </li>
        </ul>
        <ul class="fr">
            <li>
                <a href="#">我的淘宝</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont mr5 c4">&#xe604;</span>购物车<strong class="c4">28</strong>
                </a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont mr5 store">&#xe627;</span>收藏夹
                </a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">商品分类</a>
            </li>
            <li class="line">|</li>
            <li>
                <a href="#">千牛卖家中心</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">联系客服</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont mr5 c4">&#xe611;</span>网站导航
                </a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
        </ul>
    </div>
    <!-- 头部广告 -->
    <div id="headAd">
    	<div class="layer clearfix">
    		<a href="#" class="fl go"><img src="img/smallP.PNG" alt="图片"></a>
    		<ul class="fr">
    			<li class="item1">
    				<a href="#" class="fr">
    					<img src="img/smallP.PNG" alt="图片">
    				</a>
    				<h3><a href="">电视会场</a></h3>
    				<p><a href="">直降2000</a></p>
    			</li>
    			<li class="item2">
    				<a href="#" class="fr">
    					<img src="img/smallP.PNG" alt="图片">
    				</a>
    				<h3><a href="">迪士尼</a></h3>
    				<p><a href="">直降3000</a></p>
    			</li>
    			<li class="item3">
    				<a href="#" class="fr">
    					<img src="img/smallP.PNG" alt="图片">
    				</a>
    				<h3><a href="">宿舍用品</a></h3>
    				<p><a href="">直降100</a></p>
    			</li>
    			<li class="item4">
    				<a href="#" class="fr">
    					<img src="img/smallP.PNG" alt="图片">
    				</a>
    				<h3><a href="">芭比娃娃</a></h3>
    				<p><a href="">直降100</a></p>
    			</li>
    			<li class="item5">
    				<a href="#" class="fr">
    					<img src="img/smallP.PNG" alt="图片">
    				</a>
    				<h3><a href="">直升飞机</a></h3>
    				<p><a href="">直降10000</a></p>
    			</li>
    		</ul>
    	</div>
    </div>
    <!-- 头部搜索 -->
    <div id="headSearch">
    	<div class="layer clearfix">
    		<!-- 分三部分,先左右,后中间 -->
    		<h1 class="fl"><a href="#" id="Taobao" target="_blank">淘宝网</a></h1>
    		<!-- 二维码 -->
    		<div class="code fr">
    			<span class="iconfont close">&#xe637;</span>
    			<span class="c5">扫码好友</span>
    			<img src="img/smallP.PNG" alt="tupian">
    		</div>
    		<!-- 搜索栏 -->
    		<div class="search">
    			<!-- 搜索上部 -->
    			<ul class="searchTab clearfix">
    				<li class="active">宝贝</li>
    				<li>天猫</li>
    				<li>店铺</li>
    			</ul>
				<!-- 搜索中部 -->
    			<div class="searchContent clearfix">
    				<!-- 搜索框 -->
    				<div class="searchBox fl">
    					<input type="text">
    					<div class="placeholder">
    						<i class="iconfont">&#xe621;</i>
    						<span>dddddddddddddddddd</span>
    					</div>
    					<span class="iconfont">&#xe63f;</span>
    				</div>
					<!-- 搜索按钮 -->
    				<div class="btn fl">
    					<button class="submit">搜索</button>
    				</div>
    			</div>
    			<!-- 搜索下部 -->
    			<div class="hotkey">
    				<a href="#">新款连衣裙</a>
    				<a href="#">四件套</a>
    				<a href="#">潮流T恤</a>
    				<a href="#">时尚女鞋</a>
    				<a href="#">短裤</a>
    				<a href="#">男士外套</a>
    				<a href="#">墙纸</a>
    				<a href="#">行车记录仪</a>
    				<a href="#">半身裙</a>
    				<a href="#">新款男鞋</a>
    				<a href="#">耳机</a>
    				<a href="#">时尚女包</a>
    				<a href="#">沙发</a>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- 第一屏幕 -->
    <div id="firstScreen">
    </div>
    <!-- 第二屏幕 -->
    <div id="secScreen">
    </div>
</body>

</html>