登录  /  注册
博主信息
博文 26
粉丝 0
评论 1
访问量 5937
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
08 仿手机网站首页布局
如水庵邸
原创
430人浏览过

1、仿php中文网首页,老师已经完成绝大部分,剩下的比较容易写。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/init.css">
    <link rel="stylesheet" href="static/css/style_m.css">
    <title>仿php中文网手机版</title>
</head>

<body>
    <!--布局原则: 宽宽自适应, 高度是固定-->
    <!--固定定位: 顶部-->
    <div class="top">
        <img src="static/images/user-pic.jpeg" alt="">
        <div class="logo"><img src="static/images/logo.png" alt=""></div>
        <img src="static/images/user-nav.jpg" alt="">
    </div>

    <!-- 轮播图 -->
    <div class="banner"><img src="static/images/banner.jpg" alt=""></div>
    <!-- 导航课程 -->
    <div class="nav">
        <ul>
            <li>
                <a href=""><img src="static/images/html.png" alt=""><br><b>HTML/CSS</b></a>
            </li>
            <li>
                <a href=""><img src="static/images/JavaScript.png" alt=""><br><b>JavaScript</b></a>
            </li>
            <li>
                <a href=""><img src="static/images/code.png" alt=""><br>服务端</a>
            </li>
            <li>
                <a href=""><img src="static/images/sql.png" alt=""><br>数据库</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="static/images/app.png" alt=""><br>移动端</a>
            </li>
            <li>
                <a href=""><img src="static/images/manual.png" alt=""><br>手册</a>
            </li>
            <li>
                <a href=""><img src="static/images/tool2.png" alt=""><br>工具</a>
            </li>
            <li>
                <a href=""><img src="static/images/live.png" alt=""><br>直播</a>
            </li>
        </ul>
    </div>
    <!-- 课程区 -->
    <h3>推荐课程</h3>
    <div class="courses">
        <ul>
            <li>
                <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
            </li>
        </ul>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a><br>
                <span>中级</span> <span>49959次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a><br>
                <span>初级</span> <span>211647次播放</span>
            </p>
        </div>
    </div>
    <br/>
    <h3>最新更新</h3>
    <div class="latest">
        <div>
            <a href=""><img src="static/images/laravel.jpg" alt=""></a>

            <p>
                <a href="">Laravel 5.8 中文文档手册</a><br>
                <span>《Laravel 5.1/5.8速查表:https://www.php.cn/phpkj/laravel/cheatsheet5...</span><br>
                <span>中级</span> <span>7730次播放</span>
            </p>
        </div>

        <div>

            <a href=""><img src="static/images/javascript.jpg" alt=""></a>

            <p>
                <a href="">JavaScript极速入门</a><br>
                <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编...</span><br>
                <span>初级</span> <span>49791次播放</span>
            </p>
        </div>

        <div>

            <a href=""><img src="static/images/7th.jpg" alt=""></a>

            <p>
                <a href="">第七期_直播体验课</a><br>
                <span>php中文网第七期线上***今晚(2019.7.1)正式开课啦~~!为了让广...</span><br>
                <span>初级</span> <span>7296次播放</span>
            </p>
        </div>
        <div>

            <a href=""><img src="static/images/css3.jpg" alt=""></a>

            <p>
                <a href="">CSS3极速入门</a><br>
                <span> html和css是组成WEB前端开发最核心的部分,所以结合之前的html课程...</span><br>
                <span>初级</span> <span>6788次播放</span>
            </p>
        </div>
        <div>

            <a href=""><img src="static/images/html5.jpg" alt=""></a>

            <p>
                <a href="">HTML5极速入门</a><br>
                <span>在本套课程中,你将学习如何使用 HTML 来创建站点,完成静态网页布...</span><br>
                <span>初级</span> <span>5789次播放</span>
            </p>
        </div>
        <div>

            <a href=""><img src="static/images/nodejs.jpg" alt=""></a>

            <p>
                <a href="">nodejs开发基础教程</a><br>
                <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js...</span><br>
                <span>初级</span> <span>4952次播放</span>
            </p>
        </div>


    </div>

    </div>
    <h3>最新文章</h3>
    <div class="articles">
        <div>
            <a href=""><img src="static/images/a1.jpg" alt=""></a>
            <p>
                <a href="">PHP之十六个魔术方法详解(总结)</a><br><br>
                <span>发布时间:2019-07-29</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/a2.png" alt=""></a>
            <p>
                <a href="">PHP生成折线图和饼图等</a><br><br>
                <span>发布时间:2019-08-02</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/a3.jpg" alt=""></a>
            <p>
                <a href="">PHP实现动态规划之***问题</a><br><br>
                <span>发布时间:2019-08-13</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/a4.jpg" alt=""></a>
            <p>
                <a href="">ThinkPHP6源码:从Http类的实例化看依赖注入是如何实现的</a><br><br>
                <span>发布时间:2019-09-06</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/a5.png" alt=""></a>
            <p>
                <a href="">PHP7中php.ini、php-fpm和www.conf 配置</a><br><br>
                <span>发布时间:2019-08-23</span>
            </p>
        </div>

    </div>
    <h6>更多内容</h6>
    <h3>最新博文</h3>
    <div class="blogs">


        <p>
            <a href="">mysql查询时间戳和日期的转换</a>
            <span>2019-09-07</span>
        </p>


        <p>
            <a href="">小程序实现复制文本内容</a>
            <span>2019-09-06</span>
        </p>


        <p>
            <a href="">js获取url链接中的域名部分</a>
            <span>2019-09-07</span>
        </p>



        <p>
            <a href="">小程序实现头像图片裁剪</a>
            <span>2019-09-03</span>
        </p>


        <p>
            <a href="">《悦帮到家》小程序</a>
            <span>2019-09-03</span>
        </p>

    </div>

    <h6>更多内容</h6>
    <h3>最新问答</h3>
    <div class="qas">
        <p>
            <a href="">照抄下拉为什么还是连不是,各种问题</a>
            <span>2019-09-14</span>
        </p>
        <p>
            <a href="">curl抓取页面之前都比较稳定,后来就输出空页面了</a>
            <span>2019-09-14</span>
        </p>

        <p>
            <a href="">导入项目源码访问学生管理的学生列表出错</a>
            <span>2019-09-14</span>
        </p>

        <p>
            <a href="">浏览器显示出来的字符都是框框七七八八的乱的东西</a>
            <span>2019-09-14</span>
        </p>
        <p>
            <a href="">服务器80端口telnet测试通,但网页还是无法打开</a>
            <span>2019-09-13</span>
        </p>

    </div>

    <div class="more">
    <h6>更多内容</h6>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <ul>
            <li>
                <a href=""><img src="static/font-icon/zhuye.png" alt=""><br/><span>主页</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/video.png" alt=""><br/><span>视频</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/luntan.png" alt=""><br/><span>社区</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/geren.png" alt=""><br/><span>我的</span></a>
            </li>
        </ul>
    </div>
