JD实战之阶段一

最新推荐文章于 2020-11-20 20:33:17 发布

嘿！宁姑娘

最新推荐文章于 2020-11-20 20:33:17 发布

阅读量480

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Sunjiaxiaoning2015/article/details/78883702

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
<!--nav开始-->
<div class="site-nav">
    <div class="w">
        <div class="fl">
            <div class="site-nav-send">
                送至：北京
                <i><s>◇</s></i>
            </div>
        </div>
        <div class="fr">
            <ul>
                <li>
                    <a href="#">你好，请登录</a>&nbsp;
                    <a href="#">免费注册</a>
                </li>
                <li class="shu"></li>
                <li><a href="#">我的订单</a></li>
                <li class="shu"></li>
                <li class="fore">
                    <a href="#">我的京东</a>
                    <i><s>◇</s></i>
                </li>
                <li class="shu"></li>
                <li><a href="#">京东会员</a></li>
                <li class="shu"></li>
                <li><a href="#">企业采购</a></li>
                <li class="shu"></li>
                <li class="fore jd-tel">
                    <span></span>
                    <a href="#">手机京东</a>
                    <i><s>◇</s></i>
                </li>
                <li class="shu"></li>
                <li class="fore">
                    关注京东
                    <i><s>◇</s></i>
                </li>
                <li class="shu"></li>
                <li class="fore">
                    客服服务
                    <i><s>◇</s></i>
                </li>
                <li class="shu"></li>
                <li class="fore">
                    网站导航
                    <i><s>◇</s></i>
                </li>
            </ul>


        </div>
    </div>
</div>
<!--nav结束-->
<!--top-banner开始-->
<div class="top-banner">
    <div class="w top-banner-conter">
        <a href="#">
            <img src="images/top-banner.jpg" alt="">
        </a>
        <a href="#" class="close-banner"></a>
    </div>
</div>
<!--top-banner结束-->
<!--search开始-->
<div class="w">
    <div class="search-logo">
        <a href="#">京东</a>
    </div>
    <div class="search-input">
        <input type="text" value="运动相机">
        <button>搜索</button>
    </div>
    <div class="search-car">
        <a href="#">我的购物车</a>
        <i class="search-car-gwc"></i>
        <i class="search-car-jt">></i>
        <i class="search-car-mag">6</i>
    </div>
    <div class="search-moreAlink">
        <ul>
            <li><a href="#" class="col-red">30抵130</a></li>
            <li><a href="#">69元秒风扇</a></li>
            <li><a href="#">农用物资</a></li>
            <li><a href="#">200减40</a></li>
            <li><a href="#">啤酒趴</a></li>
            <li><a href="#">早教机</a></li>
            <li><a href="#">柠檬</a></li>
            <li><a href="#">0元试用</a></li>
            <li><a href="#">海苔</a></li>
        </ul>
    </div>
</div>
<!--search结束-->
</body>
</html>

base.css代码如下：

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}

fieldset, img, input, button {          /*fieldset组合表单中的相关元素*/
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}

ul, ol {
    list-style: none;               /*清除列表风格*/
}

input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}

select, input {
    vertical-align: middle;
}

select, input, textarea {
    font-size: 12px;
    margin: 0;
}

textarea {
    resize: none;
}

/*防止多行文本框拖动*/
img {
    border: 0;
    vertical-align: middle;
}

/*  去掉图片低测默认的3像素空白缝隙*/
table {
    border-collapse: collapse;          /*合并外边线*/
}


body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53";   /*宋体，Unicode，统一码*/
    color: #666;
    background: #fff
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #C81623;
}

h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

s, i, em {
    font-style: normal;
    text-decoration: none;
}

.col-red {
    color: #C81623 !important;
}

/*公共类*/
.w {
    /*版心 提取 */
    width: 1210px;
    margin: 0 auto;
}

.fl {
    float: left
}

.fr {
    float: right
}

.al {
    text-align: left
}

.ac {
    text-align: center
}

.ar {
    text-align: right
}

