刚学完HTML+CSS，一定要按照自己的想法去制作网页，虽然没有交互，但是可以对前面的知识有一个很大的重用，你的知识框架会更加完美。css基础html是勾勒，css是染色，基础的css学完你会有种想写页面的冲动，这时候你不用抑制住那种感觉（我就没压住哈哈），直接按照自己所想开写，这是你的第一个项目，从期末就一直想学Web前端设计，现在刚放假4天，自己也是真真正正的看了4天慕课，大体过了一遍HTML，CSS，我想我是不是也可以画一些东西了？尝试一下总比没有好，踏出第一步虽然很菜！
因为喜欢长跑，喜欢基普乔格和贝克勒，也很想买Nike Next%和佳明，但是没有钱啊，我没有钱。
就只能用另一种形式去假装拥有Nike Next%和佳明了——设计一个全都是Nike Next%和佳明基普乔格和贝克勒的小网页
下面是具体的展示：
这个视频有广告还是先看代码吧：
纯HTML+CSS无交互静态网页展示（菜鸡）
开始拥有Next%和佳明之旅：
0. 寻找素材
在所有的所有开始之前，我们要先找到自己的方向，自己想做什么，要实现什么功能，需要什么资源，什么素材（哈哈我这个就不用想了，我只想假装拥有Next%和佳明）。在Baidu上找了一些图片：
1. 设计框架
在正式开始是制作之前，我们要有一个总的框架，在这个框架上去设计样式，额，用什么去设计框架呢？啊，电脑上没有绘图软件，又不想去下载，只能用Excel画框架了.
（1）首先要有一个总的区域container在这个总的区域里设置子区域.
（2）接着要有一个导航栏nav，设置在最顶部，横占整个区域.
（3）再往下就是两侧的菜单，aside1和aside2，aside里面又分为三个小区域，用来展示内容
（4）中间就是主体部分main，main由多个相同的cbox组成，第一个cbox里面设置动画，接下来的cbox用来展示商品.
（5）在区域的底部设置一个页脚footer，展示温馨提示或者作者信息.
画了一个框架，感觉还不错，将就着用吧。这个框架大概就是按照CSDN的主页来设计的，完全按照自己看到的，导航栏，两面的菜单，中间是具体的内容。嗯，感觉还不错.
2. 有了框架，开始搭HTML
每一个区域都是一个盒子，每个盒子可以设置样式。一个大盒子里面浮动或者定位几个小盒子，小盒子里面设置具体内容。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Web run</title><link rel="stylesheet" type="text/css"href="CSS/Web run.css">
</head>
<body><div id="container"><div id="nav"><div id="name"><p>Hello! One of three_tigers</p></div><div id="search"><div id="dd1">search<input type="text"/></div><div id="dd2"><img src="images/run/search.png" width="40" height="35"></div></div><div id="setting"><p>setting</p><div><img src="images/run/nav4.png" width="35" height="35"></div> </div><div id="theme"><p>theme</p><div><img src="images/run/theme.png" width="40" height="35"></div> </div></div><div id="aside1"><div class="box"><div class="abox"><img src="images/run/Kipchoge2.png" width="360" height="255"></div><div class="bbox"><h2>埃鲁德·基普乔格，肯尼亚马拉松运动员，自从19岁在2003年的世界田径锦标赛赛上获得5000米的金牌之后，就成为了国际田坛一颗耀眼的明星。肯尼亚全国上下欢腾鼓舞，很快奈洛比市就有一条街道以他的名字命名，用来纪念这次伟大的胜利。</h2></div></div><div class="box"><div class="abox"><img src="images/run/Kipchoge1.png" width="360" height="255"></div><div class="bbox"><h2>2018年9月16日，在柏林马拉松上基普乔格以2小时01分39秒夺冠并创造了新的马拉松世界纪录 [1] ；12月，被新华社体育部评为2018年国际十佳运动员。</h2></div> </div><div class="box"><div class="abox"><img src="images/run/Kipchoge3.png" width="360" height="255"></div><div class="bbox"><h2>2019年10月12日，在奥地利首都维也纳的“Ineos 1:59”的挑战中以1小时59分40秒的成绩顺利完赛，就此成为全球第一位马拉松跑进两小时大关的选手。</h2></div> </div></div><div id="main"><div class="cbox"><div id="fbox"></div></div><div class="cbox"><div class="pbox"><img src="images/run/Next%1.png" width="450" height="250"></div><div class="ebox"><div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes. Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. </div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div><div class="cbox"><div class="pbox"><img src="images/run/Next%3.png" width="450" height="250"></div><div class="ebox"><div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes. Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. </div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div><div class="cbox"><div class="pbox"><img src="images/run/佳明2.png" width="450" height="250"></div><div class="ebox"><div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div> <div class="cbox"><div class="pbox"><img src="images/run/佳明1.png" width="450" height="250"></div><div class="ebox"><div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div><div class="cbox"><div class="pbox"><img src="images/run/Next%1.png" width="450" height="250"></div><div class="ebox"><div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes. Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. </div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div><div class="cbox"><div class="pbox" width="450" height="250"><img src="images/run/佳明3.png" width="450" height="250"></div><div class="ebox"><div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div> <div class="cbox"><div class="pbox"><img src="images/run/Next%2.png" width="450" height="250"></div><div class="ebox"><div class="explain">Nike official Nike ZOOMX VAPORFLY NEXT% men's/women's running shoes. Nike is undoubtedly the best choice for beginners. Even its entry-level running shoes have good performance. </div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div><div class="cbox"><div class="pbox"><img src="images/run/Nike1.png" width="450" height="250"></div><div class="ebox"><div class="explain">Grasp every moment, to the minute to chase, explore the infinite possibilities in life.From scratch, forge ahead, Garmin, challenge you yesterday!</div><div class="price"><a href="#">$600 Buy it now!</a></div></div></div></div><div id="aside2"><div class="box"><div class="abox"><img src="images/run/贝克勒1.png" width="360" height="255"></div><div class="bbox"><h2>埃塞俄比亚长跑运动员，拥有世界纪录和奥运会纪录。在5000米和10000米，他是这两个赛事的奥运卫冕冠军，2004年雅典奥运会10000米冠军，2008年北京奥运会5000米和10000米金牌。</h2></div> </div><div class="box"><div class="abox"><img src="images/run/贝克勒2.png" width="360" height="255"></div><div class="bbox"><h2>凯内尼萨·贝克勒，在田径届被称为万米之王,他的技术动作富有弹性，频率相当快，往往能最后一圈进行决胜，在国际赛场9年的万米比赛中尚未尝过败绩，无愧于万米之王称号。</h2></div> </div><div class="box"><div class="abox"><img src="images/run/贝克勒3.png" width="360" height="255"></div><div class="bbox"><h2>2004年雅典奥运会，10000米金牌、5000米银牌。
2008年北京奥运会，5000米金牌、10000米金牌。
共取得金牌3枚，银牌1枚。</h2></div> </div></div><div id="footer"> <div id="maker">Made by One of thre_tigers</div> <div id="goback"><a href="#">Go back to top</a></div><div id="service"><div><p>Sevice</p></div><div><img src="images/run/phone.png " width="40" height="40"></div></div></div></div>
</body>
</html>
这个过程就是对着自己的“框架”翻译一遍结构，乖乖用div累起来就ok啦.
3. 用CSS设置样式
把结构设置好之后，就是给每一个区域设置样式了，这也是最关键的一步,在这里我要设置的样式主要是：
（1）导航栏nav里面的图标: 边框有透明以及圆角效果，一个搜索框，鼠标悬浮放大的效果，以及旁边的阴影。
（2） 两侧菜单aside**: 图片边框透明，阴影，圆角，鼠标悬浮能够翻转这个区域，展示图片背面的人物介绍
（3）主体部分的mian：
第一个cbox中间边框有圆角，阴影效果，同时在中间播放动画。接下来的cbox分为两个部分，分别展示商品图片和商品介绍，也是边框有透明以及圆角效果，右侧有一个价格框，显示价格填入超链接。同时鼠标悬浮有放大，阴影的效果。
（4）页脚footer ： 里面的图标，边框有透明以及圆角效果，鼠标悬浮放大的效果，以及旁边的阴影。
下面看具体实现：
1. 导航栏nav：
要实现的样式：导航栏nav里面的4图标区域（name search setting theme），边框有透明以及圆角效果，一个搜索框，鼠标悬浮放大的效果，以及旁边的阴影。
#nav{background-color: #484891;width: 1500px;height: 50px;border: 1px solid white;position: fixed;z-index: 999;
}#name{width: 350px;height: 40px;color: white;text-align:center;font-size: 25px;border: 1px solid white;border-radius: 10px;margin-top: 5px;float: left;margin-right: 70px;
}
#name:hover{
transform: scale(1.3);
box-shadow: 0px 0px 10px white;
}#search{width: 430px;height: 40px;color: white;text-align:center;font-size: 25px;border: 1px solid white;border-radius: 10px;margin-top: 5px;float: left;margin-right: 70px;
}#search div{
margin-left: 10px;
margin-right: 5px;
}#dd1{margin-top: 0px;float: left;
}
#dd2{margin-top:5px;float: left;
}#search:hover{transform: scale(1.3);box-shadow: 0px 0px 10px white;
}#setting{width: 220px;height: 40px;color: white;text-align:center;font-size: 25px;border: 1px solid white;border-radius: 10px;margin-top: 5px;float: left;margin-right: 70px;
}
#setting p{display: inline;
}#setting div{width: 35px;height: 30px;float: right;margin-right:30px;border: 1px solid #484891; margin-top: 2px;
}#setting:hover{transform: scale(1.3);box-shadow: 0px 0px 10px white;
}
#theme{width: 220px;height: 40px;color: white;text-align:center;font-size: 25px;border: 1px solid white;border-radius: 10px;margin-top: 5px;float: left;margin-right: 50px;
}
#theme p{display: inline;
}#theme div{width: 35px;height: 30px;float: right;margin-right:30px;border: 1px solid #484891; margin-top: 2px;
}#theme:hover{transform: scale(1.3);box-shadow: 0px 0px 10px white;
}
几个要注意的地方：
（1）鼠标悬停时放大：transform: scale(1.3);
（2）阴影的设置用：box-shadow: 0px 0px 10px white;
（3）在设置text+div的区域时，如果把文本用< p >标签设置，那么他默认的是block类型的，会占据一行，所以装照片的div会展示在下一行，这个时候可以将< p >标签转化成inline类型：
#theme p{display: inline;}
（4）搜索框：左侧文字用< p >标签包络，中间设置一个文本框< input type=“text” />，右侧用一个div区域
2. 两侧的图片菜单：
实现功能：两侧菜单aside图片边框透明，阴影，圆角，鼠标悬浮能够翻转这个区域，展示图片背面的人物介绍
#aside1{background-color: #484891;width: 375px;height: 800px;border:1px solid white;float:left;position: fixed;left:0px;top: 55px;overflow: hidden;border-radius: 10px;
}#aside2{background-color: #484891;width: 375px;height: 800px;border:1px solid white;float:left;position: fixed;left:1120px;top: 55px;overflow: hidden;border-radius: 10px;
}
.box{width: 360px;height: 255px;border:1px solid white;margin: 6px auto;transform-style: preserve-3d;transition: 1s;border-radius: 10px;line-height: 40px;
}
.box:hover{transform: rotateY(180deg);box-shadow: 0px 0px 10px white;
}
.abox{width: 360px;height: 255px;border:1px solid #336666;position: absolute;overflow: hidden;border-radius: 10px;
}
.bbox{background-color:#080000;width: 360px;height: 255px;border:1px solid #336666;transform: rotateY(180deg);overflow: hidden;border-radius: 10px;
}
.bbox h2{text-align: center;font-size: 15px;text-align: center;color: #808000;
}
这里要实现的主要是一个鼠标悬停翻转的功能，我们可以这样来设置：
（1）对展示区域box设置两个和box等大的子区域abox和bbox分别表示正面和背面，abox设置图片，bbox设置人物介绍.
（2）将box区域先沿着Y轴旋转180deg.
（3）将abox的position设置为absolute，这样abox就会脱离文档流，不会占据空间而bbox就会填补上去，实现a在b的表层.
（4）鼠标悬停的时候将box反转过来就可以看到背面bbox了.
3.main中心区域：
（1）第一个cbox中间边框有圆角，阴影效果，同时在中间播放动画。
动画的设置主要使用@keyframes规则：
@keyframes frames{0% {background: url("../images/run/freedom.png") repeat; }20% {background: url("../images/run/keep.png") repeat; }40% {background: url("../images/run/keep1.png") repeat; }60% {background: url("../images/run/Nike logo.png") repeat; }80% {background: url("../images/run/亚瑟士logo.png") repeat; }100% {background: url("../images/run/佳明logo.png") repeat; }
}
将图片设置好，然后在中心的fbox里使用：
#fbox{width: 710px;height: 250px;border:1px solid white; box-shadow: 3px 3px 5px white;margin: 2px auto;border-radius: 10px;animation: frames 50s linear;
}
（2）接下来的cbox分为两个部分，分别展示商品图片和商品介绍，也是边框有透明以及圆角效果，右侧有一个价格框，显示价格填入超链接。同时鼠标悬浮有放大，阴影的效果。
边框设置成圆角，看上去更加圆润，精致,使用border-radius设置：
.pbox{width: 450px;height: 250px;border:1px solid rgb(40 40 40); float:left;margin-left: 5px;margin-top: 4px;border-radius: 10px;overflow: hidden;
}鼠标悬浮的时候将图标放大，然后让边框显示白色，加上阴影这个时候看上去就会有一种透明的效果：
.pbox:hover{transform: scale(1.1);border:2px solid white;border: 1px solid white;box-shadow: 0px 0px 5px white;
}
下面是mian区域的代码：
#main{background-color:#282828;width: 740px;height: 2435px;border:1px solid white;position: absolute;left:380px;top: 55px;z-index:0;
}.cbox{width: 730px;height: 260px;margin: 8px auto;clear: both;
}#fbox{width: 710px;height: 250px;border:1px solid white; box-shadow: 3px 3px 5px white;margin: 2px auto;border-radius: 10px;animation: frames 50s linear;
}
@keyframes frames{0% {background: url("../images/run/freedom.png") repeat; }20% {background: url("../images/run/keep.png") repeat; }40% {background: url("../images/run/keep1.png") repeat; }60% {background: url("../images/run/Nike logo.png") repeat; }80% {background: url("../images/run/亚瑟士logo.png") repeat; }100% {background: url("../images/run/佳明logo.png") repeat; }
}
.pbox{width: 450px;height: 250px;border:1px solid rgb(40 40 40); float:left;margin-left: 5px;margin-top: 4px;border-radius: 10px;overflow: hidden;
}
.pbox:hover{transform: scale(1.1);border:2px solid white;border: 1px solid white;box-shadow: 0px 0px 5px white;
}
.ebox{width: 250px;height: 250px;border:1px solid white; float:left;margin-left: 12px;margin-top: 4px;border-radius: 8px;
}.explain{width: 240px;height: 160px;border:1px solid #5151A2; float:left;margin-left: 3px;margin-top: 4px;background-color: #5151A2;border-radius: 5px;font-size: 16px;line-height: 22px;text-align:left;
}
.explain:hover{transform: scale(1.1);border:2px solid white;color: white;box-shadow: 0px 0px 10px white;
}
.price{width: 240px;height: 65px;border:1px solid #5151A2; float:left;margin-left: 3px;margin-top: 8px;background-color: #5151A2;border-radius: 5px;font-size: 22px;text-align-last: center;line-height: 65px;
}
.price:hover{transform: scale(1.1);border:2px solid white;box-shadow: 0px 0px 10px white;
}
.preic a:link{text-decoration: none;color:#686868;/*未访问时*/
}
a:visited{text-decoration: none;color:#808000;/*已访问*/
}
a:hover{font-size: 120%;text-decoration: underline;color:#03c;/*悬停*/text-decoration: box-shadow: 0px 0px 10px white;
}
.price a:active{text-decoration: none;color:#00FA9A;/*点击时刻*/
}
4.最后就是页脚footer的设置了，和nav的设置基本一样
页脚footer里面的图标，边框有透明以及圆角效果，鼠标悬浮放大的效果，以及旁边的阴影。
#footer{
width: 1500px;
height: 50px;
border: 1px solid white;
position:absolute;
top:2510px;
background-color: #484891;
}#goback{width: 350px;height: 40px;text-align:center;font-size: 25px;border: 1px solid white;border-radius: 10px;margin-top: 5px;float: left;margin-right: 70px;}#goback:hover{transform: scale(1.1);box-shadow: 0px 0px 10px white;
}
#goback a{color: white;text-decoration: none;
}
#maker{width: 350px;height: 40px;color: #808000;text-align:center;font-size: 18px;border-radius: 10px;margin-top: 5px;float: left;margin-right: 70px;
}#service{width: 240px;height: 40px;color: white;text-align:center;font-size: 25px;border: 1px solid white;border-radius: 10px;margin-top: 5px;float: left;margin-right: 70px;
}
#service div{float:left;width: 40px;height: 30px;margin-right: 60px;margin-left: 20px;
}
#service:hover{transform: scale(1.1);box-shadow: 0px 0px 10px white;
}
值得注意的是这里设置了一个Go back to top返回顶部设置一个虚拟超链接#就能达到这个效果
<div id="goback"><a href="#">Go back to top</a></div>
最后小网页就基本完成啦，哈哈哈，虽然实现的功能很简单，很基础但是真的很有趣啊！
源码地址
