国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

攜程網(wǎng)移動端首頁制作（html5+css3）

2年前作者：俗世沒有清歡分類：Toy博客閱讀(28)違法舉報

這篇具有很好參考價值的文章主要介紹了攜程網(wǎng)移動端首頁制作（html5+css3）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1.預(yù)期完成效果

主要是自己做記錄，記錄做的過程以及遇到的一些問題

攜程網(wǎng)移動端首頁制作（html5+css3）

2.開始制作

2.1 搜索框的制作

攜程網(wǎng)移動端首頁制作（html5+css3）

1.首先引入normal.css（Normalize.css: Make browsers render all elements more consistently.）。其中搜索符號使用圖標，阿里圖標（iconfont-阿里巴巴矢量圖標庫）：打開網(wǎng)址搜索需要的圖標，添加到自己的項目中，點擊“download code” ，下載后將壓縮包放進項目中進行解壓使用。

攜程網(wǎng)移動端首頁制作（html5+css3）

2.遇到的問題：手機模式下搜索框顯示不完全

攜程網(wǎng)移動端首頁制作（html5+css3）

解決：給搜索框最大的盒子添加width:100%;

2.2 導(dǎo)航欄的制作

攜程網(wǎng)移動端首頁制作（html5+css3）

1.上面為圖標，下面為文字的，可以采用flex布局將主軸設(shè)置成y軸，然后將側(cè)軸設(shè)置為居中對齊。

2.漸變色的制作：background: -webkit-linear-gradient(起始方向 顏色1, 顏色2,...);

3.flex:wrap;換行

2.3銷售模塊制作

攜程網(wǎng)移動端首頁制作（html5+css3）

1.分為兩個盒子，采用flex布局，各占50%

2.遇到的問題：

（1）在切換為移動設(shè)備仿真時，頁面顯示不完全，如圖

攜程網(wǎng)移動端首頁制作（html5+css3）

修改了<head></head>標簽中的 <meta name="viewport"???content="width=device-width,user-scalable=no,initial-scale=0.7,user-scalable=yes,maximum-scale=1.0,minimum-scale=0.7">，將原本的1.0替換成了0.7，雖然可以正常顯示了，但是不知道有沒有更好的方法。

（2）寫“權(quán)威排行榜”的時候樣式突然不起效果，如圖

攜程網(wǎng)移動端首頁制作（html5+css3）

后來發(fā)現(xiàn)自己html代碼中把它的類名寫錯位置了，寫在了href里面哈哈哈哈我還疑惑了半天?

（3）滾動的時候搜索框無法顯示在最上面，如圖

攜程網(wǎng)移動端首頁制作（html5+css3）

?給搜索框的大盒子添加 z-index: 1;置于最上層

2.4 底部圖片

攜程網(wǎng)移動端首頁制作（html5+css3）

1.準備一個盒子，放一張圖片

2.5 底部工具模塊

攜程網(wǎng)移動端首頁制作（html5+css3）

1.需要下載新圖標；小豎線采用偽類選擇器做；&nbsp；空格符號

2.遇到的問題：

（1）在做“網(wǎng)站地圖”和“電腦版”中間那根小豎線時，用的after偽類選擇器，采用定位，但是一直沒有內(nèi)容，后面發(fā)現(xiàn)是把background-color寫成了color

（2）2022前面的那個符號不會寫，不知道是怎么來的

2.6 底部導(dǎo)航欄模塊

攜程網(wǎng)移動端首頁制作（html5+css3）

1.大盒子用flex布局，每個占25%；小盒子為一個圖標加文字，采用flex布局，將主軸設(shè)置成y軸；圖標是精靈圖

3. 代碼部分

html代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=0.7,user-scalable=yes,maximum-scale=1.0,minimum-scale=0.7">
    <!-- 引入我們的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>攜程旅行-酒店預(yù)訂，機票預(yù)訂查詢</title>
</head>

