【Web前端学前体验】HTML+CSS 实战练习-MIUI官网

最新推荐文章于 2024-05-05 02:33:45 发布

jacksoncya

最新推荐文章于 2024-05-05 02:33:45 发布

阅读量1.3k

点赞数 1

分类专栏： HTML+CSS 文章标签： HTML+CSS实战前端练习

本文链接：https://blog.csdn.net/JACKSON_CYA/article/details/90408455

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

不得不说，MIUI官网真的是一个HTML+CSS练手很好的模仿页面，虽然页面很简单，但是包含了很多知识要点。

因为我是从零自学的。其实HTML+CSS内容已经看完学完好久了，之前实训做过一些简单网页，后来看了下，发现MI家的首页非常适合练习，就决定练一练了。

其实总共做了3次，前两次都是F12对照官网源码进行写的，最后一次开始自己写，因为大致位置和大小都了解了。

说说学到什么：

1.之前学的时候，和扒一些简单网站的时候对定位和布局思路并没有那么清晰，这次做完后，一些用来定位和控制位置的思路更清晰了。

2.尝试了用CSS来写下拉。因为想先巩固HTML+CSS，所以弹框和下拉列表并没有用JS来写。如图：

弹出图片
此部分HTML代码：

                    <li class="weixin"><a href=""#>官方微信</a>
                        <div class="weixin_dropdown"><img src="images/weixin_1.png"></div>
                    </li>

此部分CSS代码：

.weixin_dropdown{
    display: none;
    position: absolute;
    background:#f9f9f9
    width: 168px;
    height: 167px;
    margin-top:-187px;
    margin-left:-38px;
}

.weixin_dropdown img{
    width: 168px;
    height: 167px;
}

.weixin{
    position: relative;
    display: inline-block;

}

.weixin:hover .weixin_dropdown{
    display: block;
}

重点1：我使用了margin属性，来改变下拉变为上浮。
2：期间我调整了图片大小，发现上浮无效了，后来发现是dropdown盒子的大小被我删除了，缺少后会同时导致margin的无效

列2：
在这里插入图片描述

此部分html代码：

                    <li class="language_list">
                        <a href=""# >简体中文</a>
                        <ul class="language_dropdown">
                            <li>ENGLISH</li>
                            <li>臺灣省繁體</li>
                            <li>香港繁體</li>
                            <li>Indian</li>
                            <li>简体中文</li>
                        </ul>
                    </li>

此部分CSS代码：

.language_dropdown{
    display: none;
    position:absolute;
    background: #fff;
    height: 170px;
    width: 30px;
    margin-top:-150px;
}

.language_dropdown li{
    margin-bottom:20px;
    color:#858585;
    font-size:14px;
    height: 14px;
    border-right: none;
    background: #fff;
}

.language_list:hover .language_dropdown{
    display: block;
    cursor: pointer;
}

没有用下拉框，而是直接使用了hover控制display来呼出一个列表。

3.对块级元素，行内元素，行内块级元素的印象更明了了，因为在敲码的过程中，多次出现了无法居中，无法并排的情况，各种查阅资料后，对元素的概念更加清晰了。

其他还有很多，此份文件还会保留，留作之后练习JS使用。

那么来看看效果吧：

在这里插入图片描述

主体HTML代码：

    <!--顶部导航开始-->
    <div class="header_nav">
        <div class="header">
            <a href="#" title="MIUI" class="miui_logo">MIUI</a>
            <div class="header_nav_menu">
                <a class="menu_index" href="#">首页</a>
                <a href="#">MIUI 10</a>
                <a href="#">下载</a>
                <a href="#">解锁</a>
                <a href="#">论坛</a>
            </div>
        </div>
    </div>
    <!--主体部分开始-->
    <div class="content">
        <!--轮播图部分--> 
        <div class="content_banner">
            <div class="banner_on_link">
                <a href="#" target="_blank" title="MIUI 10 立即升级">
                    <div class="banner_on banner_on_img"></div>
                </a>
            </div>
        </div>
        <!--主体介绍部分-->
        <div class="content_body">
            <div class="body_on_link">
                <ul class="body_link_ul clearfix">
                    <li class="body_link_li">
                        <a href="#">
                            <img src="images/bodylink_1.png" />
                            <div>
                                <h3>MIUI 10稳定版来了</h3>
                                <p>9月10日起 陆续开放升级</p>
                            </div>
                        </a>
                    </li>
                    <li class="body_link_li">
                        <a href="#">
                            <img src="images/bodylink_1.png" />
                            <div>
                                <h3>第416周更新公告</h3>
                                <p>9.5.16</p>
                            </div>
                        </a>
                    </li>
                    <li class="body_link_li last_li">
                        <a href="#">
                            <img src="images/bodylink_2.png" />
                            <div>
                                <h3>MIUI论坛APP邀您体验</h3>
                                <p>全新改版 更好玩、更好用</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--底部信息开始-->
        <div class="miui_footer">
            <div class="footer">
                <ul class="footer_link">
                    <li><a href=""#>新浪微博</a></li>
                    <li class="weixin"><a href=""#>官方微信</a>
                        <div class="weixin_dropdown"><img src="images/weixin_1.png"></div>
                    </li>
                    <li><a href=""#>官方贴吧</a></li>
                    <li><a href=""#>全球粉丝站</a></li>
                    <li><a href=""#>隐私政策</a></li>
                    <li><a href=""#>预制应用查询</a></li>
                    <li class="language_list">
                        <a href=""# >简体中文</a>
                        <ul class="language_dropdown">
                            <li>ENGLISH</li>
                            <li>臺灣省繁體</li>
                            <li>香港繁體</li>
                            <li>Indian</li>
                            <li>简体中文</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <p class="copyright">
                    Copyright © 2019 CHEN 京ICP备88888888号 | 京公网安备12345678901234号 | 京ICP证666666号
            </p>
        </div>
    </div>