</body>

</html>

第一个init.css 是清楚标签的默认样式

body {
    min-width: 320px;
    max-width: 768px;
    margin: 0 auto;
    background: #edeff0;
    overflow-y: initial;
    position: relative;

    /*不要出现水平滚动条*/
    overflow-x: hidden;
    /*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
    -webkit-tap-highlight-color: transparent;
}

第2个style_m.css是首页的布局

.top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 42px;
    background-color: #444444;
    min-width: 320px;
    max-width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top {
    display: flex;
}

.top img:first-of-type,
.top img:last-of-type {
    width: 25px;
    height: 25px;
    margin-top: 8px;
}

.top img:first-of-type {
    border-radius: 50%;
    margin-left: 5px;
}

.top .logo {
    text-align: center;
    flex: 1;
}

.top .logo img {
    width: 94px;
    height: 45px;
}


/*轮播图*/

.banner {
    display: flex;
}

.banner img {
    width: 100%;
    height: 160px;
}


/*导航区*/

.nav {
    height: 170px;
    background-color: white;
    box-sizing: border-box;
}

.nav ul {
    margin: 0;
    padding: 6px;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    height: 75px;
}

.nav ul li img {
    width: 45px;
    height: 45px;
}

.nav ul li a {
    text-align: center;
    color: gray;
    text-decoration: none;
}

.nav ul {
    display: flex;
}

.nav ul li {
    flex: 1;
}


/*推荐课程区*/

h3 {
    color: gray;
}

.courses {
    height: 326px;
    color: gray;
}

.courses ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /*flex布局*/
    display: flex;
}

