利用html和csss實現京東首頁靜態頁面

阿新 • • 發佈：2018-12-23

京東首頁靜態頁面的程式碼書寫，熟悉html和css的使用和網頁頁面的實現。

1.編碼格式為UTF-8，由於頁面程式碼冗長，選擇外鏈式css檔案來加入css程式碼。

2.京東首頁整體分為頁面頭部導航，中部內容和頁面底部服務欄，其中頭部導航與底部服務在每個京東子頁面裡出現，可以將其css程式碼寫入base.css中

3.編寫html程式碼時重要的是進行結構分析，比如輪播圖的設計，首先使用<div></div>標籤構造一個大盒子，裡面包裹分別用ul標籤和ol標籤包裹若干li標籤，ol 裡的 li 負責表現 ul 裡的 li 的索引，在書寫css程式碼時 ol 需要進行絕對定位，子絕父相，div 需要相對定位.ul 裡的 li 需要左浮動，ul 需溢位隱藏。

4.html和css零碎知識多，結合W3C手冊，書寫web頁面可以快速系統的練習和掌握。

上程式碼 html程式碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>不是所有的頁面都叫京東</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<!--京東的頭部導航開始-->
<div class="shortcut">
    <div class="w">
        <div class="fl">
           <div class="dt"> 送至：北京
               <i><s>◇</s></i>
           </div>
        </div>
        <div class="fr">
            <ul>
                <li>
                    <a href="#">你好，請登入</a>   
                    <a href="#" class="col-red">免費註冊</a>
                </li>
                <li class="line"></li>
                <li>我的訂單</li>
                <li class="line"></li>
                <li class="fore">我的京東
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li>京東會員</li>
                <li class="line"></li>
                <li>企業採購</li>
                <li class="line"></li>
                <li class="fore tel-jd">
                    <em class="tel"></em>
                    手機京東
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li class="fore">
                    關注京東
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li class="fore">
                    客戶服務
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li class="fore">
                    網站導航
                    <i><s>◇</s></i>
                </li>
            </ul>
        </div>
    </div>

</div>
<!--京東頭部導航結束-->
<!--京東的topbanner部分-->
<div class="topbanner">
    <div class="w tp">
        <img src="images/topbanner.jpg" alt=""/>
        <a href="javascript:;" class="close-banner"></a>
    </div>
</div>
<!--京東的topbanner部分 end-->

<div class="w clearfix">
    <div class="logo">
        <a href="http://www.jd.com" target="_blank" class="jd-a" title="叮咚">京東</a>
        <div class="db11">
            <a href="#"><img src="images/dong.gif" alt=""/></a>
        </div>
    </div>
    <div class="search">
        <input type="text" name="" id="" value="圖書開搶"/>
        <button>搜尋</button>
    </div>
    <div class="car">
        <a href="#">俺的購物車</a>
        <span class="icon1"></span>
        <span class="icon2">></span>
        <span class="icon3">8</span>
    </div>
    <div class="hotwords">
        <a href="#" class="col-red">11月11天</a>
        <a href="#">11.11秒殺</a>
        <a href="#">買2免1</a>
        <a href="#">Note5 黑</a>
        <a href="#">12期免息</a>
        <a href="#">智慧科技</a>
        <a href="#">清倉</a>
        <a href="#">國際服飾</a>
        <a href="#">優惠券</a>
    </div>
</div>

<!--nav 部分開始-->

<div class="jd-nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt">
                <a href="#">全部商品分類</a>
            </div>
            <div class="dd">
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通訊</h3>
                    <span>></span>
                </div>

            </div>
        </div>
        <div class="navitems">
            <ul>
                <li><a href="#">服裝城</a></li>
                <li><a href="#">美妝館</a></li>
                <li><a href="#">超市</a></li>
                <li><a href="#">全球購</a></li>
                <li><a href="#">閃購</a></li>
                <li class="new"><a href="#">團購</a></li>
                <li><a href="#">拍賣</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">智慧</a></li>
            </ul>
        </div>
        <div class="bike">
            <a href="#"></a>
        </div>
    </div>
</div>

<!--
大banner
-->

<div class="banner604">
    <a href="#">
    </a>
