html+css完成一个静态网页

目录

  • 布局
  • 内容
    • 顶部导航栏
    • 左边
    • 右边
  • 轮播图
  • 体会

布局

完成一个网页首先要有大致的布局
html+css完成一个静态网页_第1张图片

内容

顶部导航栏

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

"top">

左边

"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">"#"> 更多
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-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设定变化的速度。

体会

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

你可能感兴趣的:(前端,#,HTML,#,CSS,html,css,前端)