.courses ul li {
    padding: 5px;
}

.courses ul img {
    width: 100%;
    height: 90px;
}

.courses div {
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    /*flex布局*/
    display: flex;
    justify-content: flex-start;
}

.courses div img {
    width: 100%;
    height: 90px;
}

.courses div a {
    text-decoration: none;
    color: gray;
    flex: 0.45;
}

.courses div p {
    flex: .55;
    margin-left: 15px;
}

.courses div p span:first-of-type {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 2px;
}

.courses div p span:last-of-type {
    font-size: 0.7rem;
}


/*最新推荐*/

.latest {
    color: #888;
    width: 100%;
}

.latest div {
    background-color: white;
    width: 100%;
    display: flex;
    white-space: nowrap;
    margin: 10px auto;
}

.latest div a {
    text-decoration: none;
    color: #888;
    flex: 0.45;
}

.latest div a img {
    padding: 10px;
    width: 330px;
    height: 90px;
}

.latest div p {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.latest div p a {
    color: #888;
    text-decoration: none;
    font-size: 1.2rem;
}

.latest div p span:first-of-type {
    font-size: 0.2rem;
    color: #888;
    margin: 10px 0 10px 5px;
}

.latest div p span:nth-last-of-type(2) {
    font-size: 0.7rem;
    background-color: #2d353c;
    color: white;
    border-radius: 35%;
    padding: 2px 5px;
    margin: 5px 0;
}

.latest div p span:last-of-type {
    font-size: 0.2rem;
    color: #888;
    margin-left: 280px;
}


/* 最新文章 */

.articles {
    width: 100%;
}

.articles div {
    background-color: white;
    width: 100%;
    height: 90px;
    display: flex;
    flex-direction: row-reverse;
    margin: 10px 0;
    align-items: center;
}

.articles div img {
    width: 218px;
    height: 65px;
}

.articles div a {
    text-decoration: none;
    color: #888;
    flex: 0.3;
    font-weight: bold;
}

.articles div p {
    margin: 0;
    flex: 0.7;
}

.articles div p a {
    padding-left: 15px;
    font-size: 0.9rem;
}

.articles div p span {
    color: #888;
    font-size: 0.5rem;
    padding-left: 15px;
}

h6 {
    width: 100%;
    background-color: white;
    text-align: center;
    font-size: 0.14px;
    margin: 0;
    padding: 5px 0;
    color: #888;
    letter-spacing: 2px;
}


/* 最新博文 */

.blogs {
    width: 100%;
}

.blogs p {
    background-color: white;
    margin: 10px 0;
    display: flex;
    padding: 10px 0;
}

.blogs a {
    text-decoration: none;
    color: #888;
    padding-left: 15px;
    font-weight: bold;
    font-size: 0.9rem;
    flex: 0.9;
}

.blogs p span {
    color: #888;
    font-size: 0.5rem;
    flex: 0.1;
}


/* 最新问答 */

.qas {
    width: 100%;
}

.qas p {
    background-color: white;
    padding: 10px 0;
    display: flex;
}

.qas p a {
    text-decoration: none;
    color: #888;
    padding-left: 15px;
    font-weight: bold;
    font-size: 0.9rem;
    flex: 0.9;
}

.qas p span {
    color: #888;
    font-size: 0.5rem;
    flex: 0.1;
}


/*底部样式*/

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 42px;
    min-width: 320px;
    max-width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #eee;
}

.more {
padding-bottom: 50px;
}

.footer ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.footer ul li img {
    width: 20px;
    height: 20px;
}

.footer ul li a {
    color: gray;
    text-decoration: none;
}