CSS代码：

@font-face{
    font-family: "FZLTXHJW";
    src:url(./fzltxhjw.ttf);
}

*{
    font-family: "FZLTXHJW","microsoft yahei";
}

h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}

ul{
    list-style: none;
}

body{
    margin: 0 auto;
    text-align: center;
}

.clearfix:after{
    visibility:hidden;
    display:block;
    font-size:0;
    content: " ";
    clear:both;
    height:0;
}

.clearfix{*zoom:1;}

a{
    text-decoration: none;
}
.header_nav{
    background: #000;
    height: 49px;
    min-width:980px;
}

.header{
    height: 49px;
    width:1240px;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 1240px) {
	.header {
		width: 980px;
	}
}

.miui_logo{
    position: absolute;
    text-indent: -9999px;
    background-image: url(images/logo.png);
    width:62px;
    height: 27px;
    top:10px;
    left: 0;
}

.header_nav_menu{
    height: 27px;
    padding-top:10px;
    width：600px;
    text-align:right;
    line-height:27px;
}

.header_nav_menu a{
    margin-left:30px;
    font-size:14px;
    color:#dddddd;
}

.header_nav_menu a.menu_index{
    color: #868686;
}

.header_nav_menu a:hover{
    color:#868686;
}

/*主体部分开始*/
.content{
    background: #fafafa;

}

.content *{
    font-family: "FZLTXHJW";
}

..content_banner{
    height: 657px;
    width: 100%;
    min-width: 980px;
    left: 0;
    top: 0;
    position: relative;
}

.banner_on_link{
    height: 657px;
    width: 100%
    position: absolute;
    left: 0;
    top: 0;
}

.banner_on{
    height: 657px;
    width: 100%;
    min-width: 980px;
    float: left;
}

.banner_on_img{
    background: #000
    url(images/banner.png)no-repeat scroll center top;
}

/*主体介绍部分*/

.content_body{
    width: 100%;
}

.body_on_link{
    width: 1240px;
    margin: 0 auto;
    padding: 130px 0;
}

@media screen and (max-width: 1240px) {
	.body_on_link{
		width: 980px;
	}
}

.body_on_link ul{
    width: 100%;
}
.body_on_link ul,li{
    float: left;
}

.body_link_li{
    width:33.33%;
    text-align: left;
}

.body_link_li a{
    display: block;
    text-align: center;
    border-right: 1px solid #E1E1E1;
}

.body_link_li a div{
    display: inline-block;
}
.last_li a{
    border-right: none;
}

.body_link_li a img{
    margin-right: 24px;
}

.body_link_li a h3{
    font-size: 20px;
    color: #333333;
    line-height: 28px;
    text-align: left;
    cursor: pointer;
}

.body_link_li a p{
    font-size: 14px;
    color: #939393;
    line-height: 28px;
    text-align: left;
    cursor: pointer;
}

.body_link_li a:hover h3{
    color: #f78200;
}

.body_link_li a:hover p{
    color: #f78200;
}

.miui_footer{
    height: 160px;
    background-color:#fafafa; 
}

.footer{
    border-top:1px solid #e1e1e1;
    padding-top: 60px;
    width: 1240px;
    margin:0 auto;
}

@media screen and (max-width: 1240px) {
	.footer {
		width: 980px;
	}
}

.footer_link{
    text-align: center;
    margin-bottom:15px;
    padding: 0;
    display: inline-block;
}

.footer_link li{
    display: inline-block;
    width: 110px;
    border-right: 1px solid #d9d9d9;
    height: 14px;
    line-height: 14px;
}

.footer_link li a{
    color: #858585;
    font-size:14px;
}

.footer_link li a:hover{
    color: #f86200;
    text-decoration: underline;
}

.footer_link li:last-child{
    border-right: none;
}

.copyright{
    line-height: 20px;
    color:#c5c6c8;
    font-size: 11px;
    text-align: center;
    display: block;
}

.weixin_dropdown{
    display: none;
    position: absolute;
    background:#f9f9f9
    width: 168px;
    height: 167px;
    margin-top:-187px;
    margin-left:-38px;
}

.weixin_dropdown img{
    width: 168px;
    height: 167px;
}

.weixin{
    position: relative;
    display: inline-block;

}

.weixin:hover .weixin_dropdown{
    display: block;
}

.language_dropdown{
    display: none;
    position:absolute;
    background: #fff;
    height: 170px;
    width: 30px;
    margin-top:-150px;
}

.language_dropdown li{
    margin-bottom:20px;
    color:#858585;
    font-size:14px;
    height: 14px;
    border-right: none;
    background: #fff;
}

.language_list:hover .language_dropdown{
    display: block;
    cursor: pointer;
}

哦了说了，*｛｝格式化，直接再头部head里加了一个style写在了里面，然后CSS是调用同文件夹下的。而且可以看到为了保持文字效果一直，我下载并且调用了字体。

jacksoncya

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
【Web前端学前体验】HTML+CSS 实战练习-MIUI官网

不得不说，MIUI官网真的是一个HTML+CSS练手很好的模仿页面，虽然页面很简单，但是包含了很多知识要点。因为我是从零自学的。其实HTML+CSS内容已经看完学完好久了，之前实训做过一些简单网页，后来看了下，发现MI家的首页非常适合练习，就决定练一练了。其实总共做了3次，前两次都是F12对照官网源码进行写的，最后一次开始自己写，因为大致位置和大小都了解了。说说学到什么：1.之前学的时候，...
复制链接

扫一扫