</div>
<div class="w main clearfix">
    <div class="slider">
        <a href="#"><img src="images/slider1.jpg" alt=""/></a>
        <ul class="circle"> <!-- 小圓點-->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li class="current">6</li>
        </ul>

        <div class="arrow">   <!--左右兩個三角-->
            <a href="javascript:;" class="arrow-l"><</a>
            <a href="javascript:;" class="arrow-r">></a>
        </div>

    </div>
    <div class="news">
        <div class="jd-news">
            <div class="dt">
                <h3>京東快報</h3>
                <a href="#">更多></a>
            </div>
            <div class="dd">
                <ul>
                    <li><a href="#"><span>[特惠]</span>1元秒殺</a></li>
                    <li><a href="#"><span>[公告]</span>母嬰類APP【京東寶寶】上線</a></li>
                    <li><a href="#"><span>[特惠]</span>美的品牌日 APP嗨購大放“價”</a></li>
                    <li><a href="#"><span>[公告]</span>京東深入蒙牛生產基地進行質檢</a></li>
                    <li><a href="#"><span>[特惠]</span>白條購家電 24期免息！</a></li>
                </ul>

            </div>
        </div>
        <div class="lifeservi">
            <div class="dt">
                <h3>生活服務</h3>
            </div>
            <div class="dd">
                <ul>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon2">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#" class="song">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>

<!--雙11 的某個活動-->
<div class="w todays clearfix">
    <div class="night">
        <div class="night-l fl">
            <img src="images/night.jpg" alt=""/>
        </div>
        <div class="night-r">
            <ul>
                <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
            </ul>
        </div>
    </div>
</div>

<!--頁面底部開始-->
<div class="jd-footer">
    <div class="service">  <!--服務模組-->
        <div class="slogen">
            <span class="item slogen1">
                <img src="images/slogen1.png" alt=""/>
            </span>
            <span class="item slogen2">
                <img src="images/slogen2.png" alt=""/>
            </span>
            <span class="item slogen3">
                <img src="images/slogen3.png" alt=""/>
            </span>
            <span class="item slogen4">
                <img src="images/slogen4.png" alt=""/>
            </span>

        </div>
        <div class="w shopping clearfix">
            <dl>
                <dt><a href="#">購物指南</a></dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行/團購</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt><a href="#">購物指南</a></dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行/團購</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt><a href="#">購物指南</a></dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行/團購</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt><a href="#">購物指南</a></dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行/團購</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt><a href="#">購物指南</a></dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行/團購</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <div class="coverage">
                <div class="dt">京東自營覆蓋區縣</div>
                <div class="dd">
                   <p> 京東已向全國2357個區縣提供自營配送服務，支援貨到付款、POS機刷卡和售後上門服務。</p>
                    <p class="looklook"><a href="#">檢視詳情 ></a></p>
                </div>
            </div>
        </div>
    </div>
  
</div>
</body>
</html>

index.css程式碼

@charset "UTF-8";
.banner604 {
    position: relative;
}
.banner604 a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 604px;
    background: url(../images/banner.jpg) no-repeat top center;
}
.main {
    position: relative;
}
.slider {
    width: 730px;
    height: 453px;
    background-color: pink;
    margin: 12px 0 0  220px;
    float: left;
    position: relative;
}
.circle {
    position: absolute;
    bottom:8px;
    left: 50%;
    margin-left: -66px;
}
.circle li {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #3E3E3E;
    float: left;
    text-align: center;
    line-height: 18px;
    color: #fff;
    margin: 0 2px;
    cursor: pointer;
}
.circle li.current {
    background-color: #B61B1F;
}
.arrow-l, .arrow-r {
    position: absolute;
    width: 28px;
    height: 62px;
    top: 50%;
    margin-top: -31px;
    color: #fff;
    font: 500 18px/62px "宋體";
    text-align: center;
    background: rgba(0,0,0,.2);
}
.arrow-l {
    left: 0;
}
.arrow-r {
    right: 0;
}
.arrow-l:hover,.arrow-r:hover {
    background: rgba(0,0,0,.4);
    color: #fff;
}
.news {
    width: 248px;
    height: 451px;
    border: 1px solid #E4E4E4;
    float: right;
    margin-top: 12px;
}