.footer ul li {
    flex: 1;
}

一开始遇到一个问题,就是footer会把上面内容的最下面一两行给遮住。后来给最下面的最新内容加了一个盒子,盒子的属性写了个padding-bottom:50px,就显示完整了。

附加作业:仿某企业手机官网。原网站是响应式的网站,头部和底部都没有固定,而且是PC的风格。通过这段时间的学习,也小小挑战一下,仿一个首页出来,利用一些学到的知识点,稍加改动。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/init.css">
    <link rel="stylesheet" href="static/css/style_k.css">


    <title>手机官网</title>
</head>

<body>
    <!--布局原则: 宽宽自适应, 高度是固定-->
    <!--固定定位: 顶部-->
    <div class="top">
        <img src="static/images/logo_m.png" alt="">
        <div class="center"><img src="static/images/black.jpg" alt=""></div>
        <img src="static/images/navIco.png" alt="">
    </div>

    <!-- 轮播图 -->
    <div class="banner"><img src="static/images/slide1.jpg" alt=""></div>

    <!-- 产品区 -->
    <div class="products">
        <div class="prologo">
            <img src="static/images/nimg330_1.png" alt="">
            <p>
                <span>PRODUCT CENTER</span><br />
                <span>加快世界物联网生活建设,打造影响全人类的智能锁产品</span>
            </p>
        </div>
        <div class="proshow">
            <img src="static/images/product1.png" alt=""><br />
            <p>
                <span>S8指纹锁</span><br />
                <span>简约之名,成就经典</span>
            </p>
        </div>
        <div class="arrow">
            <img src="static/images/left.png" alt="">
            <img src="static/images/right.png" alt="">
        </div>
    </div>
    <!-- 视频区 -->
    <div class="video">
        <div>
            <P>
                <span>精彩视频</span><br />
                <span>VIDEO</span><br />
                <span>智能锁 我选凯迪仕</span><br />
                <span>致力于为用户开启“安全无忧”智能生活模式</span>
            </P>
        </div>


        <div class="videowindow">
            <img src="static/images/video.png" alt=""><br />
            <p>
                <a href="">更多视频   ></a><br>
            </p>
        </div>
    </div>

    <!-- 新闻区 -->
    <div class="news">
        <div class="newstitle">
            <span>新闻资讯</span><br />
            <span>NEWS CENTER</span>
        </div>
        <div class="newshead">
            <a href=""><img src="static/images/news0.jpg" alt=""></a>
            <p>
                <a href="">喜讯 | 凯迪仕连续三年斩获科睿奖最高奖项——***创新类金奖!</a><br>
                <span>2019-08-23</span> <span>49791次浏览</span>
            </p>
        </div>
        <div class="newslist">
            <div>
                <a href=""><img src="static/images/news1.jpg" alt=""></a>
                <p>
                    <a href="">喜讯 | 凯迪仕连续三年斩获科睿奖最高奖项——***创新类金奖!</a><br>
                    <span>2019-08-23</span> <span>49791次浏览</span>
                </p>
            </div>

            <div>
                <a href=""><img src="static/images/news2.jpg" alt=""></a>
                <p>
                    <a href="">凯迪仕央视***战略升级,45分钟超时长TVC广告全天霸屏CCTV!</a><br>
                    <span>2019-08-05</span> <span>49791次浏览</span>
                </p>
            </div>

            <div>
                <a href=""><img src="static/images/news3.jpg" alt=""></a>
                <p>
                    <a href="">Kaadas凯迪仕2019建博会完美收官!</a><br>
                    <span>2019-07-11</span> <span>7296次浏览</span>
                </p>
            </div>
        </div>

        <div class="more">
            <span>
                    <a href="">&nbsp;MORE&nbsp;</a>
                </span>
        </div>



        <!-- 底部 -->
        <div class="footer">
            <div class="tel">
                <img src="static/images/logo2.png"><br />
                <span>******:400-800-3756</span><br />
                <span>售后***:400-116-6667</span><br />
                <span>深圳市南山区北环大道辅路</span><br />
                <span>清华信息港研发楼B座9楼</span>
            </div>
            <div class="ewm">
                <div>
                    <img src="static/images/ewm1.jpg" alt=""><br />
                    <span>微信公众号</span>
                </div>
                <div>
                    <img src="static/images/ewm2.jpg" alt=""><br />
                    <span>招商***微信号</span>
                </div>
            </div>
            <div>
                <img src="static/images/QQ.png" alt="">
                <img src="static/images/weixin.png" alt="">
                <img src="static/images/weibo.png" alt="">
            </div>
            <div class="links">
                <ul>
                    <li>
                        <a href=""><span>隐私政策</span></a>
                    </li>
                    <li>
                        <a href=""><span>服务条款</span></a>
                    </li>
                    <li>
                        <a href=""><span>招商代理</span></a>
                    </li>
                    <li>
                        <a href=""><span>代理支持</span></a>
                    </li>
                    <li>
                        <a href=""><span>联系我们</span></a>
                    </li>
                </ul>
            </div>
            <div class="copyright">
                <span>Copyright © 2018凯迪仕. 粤ICP备13**********号 Powered by vancheer eqh</span>
            </div>
        </div>