.hide {
    display: none
}
/*nav开始*/
.site-nav {
    height: 30px;
    background: #f0f0f0;
    line-height: 30px;
}
.site-nav .fore {
    position: relative;
    padding: 0 25px 0 10px;
}
.site-nav i{
    width: 15px;
    height: 7px;
    position: absolute;
    top: 12px;
    right: 8px;
    overflow: hidden;
}
.site-nav s{
    position: absolute;
    top: -8px;
    font: 400 12px/150% "consolas";
}
/*var right*/
.site-nav li{
    float: left;
    padding: 0 10px;
}
.site-nav li.shu{
    width: 1px;
    height: 15px;
    background: #ddd;
    padding: 0px;
    margin-top: 9px;
}
.jd-tel {
    position: relative;
}
.site-nav .jd-tel {
    padding-left:25px;
}
.site-nav .fore span {
    position: absolute;
    top: 5px;
    left: 7px;
    width: 15px;
    height: 20px;
    background: url("../images/tel.png") no-repeat;
}
/*nav结束*/


/*top-banner开始*/
.top-banner {
    background-color: #37C2FB;
}
.top-banner-conter {
    position: relative;
}
.close-banner {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 19px;
    height: 19px;
    background: url("../images/close-banner.png") no-repeat;
}
.close-banner:hover {
    background-position: bottom;
}
/*top-banner结束*/


/*search开始*/
.search-logo {
    width: 362px;
    height: 60px;
    padding: 20px 0;
    float: left;
}
.search-logo a {
    float: left;
    height: 60px;
    width: 270px;
    text-indent:-5000px;
    background: url("../images/logo.png") no-repeat;
}
.search-input {
    float: left;
    width: 538px;
    height: 36px;

    padding-top: 25px;
}
.search-input input {
    padding-left:5px;
    float: left;
    color: #cccccc;
    width: 449px;
    height: 32px;
    border: 2px solid #B61D1D;
    border-right:0;
}
.search-input button {
    float: left;
    height: 36px;
    width: 82px;
    background-color: #B61D1D;
    color: #fff;
    font: 400 16px/36px "microsoft yahei";
    cursor: pointer;
}
.search-car {
    float: right;
    width: 139px;
    height: 34px;
    text-align: center;
    position: relative;
    line-height: 34px;
    margin: 25px 65px 0 0;
    background-color: #F9F9F9;
    border: 1px solid #ddd;
}
.search-car-gwc {
    position: absolute;
    width: 18px;
    height: 16px;
    top: 9px;
    left: 18px;
    background: url("../images/tel.png") no-repeat 0 -58px;
}
.search-car-jt {
    position: absolute;
    font: 400 13px/34px "simsun";
    right: 10px;
}
.search-car-mag{
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 7px 7px 7px 0;
    top: -8px;
    right: 30px;
    background: #c00;
    color: #fff;
    line-height: 15px;
    text-align: center;
}
.search-moreAlink {
    float: left;
    width: 520px;
    height: 28px;
}
.search-moreAlink li{
    float: left;
    margin-right: 10px;
}
/*search结束*/

效果图展示：

笔记：

第1章京东案例
1.1 截图（要一个效果图）

1.2 搭建项目环境 (结构样式行为分离)
一、HTML 核心文件 index.html
二、CSS 控制样式
a）base.css(基础样式) b）global.css(全局样式)
三、Image 放图片的文件夹
四、JS 音频视频…..
1.3 站点
站点 == 项目 == 项目文件夹 == （根目录）

1.4 引入图标
一、下载
京东：www.jd.com/favicon.ico 能下载京东图标
所有：网站名（带www.）/favicon.ico 下载所有网站的图标
二、引入

<link rel="shortcut icon" href="favicon.ico"/>

网站名：bitbug.net
<link rel="shortcut icon" href=" /favicon.ico" /> 绿色部分删掉
1.5 小知识
font : 加粗字号/行高格式；行高如果不写，默认为0；

u ins 下划线
i em 倾斜
s del 删除线

font-weight: normal; 加粗变正常
font-style: normal; 倾斜变正常
text-decoration: none; 下划线删除线变正常
outline-style: none; 去除蓝色外边框
resize: none; 禁止文本框拖拽

1.6 京东结构布局
京东页面
京东布局

1.7 权限问题

1.8 盒子稳定性
一、只给宽高的盒子（宽/高度剩余法）
二、给padding的盒子

1.9 量取盒子高度

1.10 模拟鼠标
cursor: pointer; 鼠标变成小手
cursor: move; 鼠标变成四角箭头
cursor: text; 鼠标变成工形插入条光标

1.11 文字居中问题
1.text-align: center;
2.padding-left/padding-right;
3.定位、margin…….

Ctrl+Alt+T: 环绕标签

嘿！宁姑娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录