.jd-news {
    height: 200px;
    border-bottom: 1px dashed #E4E4E4;  /*虛線*/
}
.jd-news .dt, .lifeservi .dt {
    height: 43px;
    border-bottom: 1px dotted #E8E8E7; /*點線*/
    line-height: 43px;
}
.jd-news .dt h3 ,.lifeservi .dt h3{
    float: left;
    font: 14px/43px "microsoft yahei";
    color: #666;
    padding-left: 15px;
}
.jd-news .dt a{
    float: right;
    font: 13px/43px "宋體";
    margin-right:15px;
}
.jd-news .dd ul {
    padding: 8px 0 0 15px;
}
.jd-news .dd li {
    line-height: 28px;
}
.jd-news .dd li span {
    font-weight: 700;
    margin-right: 5px;
}
.lifeservi {
    height:251px;
    overflow: hidden;
    width: 248px;
}
.lifeservi ul {
    width: 252px;
}
.lifeservi ul li {
    width: 62px;
    height: 70px;
    border: 1px solid #e4e4e4;
    border-top: 0;
    float: left;
    margin-left: -1px;
}
.lifeservi  li a{
    display: block;
    height: 70px;
    text-align: center;
    padding-top: 44px;
    position: relative;
}
.lifeservi  li  i{
    position: absolute;
    top:12px;
    left:18px;
    width: 25px;
    height: 25px;
    background: url(../images/icon_lifeserv.png) no-repeat right top;
}
.lifeservi-icon2 a i {
    background-position: right -25px;
}
.lifeservi .song {
    background: url(../images/song.png) no-repeat right top;
}

/*11 huodong*/
.todays {
    position: relative;
}
.night {
    margin: 10px 0 28px 0;
}
.night-r {
    width:1000px;
    height: 160px;
    float: right;
}
.night-r ul {

@charset "UTF-8";

base.css程式碼
/*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 {
    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";
    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
}

/*頭部導航開始*/
.shortcut {
    height: 30px;
    line-height: 30px;
    background-color: #f1f1f1;
}

.shortcut .dt,
.shortcut .fore {
    padding: 0 20px 0 10px;
    position: relative;
}

.shortcut .dt i,
.fore i {
    font: 400 15px/15px "宋體";
    position: absolute;
    top: 13px;
    right: 3px;
    height: 7px;
    overflow: hidden;
    width: 15px;
}

.shortcut .dt s,
.fore s {
    position: absolute;
    top: -8px;
    left: 0;
}

.fr li {
    float: left;
    padding: 0 10px;
}

.fr .line {
    width: 1px;
    height: 12px;
    background-color: #ddd;
    margin-top: 9px;
    padding: 0;
}
.shortcut .tel-jd {
    padding: 0 20px 0 25px;
}
.tel {
    position: absolute;
    width: 15px;
    height: 20px;
    background: url(../images/sprite.png) no-repeat;
    left: 5px;
    top: 5px;
}
/*頂部end*/
/*topbanner start*/
.topbanner {
    background-color: #8A25C6;
}
.close-banner {
    position: absolute;
    right: 0;
    top: 5px;
    width: 19px;
    height: 19px;
    background: url(../images/close.png) no-repeat;
}
.close-banner:hover {
    background-position: bottom;
}
.tp {
    position: relative;
}
/*topbanner end*/
.logo {
    width: 360px;
    height: 75px;
    background-color: pink;
    float: left;
    padding-top: 25px;
    background: url(../images/logo.png) no-repeat 0 25px;
    position: relative;
}

.jd-a {
    display: block;
    width: 270px;
    height: 60px;
    text-indent: -2000em;
}

.db11 {
    position: absolute;
    width: 180px;
    height: 80px;
    background-color: pink;
    top: 10px;
    left: 168px;
}

.search {
    width: 538px;
    height: 35px;
    float: left;
    margin-top: 25px;
}

.search input {
    width: 450px;
    height: 32px;
    border: 2px solid #B61D1D;
    padding-left: 4px;
    color: #666;
    font: 14px/32px "microsoft yahei";
    float: left;
}

.search button {
    width: 80px;
    height: 36px;
    background-color: #B61D1D;
    float: left;
    font: 16px/36px "microsoft yahei";
    color: #fff;
    cursor: pointer; /* 滑鼠變成小手*/
}

.car {
    width: 96px;
    padding-left: 43px;
    float: right;
    margin: 25px 65px 0 0;
    border: 1px solid #DFDFDF;
    line-height: 34px;
    position: relative;
}

.icon1 {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 16px;
    height: 13px;
    background: url(../images/sprite.png) no-repeat -1px -59px;
}

.icon2 {
    font: 400 13px/13px simsun;
    position: absolute;
    top: 10px;
    right: 10px;
}
.icon3 {
    position: absolute;
    width: 16px;
    height: 14px;
    background-color: #C81623;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    top: -4px;
    border-radius: 7px 7px 7px 0;
}

.hotwords {
    width: 500px;
    padding: 7px 0;
    float: left;
}

.hotwords a {
    margin-right: 6px;
}

/*nav 部分*/

.jd-nav {
    width: 100%;
    height: 44px;
    border-bottom: 2px solid #B1191A;
}
.dropdown {
    width: 210px;
    height: 44px;
    float: left;
    position: relative;
    z-index: 10;
    overflow: visible;
}
.dropdown .dt {
    height: 44px;
}
.dropdown .dt a {
    display: block;
    height: 44px;
    font: 400 15px/44px "microsoft yahei";
    background-color: #B1191A;
    color: #fff;
    padding-left: 10px;
}
.dropdown .dd {
    height: 465px;
    background-color: #C81623;
    margin-top: 2px;
}
.dropdown .items {
    height: 31px;
    line-height: 31px;
    border-left: 1px solid #B61D1D;
    padding-left: 10px;
    color: #fff;
    font-size: 15px;
    font-family:"微軟雅黑";
}
.dropdown .items h3 {
    float: left;
}
.dropdown .items span {
    float: right;
    margin-right: 15px;
    font-family: "宋體";
    font-weight: 600;

}
.navitems {
    width: 680px;
    height: 44px;
    float: left;
}
.navitems li {
    float: left;
}
.navitems li.new {
    background: url(../images/new.jpg) no-repeat right top;
}
.navitems li a {
    display: block;
    color: #333;
    font:400 15px/44px "微軟雅黑";
    padding:0 20px;
}
.navitems li a:hover {
    color: #B1191A;
}
.bike {
    width: 140px;
    height: 44px;
    background:url(../images/bike.jpg) no-repeat;
    float: right;
}
.bike a {
    display: block;
    height: 44px;
}



/*頭部分end*/
.slogen {
    height: 54px;
    padding: 20px 0;
    background-color: #f5f5f5;
    position: relative;
    margin-bottom: 15px;
}

.item {
    width: 302px;
    position: absolute;
    top: 20px;
    left: 50%;
}

.slogen1 {
    margin-left: -608px;
}

.slogen2 {
    margin-left: -304px;
}

.slogen3 {
    margin-left: 2px;
}

.slogen4 {
    margin-left: 304px;
}
.shopping dl {
    width: 198px;
    float: left;
}
.shopping dt,
.coverage .dt {
    font-size: 16px;
    height: 28px;
    font-family: "微軟雅黑";
    padding-top: 10px;
}
.shopping dd {
    height: 20px;
}
.coverage {
    float: right;
    width: 210px;
    height: 165px;
    background: url(../images/china.png) no-repeat left bottom;
}
.coverage .dd {
    margin-top: 10px;
}
.coverage p {
    line-height: 18px;
}
.looklook {
    text-align: right;
    margin-top: 5px;
}

.againw {
    border-top: 1px solid #E5E5E5;
    padding: 23px 0 30px 0;
    margin-top: 30px;
    text-align: center;
}
.links {
    height: 25px;
}
.links a {
    padding: 0 6px;
}
.copyright {
    line-height: 18px;
    margin-bottom: 10px;
}
/*底部 start*/

width: 500%; }.night-r li { float: left; margin-right: 1px;}

