JD实战之阶段一

来源：互联网发布：知网高质量知乎编辑：程序博客网时间：2024/05/21 07:09

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