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

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

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

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

说说学到什么：

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

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

此部分HTML代码：

                    
官方微信
                        

                    

此部分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代码：

                    

                        简体中文
                        

                            
ENGLISH
                            
臺灣省繁體
                            
香港繁體
                            
Indian
                            
简体中文
                        
                    

此部分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代码：

    
    

        

            MIUI
            

                首页
                MIUI 10
                下载
                解锁
                论坛
            
        
    
    
    

         
        

            

                
                    

                
            
        
        
        

            

                

                    

                        
                            
                            

                                
MIUI 10稳定版来了
                                
9月10日起 陆续开放升级
                            
                        
                    
                    

                        
                            
                            

                                
第416周更新公告
                                
9.5.16
                            
                        
                    
                    

                        
                            
                            

                                
MIUI论坛APP邀您体验
                                
全新改版 更好玩、更好用
                            
                        
                    
                
            
        
        
        

            

                

                    
新浪微博
                    
官方微信
                        

                    
                    
官方贴吧
                    
全球粉丝站
                    
隐私政策
                    
预制应用查询
                    

                        简体中文
                        

                            
ENGLISH
                            
臺灣省繁體
                            
香港繁體
                            
Indian
                            
简体中文
                        
                    
                
            
            

                    Copyright © 2019 CHEN 京ICP备88888888号 | 京公网安备12345678901234号 | 京ICP证666666号
            
        
    

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是调用同文件夹下的。而且可以看到为了保持文字效果一直，我下载并且调用了字体。