利用html和csss實現京東首頁靜態頁面

京東首頁靜態頁面的程式碼書寫，熟悉html和css的使用和網頁頁面的實現。 1.編碼格式為UTF-8，由於頁面程式碼冗長，選擇外鏈式css檔案來加入css程式碼。 2.京東首頁整體分為頁面頭部導航，中部內容和頁面底部服務欄，其中頭部導航與底部服務在每個京東子頁面裡出現，可以

利用html和Jquery實現照片牆（點選之後放大，再點選縮小）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jque

利用HTML和CSS設計一個靜態的“小米商城官網首頁”

一、小專案說明　　這是個例行的小專案練習，主要利用html和css的基礎知識，復刻一個縮減版的小米商城網頁。包括【導航欄】、【頭部logo區，快捷鍵、搜尋框】、【網頁主體】、【網頁尾部】幾個部分。目前只實現靜態的網頁顯示。最終效果圖如下：二、程式框架　　按照開發規範，先

利用ViewPager和Fragment實現頁卡切換

在微信和QQ中，頁面可以通過滑動切換，在Android應用開發中，利用ViewPager和Fragment可以實現這一功能。開發工具：Android Studio 3.0 程式碼示例： activity_a.xml（佈局）：<android.support.

利用SharePrefrence和Gson實現實體類的保存與獲取