</body>

</html>

页面基本上是仿的,有些简化,因为手艺不够。

         .top {
             position: fixed;
             top: 0;
             width: 100%;
             height: 40px;
             background-color: #000;
             min-width: 320px;
             max-width: 768px;
             left: 50%;
             -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
         }
         
         .top {
             display: flex;
             justify-content: space-between;
         }
         
         .top img:first-of-type {
             width: 180px;
             height: 21px;
             margin-top: 5px;
             margin-left: 5px;
         }
         
         .top img:last-of-type {
             width: 30px;
             height: 24px;
             margin-top: 5px;
             margin-right: 5px;
         }
         
         .top .center {
             text-align: center;
             width: 100%;
             flex: 1;
         }
         
         .top .center img {
             height: 45px;
         }
         /*轮播图*/
         
         .banner {
             display: flex;
         }
         
         .banner img {
             width: 100%;
         }
         
         .products {
             background-color: #444;
             text-align: center;
         }
         
         .products .prologo img {
             display: block;
             margin: 0 auto;
             padding-top: 15px;
         }
         
         .products .prologo span:first-of-type {
             font-size: 0.8rem;
             font-weight: bold;
             color: #CCC;
         }
         
         .products .prologo span:last-of-type {
             font-size: 0.8rem;
             color: #CCC;
         }
         
         .products .proshow {
             background-color: #222;
             padding-bottom: 1px;
         }
         
         .products .proshow span:first-of-type {
             font-size: 1.3rem;
             font-weight: bold;
             color: #CCC;
         }
         
         .products .proshow span:last-of-type {
             color: #CCC;
         }
         
         .products .arrow {
             text-align: center;
             background-color: #222;
         }
         
         .products .arrow img {
             height: 40px;
             width: 40px;
             padding: 10px;
         }
         /* 视频区 */
         
         .video {
             background-color: red;
             text-align: center;
             padding-top: 15px;
         }
         
         .video div p {
             margin: 0;
         }
         
         .video div p span:first-of-type {
             font-size: 1.3rem;
             font-weight: bold;
             color: #CCC;
             line-height: 1.5rem;
         }
         
         .video div p span:nth-of-type(2) {
             font-size: 0.8rem;
             color: #999;
             line-height: 1.5rem;
         }
         
         .video div p span:nth-of-type(3) {
             font-size: 1.1rem;
             color: #ccc;
             line-height: 3rem;
         }
         
         .video div p span:last-of-type {
             font-size: 0.8rem;
             color: #ccc;
             line-height: 1.5rem;
         }
         
         .video .videowindow p {
             text-align: center;
             color: #CCC;
             padding-bottom: 10px;
         }
         
         .video .videowindow p a {
             text-decoration: none;
             color: #CCC;
         }
         /* 新闻区*/
         
         .news {
             background-color: #222;
         }
         
         .news .newstitle {
             text-align: center;
         }
         
         .news .newstitle span:first-of-type {
             font-size: 1.3rem;
             font-weight: bold;
             color: #CCC;
             line-height: 3rem;
         }
         
         .news .newstitle span:nth-of-type(2) {
             font-size: 0.8rem;
             color: #999;
             line-height: 1.5rem;
         }
         
         .news .newshead img {
             width: 95%;
             margin: 5px auto;
             display: block;
         }
         
         .news .newshead p a {
             color: #CCC;
             text-decoration: none;
             text-align: center;
         }
         
         .news .newshead p span:first-of-type {
             font-size: 0.8rem;
             color: white;
             padding: 0 2px;
         }
         
         .news .newshead p span:last-of-type {
             font-size: 0.7rem;
             color: #ccc;
             margin-left: 20px;
         }
         
         .newslist {
             color: #888;
             width: 100%;
         }
         
         .newslist div {
             background-color: #444;
             width: 100%;
             display: flex;
             white-space: nowrap;
             margin: 10px auto;
         }
         
         .newslist div a {
             text-decoration: none;
             color: #EEE;
             flex: 0.45;
         }
         
         .newslist div a img {
             padding: 10px;
             width: 150px;
             height: 90px;
         }
         
         .newslist div p {
             padding: 5px 10px;
             overflow: hidden;
             text-overflow: ellipsis;
         }
         
         .newslist div p a {
             text-decoration: none;
         }
         
         .newslist div p span:first-of-type {
             font-size: 0.6rem;
             color: #eee;
             margin: 10px 0 10px 5px;
         }
         
         .newslist div p span:last-of-type {
             font-size: 0.6rem;
             color: #EEE;
         }
         
         .more {
             background-color: #222;
             text-align: center;
         }
         
         .more span {
             border: 1px solid #888;
             border-radius: 30%;
         }
         
         .more span a {
             text-decoration: none;
             color: #CCC;
         }
         /* 底部 */
         
         .footer {
             text-align: center;
             margin-top: 30px;
         }
         
         .footer .tel span:first-of-type {
             color: #EEE;
             font-size: 1.5rem;
             font-weight: bold;
             line-height: 50px;
         }
         
         .footer .tel span:nth-of-type(2) {
             color: #EEE;
             font-size: 1.5rem;
             font-weight: bold;
             line-height: 50px;
         }
         
         .footer .tel span:nth-of-type(3) {
             color: #EEE;
             font-size: 0.8rem;
             line-height: 20px;
         }
         
         .footer .tel span:last-of-type {
             color: #EEE;
             font-size: 0.8rem;
             line-height: 20px;
         }
         
         .footer .ewm {
             display: flex;
             justify-content: space-evenly;
             margin: 20px;
         }
         
         .footer .ewm span {
             color: #CCC;
             font-size: 0.6rem;
         }
         
         .footer .links ul {
             display: flex;
             justify-content: space-evenly;
         }
         
         .footer .links ul li {
             list-style-type: none;
         }
         
         .footer .links ul li a {
             text-decoration: none;
             font-size: 0.7 rem;
             color: #888;
             line-height: 20px;
         }
         
         .footer .copyright {
             margin-top: 10px;
             padding-bottom: 10px;
         }
         
         .footer .copyright span {
             text-decoration: none;
             color: #666;
             font-size: 0.6rem;
             line-height: 15px;
         }

CSS写了大概有4/5个小时吧,对于小白来说,确实是不容易,远远还没熟练到随心所欲的程度,有的地方也是乱写的,不知道是不是规范或者是实用,总之把这个样子写了个七七八八,也算是第一次把一个手机网页写完了。还要多看多练才行,学习更规范的写法。前期很多知识点已经记不清了,回头看老师的代码,再就是度娘上搜一搜。最后的页面如下效果:

k-1.jpg

有些地方没有写细致,还有一些效果,比如鼠标放上去变颜色变大都没有写,包括有些间距也是padding margin乱写的。再花几个小时肯定可以做的更精细。这一阶段没有白学,还是蛮有收获的。

批改状态:合格

老师批语:你确定这是php中文网首页? 不过, 做的非常漂亮
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学