html+css完成一个静态网页

布局

完成一个网页首先要有大致的布局

内容

顶部导航栏

主要是通过一个一级列表和一个二级列表来实现
鼠标移入一级列表时，二级列表开始显示。

"top">
  
"topline" >
    
"topline1">"#">"https://game.gtimg.cn/images/lol/v3/logo-public.png">
    
"toplines">"#">游戏资料
      
"topline0">
        

          "#">游戏下载
        
        

          "#">资料库
        
        
"#">海克斯宇宙 
        
    
"toplines">"#">商城/合作
      
"topline0">
          

            "#">道具城
          
          

            "#">电竞网吧
          
          
"#">电竞小说 
          
    
"toplines">"#">社区活动
      
"topline0">
          

            "#">视频中心
          
          

            "#">官方微博
          
          
"#">官方微信 
          
    
"toplines">"#">赛事官网
      
"topline0">
          

            "#">职业联赛
          
          

            "#">全明星赛
          
          
"#">全球总决赛 
          
      
"toplines">"#">自助系统
        
"topline0">
          

            "#">秩序殿堂
          
          

            "#">峡谷之巅
          
          
"#">账号注销 
          
      
"topline8">"图二.png " width="24" height="30">
          
"topline0">
          "掌盟.png" height="163" width="163">
  

左边

"light">
    
"container">
    
"photo">
        "https://ossweb-img.qq.com/upload/adw/image/977/20220126/946a3e327cc94bed9da68658b24a4752.jpeg" >
        "https://ossweb-img.qq.com/upload/adw/image/977/20220121/fe393cc34e80975b1e9b0d727c71568c.jpeg">
        "https://ossweb-img.qq.com/upload/adw/image/977/20220127/bc8196a94554cf229af6eadc5fe4e035.jpeg">
        "https://ossweb-img.qq.com/upload/adw/image/977/20220123/41c6cd6147cb57d9d09f2604c6ee1870.jpeg">
        "https://ossweb-img.qq.com/upload/adw/image/977/20220119/a34ef22ed040cdcdd995d09d941f71d1.jpeg">
    
    
"light-list">
        
"list1" >虎虎生威
        
"list1" style="background-color:#f7f6f6;margin-top:7px;border-bottom-color: #cea861;border-bottom-style: solid" >青花瓷系列皮肤
        
"list1">Lpl春季赛
        
"list1">2022金虎贺岁
        
"list1">官方微博送福利
    
"east">
    
"east1" >热门活动
    
"east0" style="margin-left: 70px;border-bottom-color: #0da0b4;padding-right: 30px">正在进行
    
"east0"style="padding-left: 40px">商城特惠
    
"east0">长期活动
        
"east2">"#"> 更多
    
"huodong">"#">"活动一.png" width="185" height="250" style="margin-left: 10px">
    
"huodong">"#">"活动二.png" width="185" height="250">
    
"huodong">"#">"活动三.png" width="185" height="250">
    
"huodong">"#">"活动4.png" width="185" height="250" style="margin-right: 0px" >
   

    
margin-top: 50px;font-size: 20px;
    border-left-style:solid ;
    border-left-color: #1da6ba;
    padding-left: 10px;
    float: left;">FANART创作馆
     

    
"tupian" style="clear: both;float: left">
        "阿狸.png" style="float: left">
        "剪头发.png" style="float: left">
        "https://shp.qpic.cn/cms_pic/2680029253/d585e691fefa784af1fe16c3ee741417/258">
    "https://shp.qpic.cn/cms_pic/2461163838/2d5155336e7405a6e62abd98a850a808/258" style="float: right;">
     "https://shp.qpic.cn/cms_pic/2451053586/70a3eb3dad21cf7fc0edf3935c43ca80/258" style="float: left;margin-top: 20px">
     "https://shp.qpic.cn/cms_pic/2460155447/7f1c6f5d81d4e12e72028e9da58f2c45/258" style="float: left;margin-top: 20px">
     "https://shp.qpic.cn/cms_pic/2560610887/7510f9710eeca70c1a5fefb5f45651f2/258" style="float: left;margin-top: 20px">
     "https://shp.qpic.cn/cms_pic/2490765977/b33737e56eb45ddaa26695facd2b9f8b/258" style="float: left;margin-top: 20px">
    

右边

"right">

    
"right-heng" style="color:#0da0b4;border-bottom-style: solid;border-bottom-width:4px;
    border-bottom-color: #0da0b4;padding-bottom: 2px ">综合
    
"right-heng">公告
    
"right-heng">赛事
    
"right-heng">攻略
    
"right-heng">社区
    
"right-line1">英雄联盟官方微博送福利啦!让红包飞起来!
    
"right-lines">
"tuxing" >公告
        "#"> 开发者：双倍关注双人作战
    
"right-lines">
"tuxing" >公告
        "#">虎虎生威 一起联盟！双端联动活动预告
    
"right-lines">
"tuxing" >新闻
        "#">1月26日，来虎牙参与双人solo，赢青花瓷皮肤基金!
    
"right-lines">
"tuxing" >新闻
        "#">全民K歌x英雄联盟 邀你共唱《青花瓷》
    
"right-lines">
"tuxing" >视频
        "#">【云顶之弈】新年短片：金灯送福
    
"right-lines">
"tuxing" >视频
        "#">电竞春晚超级周预热：年夜饭
    
"right-fang">
        阅读"#">更多资讯
    
    
"user">
"float: left">"下载游戏.png" style="width:300px;height: 160px;">

    
"user1">
"新手必备.png " style="height: 77px;width: available">

        
"领取中心.png" style="height: 77px;width: available">
    
" clear: both;float: left">
        
"gongneng" style="float:left">"#" style="color: #0f0f0f">在线客服
        
"gongneng"style="float:left">"#" style="color: #0f0f0f">秩序殿堂 
        
"gongneng" style="float:left">"#" style="color: #0f0f0f">峡谷之巅
        
"gongneng" style="float:left">"#" style="color: #0f0f0f">游戏资料
    
"clear: both;float: left">
        
"gongneng" style="float:left">"#" style="color: #0f0f0f">云顶之弈
        
"gongneng" style="float:left">"#" style="color: #0f0f0f">攻略中心
        
"gongneng" style="float:left">"#" style="color: #0f0f0f">联盟宇宙
        
"gongneng" style="float:left">"#" style="color: #0f0f0f">微信绑定
    
    
    
"shangfu">"蒙多.png" style="margin-top: 100px;width:230px;height: 400px;">
    "黎明.png" style="margin-top: 100px;width:230px;height: 400px">

轮播图

首先是要有一个照片容器，照片容器之上有一个展示的容器，展示的容器大小设计为你想看到的大小，将其余隐藏。而照片的大小则是所有照片的大小，在设定一个渐变时间，再通过一个@keyframes switch设定变化的速度。

体会

做成的网页确实与目标差距过大，很多细节上的处理是及其不到位的，很多东西跟想象的不太一样，只能说菜刚刚开始，希望往后有所进步。