getclass 類繼承 brush gets static 實現 highlight model htm 實現需要Gson獲者其他能將實體類轉換成json的jar包接下來是主要方法: 保存實體類 public static void putClass(ModelBa

手機商城第四天，利用GridView和viewpager實現頻道按鈕和熱門活動圖片的展示

手機商城第四天利用gridview和viewpager實現頻道按鈕和熱門活動圖片的展示代碼已經上傳碼雲，有興趣的小夥伴可以下載看看： https://git.oschina.net/joy_yuan/ShoppingMall 下面是這次的效果圖：其中哪些服飾、遊戲、動漫等欄目

（轉）利用 SVG 和 CSS3 實現有趣的邊框動畫

但是 cin 有一個 orm har arr edi 下載嘗試原文地址今天我們來探索一下Carl Philipe Brenner的網站上一個微妙而有趣的動畫效果。當鼠標經過網格元素時，會有一個微妙的動畫發生——網格元素變得透明，每條邊有個順時針的動畫，創造了非常好的效

利用inotify和rsync實現數據同步

幫助信息 delete 版本 rbo modify 啟用 gre 多個 roo 一.rsync是什麽？它是Linux系統下文件同步可數據傳輸的工具，采用rsync算法使客戶機與服務器，主服務器與備份服務器數據同步。rsync也能實現中斷後恢復傳輸。rsync支持增量備份。

Qt利用QLocalSocket和QLocalServer實現IPC

handler delet qstring OS client 但是 main his windows系統 QLocalServer提供了一種基於本地套接字的服務器，實現了接收本地socket的連接的功能。通過調用listen()監聽特定的連接，每次與client連接上時

用HTML和CSS實現點擊內容顯示再點擊隱藏

str har ctu box 點擊實現 aep anti 實現思路實現思路： 1.display:none,隱藏元素;點擊時display:black; 2.設置隱藏元素高度為0，overflow:hidden;點擊時overflow:visible; 由於第一條只能

Java利用wait和notify實現執行緒間通訊

Java的Object類提供了wait和notify方法用於實現執行緒間通訊(因為所有的java類都繼承了Object類，所以所有的java類都有這兩個方法)。這兩個方法在Object類中籤名如下： pu

京東首頁滾動樓層標識

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten

基於freemark，ssm和Oracle實現的分頁功能

freemark頁面`<#list mesgList as mesg> m e

利用python_opencv和dlib實現從視訊中抓取人臉照片並儲存(親測有效)

系統：win10 編譯環境：pycharm python庫：cv2、dlib(自己安裝) 程式碼： import dlib import cv2 # 載入並初始化檢測器 detector = dlib.get_frontal_face_detector() camera = cv2.

html+css實現小米商城首頁靜態頁面

學了一個星期的html和css，用新學的東西寫點東西，仿照小米商城的首頁按照它的頁面佈局盜用它的圖片寫了個小米商城的靜態頁面。原始碼：連結:https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ 密碼:lwc5 總結寫前端時的不足： css很

利用Ajax和JSON實現關於查詢省市名稱的二級聯動功能

　　功能實現的思路：我們經常碰見網上購物時候填寫收件地址會用到這個查詢省市縣的三級聯動查詢功能，我們可以利用Ajax和JSON技術模擬這個功能，說白了同樣是使用Ajax的區域性資料更新功能這個特性。因為省市都會有很多個，所以還需要使用JSONArray物件。當我們選擇某一個省的時候，會自動觸發一個區域性更新功

利用float和margin實現兩端對齊佈局

實現效果如下圖：這種佈局方式一般我們都會想到直接使用float浮動外加margin-right做右側留白，既實現多個小模組按順序排列，超出一行又會自動換行，從而實現這個效果。但是，實現過程中會遇到一個問題就是最右邊的留白處理問題，當然可以根據選擇每行會有多少個模組，設定：nth-.

根據字串的形式，自動匯入模組並使用反射找到模組中的類，並例項化物件，利用importlib和getattr實現的

例如： auth資料夾下一個SCRF.py檔案，裡面有一個Cors類 class CORS(object): def process_request(self): print('666') auth資料

利用ZipOutputStream和ZipInputStream實現檔案的壓縮和解壓縮

package cn.yimen.archiver.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.zip.ZipEn

利用MTCNN和facenet實現人臉檢測和人臉識別

利用MTCNN和facenet實現人臉檢測和人臉識別人臉檢測和人臉識別技術算是目前人工智慧方面應用最成熟的技術了。本部落格將利用mtcnn和faceNet搭建一個實現人臉檢測和人臉識別的系統。基本思路也很簡單，先利用mtcnn的進行人臉檢測，當然也可以使用其他的

利用html和csss實現京東首頁靜態頁面

相關推薦