<body>
    <!-- 搜索框 -->
    <div class="search-box">
        <div class="search">
            <i class="iconfont icon">&#xe651;</i>
            <span>搜索：目的地/酒店/景點/航班號</span>
        </div>
    </div>
    <!-- 導(dǎo)航欄 -->
    <nav>
        <ul class="nav-entry">
            <li class="nav-entry-li1">
                <a href="#">
                    <span class="nav-entry-icon1"></span>
                    <span>酒店</span>
                </a>
            </li>
            <li class="nav-entry-li2">
                <a href="#">
                    <span class="nav-entry-icon2"></span>
                    <span>機票</span>
                </a>
            </li>
            <li class="nav-entry-li3">
                <a href="#">
                    <span class="nav-entry-icon3"></span>
                    <span>火車票</span>
                </a>
            </li>
            <li class="nav-entry-li4">
                <a href="#">
                    <span class="nav-entry-icon4"></span>
                    <span>旅游</span>
                </a>
            </li>
            <li class="nav-entry-li5">
                <a href="#">
                    <span class="nav-entry-icon5"></span>
                    <span>攻略景點</span>
                </a>
            </li>
            <li class="nav-entry-li6">
                <a href="#">
                    <span class="nav-entry-icon6"></span>
                    <span>民宿/客棧</span>
                </a>
            </li>
            <li class="nav-entry-li7">
                <a href="#">
                    <span class="nav-entry-icon7"></span>
                    <span>機+酒</span>
                </a>
            </li>
            <li class="nav-entry-li8">
                <a href="#">
                    <span class="nav-entry-icon8"></span>
                    <span>汽車/船票</span>
                </a>
            </li>
            <li class="nav-entry-li9">
                <a href="#">
                    <span class="nav-entry-icon9"></span>
                    <span>門票/活動</span>
                </a>
            </li>
            <li class="nav-entry-li10">
                <a href="#">
                    <span class="nav-entry-icon10"></span>
                    <span>美食</span>
                </a>
            </li>
            <li class="nav-entry-li11">
                <a href="#">
                    <span class="nav-entry-icon11"></span>
                    <span>特價/爆款</span>
                </a>
            </li>
            <li class="nav-entry-li12">
                <a href="#">
                    <span class="nav-entry-icon12"></span>
                    <span>接送機/包車</span>
                </a>
            </li>
            <li class="nav-entry-li13">
                <a href="#">
                    <span class="nav-entry-icon13"></span>
                    <span>租車</span>
                </a>
            </li>
            <li class="nav-entry-li14">
                <a href="#">
                    <span class="nav-entry-icon14"></span>
                    <span>周邊游</span>
                </a>
            </li>
            <li class="nav-entry-li15">
                <a href="#">
                    <span class="nav-entry-icon15"></span>
                    <span>購物/免稅</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- 銷售模塊 -->
    <div class="sales">
        <div class="salse-hd">
            <!-- 左邊 -->
            <div class="sales-tejia">
                <div class="tejia-hd">
                    <a href="#" class="tejia-hd-zuo"></a>
                    <a href="#" class="tejia-hd-you">特價好貨直播中</a>
                </div>
                <div class="tejia-bd">
                    <a href="#"></a>
                </div>
                <div class="tejia-ft">
                    <a href="#">￥</a>
                    <a href="#">660</a>
                </div>
            </div>
            <!-- 右邊 -->
            <div class="sales-rank">
                <div class="rank-hd">
                    <a href="#" class="rank-hd-zuo"></a>
                    <a href="#" class="rank-hd-you">權(quán)威排行榜</a>
                </div>
                <div class="rank-bd">
                    <div class="rank-bd-zuo">
                        <a href="#" class="tu"></a>
                        <span class="tubiao">上海</span>
                        <span class="text">上海10大奢華酒店</span>
                    </div>
                    <div class="rank-bd-you">
                        <a href="#" class="tu"></a>
                        <span class="tubiao">上海</span>
                        <span class="text">上海親子樂園酒店榜</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部圖片 -->
    <div class="bottom-img">
        <a href="#"></a>
    </div>
    <!-- 底部功能模塊 -->
    <div class="toolbox">
        <div class="tool-group">
            <a href="#" class="link">
                <span class="iconfont">&#xe88b;</span>
                <span>電話預(yù)訂</span>
            </a>
            <a href="#" class="download">
                <span class="iconfont">&#xe668;</span>
                <span>下載攜程</span>
            </a>
        </div>
        <div class="tool-text">
            <a href="#" class="zuo">網(wǎng)站地圖</a>
            <a href="#">電腦版</a>
            <p>c2022攜程旅行 &nbsp;瀘ICP備08023580號</p>
        </div>
    </div>
    <!-- 底部導(dǎo)航欄 -->
    <!-- 局部導(dǎo)航欄 -->
    <ul class="bottom-nav">
        <li>
            <a href="#">
                <span class="local-nav-icon-icon1"></span>
                <span>首頁</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon2"></span>
                <span>社區(qū)</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon3"></span>
                <span>消息</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon4"></span>
                <span>我的</span>
            </a>
        </li>
    </ul>
