收藏
批改状态：合格
老师批语：你确定这是php中文网首页? 不过, 做的非常漂亮
1、仿php中文网首页，老师已经完成绝大部分，剩下的比较容易写。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/init.css"> <link rel="stylesheet" href="static/css/style_m.css"> <title>仿php中文网手机版</title> </head> <body> <!--布局原则: 宽宽自适应, 高度是固定--> <!--固定定位: 顶部--> <div class="top"> <img src="static/images/user-pic.jpeg" alt=""> <div class="logo"><img src="static/images/logo.png" alt=""></div> <img src="static/images/user-nav.jpg" alt=""> </div> <!-- 轮播图 --> <div class="banner"><img src="static/images/banner.jpg" alt=""></div> <!-- 导航课程 --> <div class="nav"> <ul> <li> <a href=""><img src="static/images/html.png" alt=""><br><b>HTML/CSS</b></a> </li> <li> <a href=""><img src="static/images/JavaScript.png" alt=""><br><b>JavaScript</b></a> </li> <li> <a href=""><img src="static/images/code.png" alt=""><br>服务端</a> </li> <li> <a href=""><img src="static/images/sql.png" alt=""><br>数据库</a> </li> </ul> <ul> <li> <a href=""><img src="static/images/app.png" alt=""><br>移动端</a> </li> <li> <a href=""><img src="static/images/manual.png" alt=""><br>手册</a> </li> <li> <a href=""><img src="static/images/tool2.png" alt=""><br>工具</a> </li> <li> <a href=""><img src="static/images/live.png" alt=""><br>直播</a> </li> </ul> </div> <!-- 课程区 --> <h3>推荐课程</h3> <div class="courses"> <ul> <li> <a href=""><img src="static/images/tjkc1.jpg" alt=""></a> </li> <li> <a href=""><img src="static/images/tjkc2.jpg" alt=""></a> </li> </ul> <div> <a href=""><img src="static/images/tjkc3.jpg" alt=""></a> <p> <a href="">CI框架30分钟极速入门</a><br> <span>中级</span> <span>49959次播放</span> </p> </div> <div> <a href=""><img src="static/images/tjkc4.jpg" alt=""></a> <p> <a href="">2018前端入门_HTML5</a><br> <span>初级</span> <span>211647次播放</span> </p> </div> </div> <br/> <h3>最新更新</h3> <div class="latest"> <div> <a href=""><img src="static/images/laravel.jpg" alt=""></a> <p> <a href="">Laravel 5.8 中文文档手册</a><br> <span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet5...</span><br> <span>中级</span> <span>7730次播放</span> </p> </div> <div> <a href=""><img src="static/images/javascript.jpg" alt=""></a> <p> <a href="">JavaScript极速入门</a><br> <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编...</span><br> <span>初级</span> <span>49791次播放</span> </p> </div> <div> <a href=""><img src="static/images/7th.jpg" alt=""></a> <p> <a href="">第七期_直播体验课</a><br> <span>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广...</span><br> <span>初级</span> <span>7296次播放</span> </p> </div> <div> <a href=""><img src="static/images/css3.jpg" alt=""></a> <p> <a href="">CSS3极速入门</a><br> <span> html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程...</span><br> <span>初级</span> <span>6788次播放</span> </p> </div> <div> <a href=""><img src="static/images/html5.jpg" alt=""></a> <p> <a href="">HTML5极速入门</a><br> <span>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布...</span><br> <span>初级</span> <span>5789次播放</span> </p> </div> <div> <a href=""><img src="static/images/nodejs.jpg" alt=""></a> <p> <a href="">nodejs开发基础教程</a><br> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js...</span><br> <span>初级</span> <span>4952次播放</span> </p> </div> </div> </div> <h3>最新文章</h3> <div class="articles"> <div> <a href=""><img src="static/images/a1.jpg" alt=""></a> <p> <a href="">PHP之十六个魔术方法详解（总结）</a><br><br> <span>发布时间：2019-07-29</span> </p> </div> <div> <a href=""><img src="static/images/a2.png" alt=""></a> <p> <a href="">PHP生成折线图和饼图等</a><br><br> <span>发布时间：2019-08-02</span> </p> </div> <div> <a href=""><img src="static/images/a3.jpg" alt=""></a> <p> <a href="">PHP实现动态规划之***问题</a><br><br> <span>发布时间：2019-08-13</span> </p> </div> <div> <a href=""><img src="static/images/a4.jpg" alt=""></a> <p> <a href="">ThinkPHP6源码：从Http类的实例化看依赖注入是如何实现的</a><br><br> <span>发布时间：2019-09-06</span> </p> </div> <div> <a href=""><img src="static/images/a5.png" alt=""></a> <p> <a href="">PHP7中php.ini、php-fpm和www.conf 配置</a><br><br> <span>发布时间：2019-08-23</span> </p> </div> </div> <h6>更多内容</h6> <h3>最新博文</h3> <div class="blogs"> <p> <a href="">mysql查询时间戳和日期的转换</a> <span>2019-09-07</span> </p> <p> <a href="">小程序实现复制文本内容</a> <span>2019-09-06</span> </p> <p> <a href="">js获取url链接中的域名部分</a> <span>2019-09-07</span> </p> <p> <a href="">小程序实现头像图片裁剪</a> <span>2019-09-03</span> </p> <p> <a href="">《悦帮到家》小程序</a> <span>2019-09-03</span> </p> </div> <h6>更多内容</h6> <h3>最新问答</h3> <div class="qas"> <p> <a href="">照抄下拉为什么还是连不是，各种问题</a> <span>2019-09-14</span> </p> <p> <a href="">curl抓取页面之前都比较稳定，后来就输出空页面了</a> <span>2019-09-14</span> </p> <p> <a href="">导入项目源码访问学生管理的学生列表出错</a> <span>2019-09-14</span> </p> <p> <a href="">浏览器显示出来的字符都是框框七七八八的乱的东西</a> <span>2019-09-14</span> </p> <p> <a href="">服务器80端口telnet测试通，但网页还是无法打开</a> <span>2019-09-13</span> </p> </div> <div class="more"> <h6>更多内容</h6> </div> <!-- 底部 --> <div class="footer"> <ul> <li> <a href=""><img src="static/font-icon/zhuye.png" alt=""><br/><span>主页</span></a> </li> <li> <a href=""><img src="static/font-icon/video.png" alt=""><br/><span>视频</span></a> </li> <li> <a href=""><img src="static/font-icon/luntan.png" alt=""><br/><span>社区</span></a> </li> <li> <a href=""><img src="static/font-icon/geren.png" alt=""><br/><span>我的</span></a> </li> </ul> </div> </body> </html>
第一个init.css 是清楚标签的默认样式
body {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
overflow-y: initial;
position: relative;
/*不要出现水平滚动条*/
overflow-x: hidden;
/*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
-webkit-tap-highlight-color: transparent;
}第2个style_m.css是首页的布局
.top {
position: fixed;
top: 0;
width: 100%;
height: 42px;
background-color: #444444;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.top {
display: flex;
}
.top img:first-of-type,
.top img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
}
.top img:first-of-type {
border-radius: 50%;
margin-left: 5px;
}
.top .logo {
text-align: center;
flex: 1;
}
.top .logo img {
width: 94px;
height: 45px;
}
/*轮播图*/
.banner {
display: flex;
}
.banner img {
width: 100%;
height: 160px;
}
/*导航区*/
.nav {
height: 170px;
background-color: white;
box-sizing: border-box;
}
.nav ul {
margin: 0;
padding: 6px;
}
.nav ul li {
list-style-type: none;
text-align: center;
height: 75px;
}
.nav ul li img {
width: 45px;
height: 45px;
}
.nav ul li a {
text-align: center;
color: gray;
text-decoration: none;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
}
/*推荐课程区*/
h3 {
color: gray;
}
.courses {
height: 326px;
color: gray;
}
.courses ul {
margin: 0;
padding: 0;
list-style: none;
/*flex布局*/
display: flex;
}
.courses ul li {
padding: 5px;
}
.courses ul img {
width: 100%;
height: 90px;
}
.courses div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
/*flex布局*/
display: flex;
justify-content: flex-start;
}
.courses div img {
width: 100%;
height: 90px;
}
.courses div a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.courses div p {
flex: .55;
margin-left: 15px;
}
.courses div p span:first-of-type {
font-size: 0.8rem;
background-color: black;
color: white;
border-radius: 30%;
padding: 0 2px;
}
.courses div p span:last-of-type {
font-size: 0.7rem;
}
/*最新推荐*/
.latest {
color: #888;
width: 100%;
}
.latest div {
background-color: white;
width: 100%;
display: flex;
white-space: nowrap;
margin: 10px auto;
}
.latest div a {
text-decoration: none;
color: #888;
flex: 0.45;
}
.latest div a img {
padding: 10px;
width: 330px;
height: 90px;
}
.latest div p {
padding: 0 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.latest div p a {
color: #888;
text-decoration: none;
font-size: 1.2rem;
}
.latest div p span:first-of-type {
font-size: 0.2rem;
color: #888;
margin: 10px 0 10px 5px;
}
.latest div p span:nth-last-of-type(2) {
font-size: 0.7rem;
background-color: #2d353c;
color: white;
border-radius: 35%;
padding: 2px 5px;
margin: 5px 0;
}
.latest div p span:last-of-type {
font-size: 0.2rem;
color: #888;
margin-left: 280px;
}
/* 最新文章 */
.articles {
width: 100%;
}
.articles div {
background-color: white;
width: 100%;
height: 90px;
display: flex;
flex-direction: row-reverse;
margin: 10px 0;
align-items: center;
}
.articles div img {
width: 218px;
height: 65px;
}
.articles div a {
text-decoration: none;
color: #888;
flex: 0.3;
font-weight: bold;
}
.articles div p {
margin: 0;
flex: 0.7;
}
.articles div p a {
padding-left: 15px;
font-size: 0.9rem;
}
.articles div p span {
color: #888;
font-size: 0.5rem;
padding-left: 15px;
}
h6 {
width: 100%;
background-color: white;
text-align: center;
font-size: 0.14px;
margin: 0;
padding: 5px 0;
color: #888;
letter-spacing: 2px;
}
/* 最新博文 */
.blogs {
width: 100%;
}
.blogs p {
background-color: white;
margin: 10px 0;
display: flex;
padding: 10px 0;
}
.blogs a {
text-decoration: none;
color: #888;
padding-left: 15px;
font-weight: bold;
font-size: 0.9rem;
flex: 0.9;
}
.blogs p span {
color: #888;
font-size: 0.5rem;
flex: 0.1;
}
/* 最新问答 */
.qas {
width: 100%;
}
.qas p {
background-color: white;
padding: 10px 0;
display: flex;
}
.qas p a {
text-decoration: none;
color: #888;
padding-left: 15px;
font-weight: bold;
font-size: 0.9rem;
flex: 0.9;
}
.qas p span {
color: #888;
font-size: 0.5rem;
flex: 0.1;
}
/*底部样式*/
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 42px;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #eee;
}
.more {
padding-bottom: 50px;
}
.footer ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.footer ul li img {
width: 20px;
height: 20px;
}
.footer ul li a {
color: gray;
text-decoration: none;
}
.footer ul li {
flex: 1;
}一开始遇到一个问题，就是footer会把上面内容的最下面一两行给遮住。后来给最下面的最新内容加了一个盒子，盒子的属性写了个padding-bottom:50px，就显示完整了。
附加作业：仿某企业手机官网。原网站是响应式的网站，头部和底部都没有固定，而且是PC的风格。通过这段时间的学习，也小小挑战一下，仿一个首页出来，利用一些学到的知识点，稍加改动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/init.css"> <link rel="stylesheet" href="static/css/style_k.css"> <title>手机官网</title> </head> <body> <!--布局原则: 宽宽自适应, 高度是固定--> <!--固定定位: 顶部--> <div class="top"> <img src="static/images/logo_m.png" alt=""> <div class="center"><img src="static/images/black.jpg" alt=""></div> <img src="static/images/navIco.png" alt=""> </div> <!-- 轮播图 --> <div class="banner"><img src="static/images/slide1.jpg" alt=""></div> <!-- 产品区 --> <div class="products"> <div class="prologo"> <img src="static/images/nimg330_1.png" alt=""> <p> <span>PRODUCT CENTER</span><br /> <span>加快世界物联网生活建设，打造影响全人类的智能锁产品</span> </p> </div> <div class="proshow"> <img src="static/images/product1.png" alt=""><br /> <p> <span>S8指纹锁</span><br /> <span>简约之名，成就经典</span> </p> </div> <div class="arrow"> <img src="static/images/left.png" alt=""> <img src="static/images/right.png" alt=""> </div> </div> <!-- 视频区 --> <div class="video"> <div> <P> <span>精彩视频</span><br /> <span>VIDEO</span><br /> <span>智能锁 我选凯迪仕</span><br /> <span>致力于为用户开启“安全无忧”智能生活模式</span> </P> </div> <div class="videowindow"> <img src="static/images/video.png" alt=""><br /> <p> <a href="">更多视频 ></a><br> </p> </div> </div> <!-- 新闻区 --> <div class="news"> <div class="newstitle"> <span>新闻资讯</span><br /> <span>NEWS CENTER</span> </div> <div class="newshead"> <a href=""><img src="static/images/news0.jpg" alt=""></a> <p> <a href="">喜讯 | 凯迪仕连续三年斩获科睿奖最高奖项——***创新类金奖！</a><br> <span>2019-08-23</span> <span>49791次浏览</span> </p> </div> <div class="newslist"> <div> <a href=""><img src="static/images/news1.jpg" alt=""></a> <p> <a href="">喜讯 | 凯迪仕连续三年斩获科睿奖最高奖项——***创新类金奖！</a><br> <span>2019-08-23</span> <span>49791次浏览</span> </p> </div> <div> <a href=""><img src="static/images/news2.jpg" alt=""></a> <p> <a href="">凯迪仕央视***战略升级，45分钟超时长TVC广告全天霸屏CCTV！</a><br> <span>2019-08-05</span> <span>49791次浏览</span> </p> </div> <div> <a href=""><img src="static/images/news3.jpg" alt=""></a> <p> <a href="">Kaadas凯迪仕2019建博会完美收官!</a><br> <span>2019-07-11</span> <span>7296次浏览</span> </p> </div> </div> <div class="more"> <span> <a href=""> MORE </a> </span> </div> <!-- 底部 --> <div class="footer"> <div class="tel"> <img src="static/images/logo2.png"><br /> <span>******：400-800-3756</span><br /> <span>售后***：400-116-6667</span><br /> <span>深圳市南山区北环大道辅路</span><br /> <span>清华信息港研发楼B座9楼</span> </div> <div class="ewm"> <div> <img src="static/images/ewm1.jpg" alt=""><br /> <span>微信公众号</span> </div> <div> <img src="static/images/ewm2.jpg" alt=""><br /> <span>招商***微信号</span> </div> </div> <div> <img src="static/images/QQ.png" alt=""> <img src="static/images/weixin.png" alt=""> <img src="static/images/weibo.png" alt=""> </div> <div class="links"> <ul> <li> <a href=""><span>隐私政策</span></a> </li> <li> <a href=""><span>服务条款</span></a> </li> <li> <a href=""><span>招商代理</span></a> </li> <li> <a href=""><span>代理支持</span></a> </li> <li> <a href=""><span>联系我们</span></a> </li> </ul> </div> <div class="copyright"> <span>Copyright © 2018凯迪仕. 粤ICP备13**********号 Powered by vancheer eqh</span> </div> </div> </body> </html>
页面基本上是仿的，有些简化，因为手艺不够。
.top {
position: fixed;
top: 0;
width: 100%;
height: 40px;
background-color: #000;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.top {
display: flex;
justify-content: space-between;
}
.top img:first-of-type {
width: 180px;
height: 21px;
margin-top: 5px;
margin-left: 5px;
}
.top img:last-of-type {
width: 30px;
height: 24px;
margin-top: 5px;
margin-right: 5px;
}
.top .center {
text-align: center;
width: 100%;
flex: 1;
}
.top .center img {
height: 45px;
}
/*轮播图*/
.banner {
display: flex;
}
.banner img {
width: 100%;
}
.products {
background-color: #444;
text-align: center;
}
.products .prologo img {
display: block;
margin: 0 auto;
padding-top: 15px;
}
.products .prologo span:first-of-type {
font-size: 0.8rem;
font-weight: bold;
color: #CCC;
}
.products .prologo span:last-of-type {
font-size: 0.8rem;
color: #CCC;
}
.products .proshow {
background-color: #222;
padding-bottom: 1px;
}
.products .proshow span:first-of-type {
font-size: 1.3rem;
font-weight: bold;
color: #CCC;
}
.products .proshow span:last-of-type {
color: #CCC;
}
.products .arrow {
text-align: center;
background-color: #222;
}
.products .arrow img {
height: 40px;
width: 40px;
padding: 10px;
}
/* 视频区 */
.video {
background-color: red;
text-align: center;
padding-top: 15px；
}
.video div p {
margin: 0;
}
.video div p span:first-of-type {
font-size: 1.3rem;
font-weight: bold;
color: #CCC;
line-height: 1.5rem;
}
.video div p span:nth-of-type(2) {
font-size: 0.8rem;
color: #999;
line-height: 1.5rem;
}
.video div p span:nth-of-type(3) {
font-size: 1.1rem;
color: #ccc;
line-height: 3rem;
}
.video div p span:last-of-type {
font-size: 0.8rem;
color: #ccc;
line-height: 1.5rem;
}
.video .videowindow p {
text-align: center;
color: #CCC;
padding-bottom: 10px;
}
.video .videowindow p a {
text-decoration: none;
color: #CCC;
}
/* 新闻区*/
.news {
background-color: #222;
}
.news .newstitle {
text-align: center;
}
.news .newstitle span:first-of-type {
font-size: 1.3rem;
font-weight: bold;
color: #CCC;
line-height: 3rem;
}
.news .newstitle span:nth-of-type(2) {
font-size: 0.8rem;
color: #999;
line-height: 1.5rem;
}
.news .newshead img {
width: 95%;
margin: 5px auto;
display: block;
}
.news .newshead p a {
color: #CCC;
text-decoration: none;
text-align: center;
}
.news .newshead p span:first-of-type {
font-size: 0.8rem;
color: white;
padding: 0 2px;
}
.news .newshead p span:last-of-type {
font-size: 0.7rem;
color: #ccc;
margin-left: 20px;
}
.newslist {
color: #888;
width: 100%;
}
.newslist div {
background-color: #444;
width: 100%;
display: flex;
white-space: nowrap;
margin: 10px auto;
}
.newslist div a {
text-decoration: none;
color: #EEE;
flex: 0.45;
}
.newslist div a img {
padding: 10px;
width: 150px;
height: 90px;
}
.newslist div p {
padding: 5px 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.newslist div p a {
text-decoration: none;
}
.newslist div p span:first-of-type {
font-size: 0.6rem;
color: #eee;
margin: 10px 0 10px 5px;
}
.newslist div p span:last-of-type {
font-size: 0.6rem;
color: #EEE;
}
.more {
background-color: #222;
text-align: center;
}
.more span {
border: 1px solid #888;
border-radius: 30%;
}
.more span a {
text-decoration: none;
color: #CCC;
}
/* 底部 */
.footer {
text-align: center;
margin-top: 30px;
}
.footer .tel span:first-of-type {
color: #EEE;
font-size: 1.5rem;
font-weight: bold;
line-height: 50px;
}
.footer .tel span:nth-of-type(2) {
color: #EEE;
font-size: 1.5rem;
font-weight: bold;
line-height: 50px;
}
.footer .tel span:nth-of-type(3) {
color: #EEE;
font-size: 0.8rem;
line-height: 20px;
}
.footer .tel span:last-of-type {
color: #EEE;
font-size: 0.8rem;
line-height: 20px;
}
.footer .ewm {
display: flex;
justify-content: space-evenly;
margin: 20px;
}
.footer .ewm span {
color: #CCC;
font-size: 0.6rem;
}
.footer .links ul {
display: flex;
justify-content: space-evenly;
}
.footer .links ul li {
list-style-type: none;
}
.footer .links ul li a {
text-decoration: none;
font-size: 0.7 rem;
color: #888;
line-height: 20px;
}
.footer .copyright {
margin-top: 10px;
padding-bottom: 10px;
}
.footer .copyright span {
text-decoration: none;
color: #666;
font-size: 0.6rem;
line-height: 15px;
}CSS写了大概有4/5个小时吧，对于小白来说，确实是不容易，远远还没熟练到随心所欲的程度，有的地方也是乱写的，不知道是不是规范或者是实用，总之把这个样子写了个七七八八，也算是第一次把一个手机网页写完了。还要多看多练才行，学习更规范的写法。前期很多知识点已经记不清了，回头看老师的代码，再就是度娘上搜一搜。最后的页面如下效果：
有些地方没有写细致，还有一些效果，比如鼠标放上去变颜色变大都没有写，包括有些间距也是padding margin乱写的。再花几个小时肯定可以做的更精细。这一阶段没有白学，还是蛮有收获的。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