</body>

</html>

?css代碼

body {
    color: #000;
    /* 防止水平滾動條出現(xiàn) */
    overflow-x: hidden;
    /* 防止一些元素點擊之后背景會高亮 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;
    background: #f4f4f4;
}

div {
    box-sizing: border-box;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.woff2?t=1662898789972') format('woff2'),
        url('../fonts/iconfont.woff?t=1662898789972') format('woff'),
        url('../fonts/iconfont.ttf?t=1662898789972') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 搜索框 */
.search-box {
    /* 因為滾動時一直保持在上面，所以用固定定位 */
    position: fixed;
    /* 在頁面最上層 */
    z-index: 1;
    top: 0;
    display: flex;
    width: 100%;
    height: 50px;
    max-width: 540px;
    min-width: 320px;
    background-color: #fff;
}

.search {
    flex: 1;
    width: 516px;
    height: 32px;
    border: 1.5px solid #377ab1;
    border-radius: 16px;
    margin: 10px;
}

.search .icon {
    position: absolute;
    top: 11px;
    left: 24px;
    font-size: 20px;
}

.search span {
    position: absolute;
    top: 13px;
    left: 53px;
    color: #a2a2a2;
    font-size: 16px;
}

/* 導(dǎo)航欄模塊 */
nav {
    margin-top: 50px;
    height: 184px;
    width: 100%;
}

.nav-entry {
    display: flex;
    padding: 6px 12px 2px;
    background-color: #fff;
    /* 換行 */
    flex-wrap: wrap;
    /* 因為沒有寬度所以只寫上面這一句不會換行 將flex寫成百分比，相對于父級來說*/
}

.nav-entry li [class^="nav-entry-icon"] {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background-size: 28px auto;
}

.nav-entry-icon1 {
    background: url(../images/hotel.png) no-repeat;
}

.nav-entry-icon2 {
    background: url(../images/flight.png) no-repeat;
}

.nav-entry-icon3 {
    background: url(../images/train_ticket.png) no-repeat;
}

.nav-entry-icon4 {
    background: url(../images/vacation.png) no-repeat;
}

.nav-entry-icon5 {
    background: url(../images/gs.png) no-repeat;
}

.nav-entry-icon6 {
    background: url(../images/hotel_inn.png) no-repeat;
}

.nav-entry-icon7 {
    background: url(../images/flight_package.png) no-repeat;
}

.nav-entry-icon8 {
    background: url(../images/bus_ticket.png) no-repeat;
}

.nav-entry-icon9 {
    background: url(../images/ticket.png) no-repeat;
}

.nav-entry-icon10 {
    background: url(../images/food.png) no-repeat;
}

.nav-entry-icon11 {
    background: url(../images/hotel_sale.png) no-repeat;
}

.nav-entry-icon12 {
    background: url(../images/airport_transfer.png) no-repeat;
}

.nav-entry-icon13 {
    background: url(../images/car.png) no-repeat;
}

.nav-entry-icon14 {
    background: url(../images/weekend.png) no-repeat;
}

.nav-entry-icon15 {
    background: url(../images/shop.png) no-repeat;
}

.nav-entry [class^="nav-entry-li"] {
    flex: 18%;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.nav-entry-li1 {
    border-radius: 8px 0 0 0;
    /* 漸變色 */
    background: -webkit-linear-gradient(#fb5f53, #fc8251);
}

.nav-entry-li2 {
    background: -webkit-linear-gradient(#3e87fa, #4facf9);
}

.nav-entry-li3 {
    background: -webkit-linear-gradient(#6084fe, #6aa1ff);
}

.nav-entry-li4 {
    background: -webkit-linear-gradient(#32c5b5, #4ed5b4);
}

.nav-entry-li5 {
    border-radius: 0 8px 0 0;
    background: -webkit-linear-gradient(#ff8c39, #ffa338);
}

.nav-entry-li6,
.nav-entry-li11 {
    background-color: #fff6f1;
}

.nav-entry-li11 {
    border-radius: 0 0 0 8px;
}

.nav-entry-li7,
.nav-entry-li12 {
    background-color: #f1f8ff;
}

.nav-entry-li8,
.nav-entry-li13 {
    background-color: #f2f4ff;
}

.nav-entry-li9,
.nav-entry-li14 {
    background-color: #ecfcf9;
}

.nav-entry-li10,
.nav-entry-li15 {
    background-color: #fff8f3;
}

.nav-entry-li15 {
    border-radius: 0 0 8px 0;
}

.nav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    color: #fff;
}

.nav-entry [class^="nav-entry-li"]:nth-child(n+6) a {
    color: #2d2824;
}

/* 銷售模塊 */
.sales {
    display: flex;
    width: 100%;
}

.salse-hd {
    display: flex;
    flex: 1;
}

/* 特價直播 */
.sales-tejia {
    height: 148px;
    flex: 50%;
    background-color: #fff;
    border-radius: 8px;
    margin: -7px 16px;
}

.tejia-hd {
    position: relative;
}

.tejia-hd-zuo {
    display: inline-block;
    width: 73px;
    height: 20px;
    background: url(../images/salezb.png) no-repeat;
    background-size: 73px auto;
    margin: 6px;
}

.tejia-hd-you {
    position: absolute;
    top: 8px;
    right: 9px;
    display: inline-block;
    width: 84px;
    height: 18px;
    color: #ff4607;
    font-size: 12px;
    background-color: #ffebe3;
    padding: 1px 4px;
    border-radius: 2px;
}

.tejia-bd a {
    display: inline-block;
    width: 230px;
    height: 84px;
    border-radius: 8px;
    margin-left: 6px;
    background: url(../upload/02018120008mxmb3g3DDF_D_280_280_R5.jpg) no-repeat center;
    background-size: 238px auto;
}

.tejia-ft a {
    color: #f06500;
    margin: 5px;
    font-weight: 700;
}

.tejia-ft a:nth-child(2) {
    margin: -9px;
}

/* 攜程精選榜 */
.sales-rank {
    flex: 50%;
    height: 148px;
    background-color: #fff;
    border-radius: 8px;
    margin: -7px 3px;
}

.rank-hd {
    position: relative;
}

.rank-hd-zuo {
    display: block;
    width: 73px;
    height: 20px;
    background: url(../upload/0zc6g120008g0hcb587E5.png) no-repeat;
    background-size: 73px auto;
    margin: 8px;
}

.rank-hd-you {
    position: absolute;
    top: 1px;
    right: 9px;
    display: inline-block;
    width: 61px;
    height: 18px;
    color: #ae6e15;
    font-size: 12px;
    background-color: #fdefd2;
    padding: 1px 4px;
    border-radius: 2px;
}

.rank-bd {
    display: flex;
}

.rank-bd-zuo {
    position: relative;
    overflow: hidden;
    flex: 50%;
}

.rank-bd .tu {

    display: inline-block;
    width: 117px;
    height: 84px;
    border-radius: 8px;
}

.rank-bd-zuo .tu {
    background: url(../upload/zuo.jpg) no-repeat center;
    background-size: 117px auto;
    margin: 0 6px;
}

.rank-bd-you {
    overflow: hidden;
    position: relative;
}

.rank-bd-you .tu {
    background: url(../upload/you.webp) center;
    background-size: 117px auto;
}

.rank-bd .tubiao {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 16px;
    color: #663c00;
    font-size: 12px;
    background-color: #dab996;
    border-radius: 8px 0 8px 0;
}

.rank-bd .rank-bd-zuo .tubiao {
    left: 6px;
}

.text {
    display: block;
    font-size: 12px;
}

/* 底部圖片 */
.bottom-img a {
    display: block;
    height: 129px;
    width: 518px;
    background: url(../upload/bottom.jpg)no-repeat;
    background-size: 518px auto;
    margin: 20px 18px;
    border-radius: 8px;
}

/* 底部工具模塊 */
.tool-group .link,
.download {
    box-sizing: border-box;
    display: inline-block;
    width: 104px;
    height: 34px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    color: #000;
}

.link {
    margin: 7px 153px 14px 100px;
}

.tool-text a {
    display: inline-block;
    color: #666;
    /* padding: 10px; */
    width: 96px;
    height: 15px;
}

.tool-text a:nth-child(2) {
    margin-left: 12px;
}

.tool-text .zuo {
    position: relative;
    margin-top: 9px;
    margin-left: 200px;
}

.tool-text .zuo::after {
    position: absolute;
    top: 2px;
    left: 85px;
    content: "";
    background-color: #e0e0e0;
    width: 1px;
    height: 18px;
}

.tool-text p {
    color: #666;
    margin-left: 171px;
    font-size: 13px;
}

/* 底部導(dǎo)航欄 */
.bottom-nav {
    display: flex;
    height: 49px;
    background-color: #fff;
}

.bottom-nav li {
    flex: 1;
}

.bottom-nav a {
    display: flex;
    /* 將主軸設(shè)置成y軸 */
    flex-direction: column;
    /* 側(cè)軸居中對齊 單行的· */
    align-items: center;
    font-size: 12px;
    color: #666;
}

/* 利用屬性選擇器 */
.bottom-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background: url(../images/tabbar.png) no-repeat 0 0;
    background-size: 32px auto;
}

.bottom-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.bottom-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.bottom-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.bottom-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}

4. 完成效果

攜程網(wǎng)移動端首頁制作（html5+css3）

5. 總結(jié)

? ? ? 內(nèi)容參考來自b站的up主：黑馬前端 的pink老師前端入門教程。自己動手做的時候感覺自己學(xué)的太差了嗚嗚嗚，什么都沒掌握好，最后的完成效果也一般，完成時間也比預(yù)期中耗費的更多，只能說繼續(xù)努力吧。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-447836.html

到了這里，關(guān)于攜程網(wǎng)移動端首頁制作（html5+css3）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • CSS3與HTML5

    CSS3與HTML5

    box-sizing content-box：默認，寬高包不含邊框和內(nèi)邊距 border-box：也叫怪異盒子，寬高包含邊框和內(nèi)邊距 動畫：移動translate，旋轉(zhuǎn)、transform等等 走馬燈：利用動畫實現(xiàn)animation：from… to… 隱藏元素： visibility：hidden 占位 display：none 不占位 畫頁面前重置瀏覽器自帶樣式 快格式化上

    2024年02月07日
    瀏覽(35)
  • HTML5和CSS3筆記

    HTML5和CSS3筆記

    1.1：頁面結(jié)構(gòu)： 1.2：標簽類型： 1.2.1：塊標簽： ?1.2.2：行內(nèi)標簽： 1.2.3：行內(nèi)塊標簽： 1.2.4：塊標簽與行內(nèi)標簽的轉(zhuǎn)換： （可以設(shè)置在不在同一行和隱藏） 1.3：表單與表格標簽： ? 表單：? ? 表格：? ?1.4：H5標簽： 1.4.1：語義標簽： ? 1.4.2：多媒體標簽： （音頻audio和視

    2024年03月24日
    瀏覽(23)

  • html5和css3的新特性

    標簽 ????????!-- 高亮 mark -- ?? ??? ?!-- 摘要概述 -- ?? ??? ?details ?? ??? ??? ?summary ?? ??? ??? ??? ?咖啡 ?? ??? ??? ?/summary ?? ??? ??? ?ul ?? ??? ??? ??? ?li拿鐵/li ?? ??? ??? ??? ?li美式/li ?? ??? ??? ?/ul ?? ??? ?/details ?? ??? ???

    2024年02月11日
    瀏覽(32)

  • HTML5CSS3提高

    HTML5 的新增特性主要是針對于以前的不足，增加了一些新的標簽、新的表單和新的表單屬性等。 這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器 才支持，如果不考慮兼容性問題，可以大量使用這些新特性。 以前布局，我們基本用 div 來做。div 對于搜索引擎來說，

    2024年02月14日
    瀏覽(25)
  • 尚硅谷html5+css3（3）布局

    尚硅谷html5+css3（3）布局

    1.文檔流normal flow -網(wǎng)頁是一個多層結(jié)構(gòu) -通過CSS可以分別為每一層設(shè)置樣式 -用戶只能看到最頂層 -最底層：文檔流（我們所創(chuàng)建的元素默認都是從文檔流中進行排列） 2.盒子模型 ? 1.盒子模型-邊框 2.盒子模型-內(nèi)邊距 3.盒子模型-外邊距 4.盒子模型-水平方向的布局 5.盒子模型

    2024年04月09日
    瀏覽(42)
  • HTML5+CSS3實現(xiàn)小米商城 （完整版）

    HTML5+CSS3實現(xiàn)小米商城 （完整版）

    對于小米商城，也是自己初學(xué)前端的一個小作品吧，這個網(wǎng)頁大概寫了有三四天吧，總體感受就是寫著還行，只要有耐心，就一定能成功。 畢竟第一次做，代碼寫的可能比較亂，命名可能也不是太規(guī)范，以后多加改正。 基本還原了原網(wǎng)頁，并且只用到了CSS3和HTML5。 鏈接：

    2024年02月04日
    瀏覽(20)
  • h5(html5)+css3前端筆記二

    h5(html5)+css3前端筆記二

    一、表格標簽 表格的主要作用： 表格主要用于 顯示、展示數(shù)據(jù) ，因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。 1. table/table 用來定義表格的標簽

    2024年02月14日
    瀏覽(32)
  • 響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初體驗 項目1-1 三欄布局頁面

    響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初體驗 項目1-1 三欄布局頁面

    三欄布局是一種常用的網(wǎng)頁布局結(jié)構(gòu)。 除了頭部區(qū)域、底部區(qū)域外，中間的區(qū)域（主體區(qū)域）劃分成了三個欄目，分別是左側(cè)邊欄、內(nèi)容區(qū)域和右側(cè)邊欄，這三個欄目就構(gòu)成了三欄布局。當瀏覽器的寬度發(fā)聲變化時，頁面中左側(cè)邊欄和右側(cè)邊欄的寬度固定不變，而內(nèi)容區(qū)域的

    2024年01月17日
    瀏覽(37)

  • 【前端基礎(chǔ)篇】HTML5 + CSS3 入門知識

    萬維網(wǎng)的核心語言、標準通用標記語言下的一個應(yīng)用超文本標記語言（HTML）的第五次重大修改（這是一項推薦標準、外語原文：W3C Recommendation） HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定。 HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。 HTML5 簡

    2024年02月09日
    瀏覽(24)
  • HTML5+CSS3實現(xiàn)小米官網(wǎng)（完整版）

    HTML5+CSS3實現(xiàn)小米官網(wǎng)（完整版）

    小米官網(wǎng)其實是一個結(jié)構(gòu)非常簡單的網(wǎng)頁，相比與小米商城，難度降低了很多很多。我也寫過一次小米商城，可以移步到我的主頁。本篇文章簡單分析一下小米官網(wǎng)的靜態(tài)結(jié)構(gòu)，文章末尾附源代碼和素材。 先展示一下頁面的效果吧！ 1. 頭部導(dǎo)航欄 頭部導(dǎo)航欄可以用 fixed 定位

    2024年02月13日
    瀏覽(17)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包