外面寒风呼啸,所以就在被窝里过了一个暖暖的周末。
宅在屋里两天没下楼,我觉得从宅的程度来说,我还是很有当程序员的潜质的哦。
敲代码是必须的,犒劳自己也是必须的,毕竟生活是要精彩的过的。
冷冷的冬日,守着暖暖的屋子,做几道好菜,添一杯热茶,放一曲音乐,便是一个温暖的小世界。
在这个小世界里,我们继续欢乐的来敲代码吧。
受同学启发,我也替换了练习里面的照片,不用那些丑丑的广告图片,换上了我最喜欢的吾皇巴扎黑。
上图上图,来看看我好久不见的吾皇巴扎黑。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" href="../CSS/index.css" />
- </head>
- <!--
- 伪代码:
- 模块盒子section#box
- 内容区域 content
- 左侧区域 left-content
- 导航 nav
- 列表 ul.li
- 图片
- 半透明层
- 广告语 text
- 下方导航标签
- 右侧区域 right-content
- 广告图片 a.img
- 广告区域 bottom
- 广告图片 a
- -->
- <body>
- <section id="box">
- <div class="content">
- <nav class="navigate">
- <a href="">吾皇驾到</a>
- <a href="">巴扎黑</a>
- <a href="">滚粗去</a>
- <a href="">养的啥</a>
- </nav>
- <div class="left-content">
- <ul class="ul">
- <li class="li">
- <div class="bg-box">
- <div class="img">
- <a href="" class="img"><img src="../img/1-1.png" /></a>
- <div class="bg"></div>
- <div class="text">
- <a href="">吾皇驾到</a>
- </div>
- </div>
- <div class="tags">
- <a href="" class="bold">家庭保洁</a>
- <a href="" class="red">洗衣</a>
- <a href="">私厨</a>
- <a href="">催乳师</a>
- </div>
- <div class="tags">
- <a href="" class="bold">万能缴费</a>
- <a href="">物业</a>
- <a href="">宽带</a>
- <a href="" class="red">水电煤</a>
- </div>
- </div>
- </li>
- <li class="li">
- <div class="bg-box">
- <div class="img">
- <a href="" class="img"><img src="../img/1-3.png" /></a>
- <div class="bg"></div>
- <div class="text">
- <a href="">吾皇驾到</a>
- </div>
- </div>
- <div class="tags">
- <a href="" class="bold">家庭保洁</a>
- <a href="" class="red">洗衣</a>
- <a href="">私厨</a>
- <a href="">催乳师</a>
- </div>
- <div class="tags">
- <a href="" class="bold">万能缴费</a>
- <a href="">物业</a>
- <a href="">宽带</a>
- <a href="" class="red">水电煤</a>
- </div>
- </div>
- </li>
- <li class="li">
- <div class="bg-box">
- <div class="img">
- <a href="" class="img"><img src="../img/1-2.png" /></a>
- <div class="bg"></div>
- <div class="text">
- <a href="">吾皇驾到</a>
- </div>
- </div>
- <div class="tags">
- <a href="" class="bold">家庭保洁</a>
- <a href="" class="red">洗衣</a>
- <a href="">私厨</a>
- <a href="">催乳师</a>
- </div>
- <div class="tags">
- <a href="" class="bold">万能缴费</a>
- <a href="">物业</a>
- <a href="">宽带</a>
- <a href="" class="red">水电煤</a>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="right-content">
- <a href="">
- <img src="../img/1-4.png" />
- </a>
- </div>
- </div>
- <div class="bottom">
- <img src="../img/1-5.png" />
- </div>
- </section>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" href="../css/index.css" />
- </head>
- <!--
- 伪代码:
- 模块盒子section#box
- 内容区域 content
- 左侧区域 left-content
- 导航 nav
- 列表 ul.li
- 图片
- 半透明层
- 广告语 text
- 下方导航标签
- 右侧区域 right-content
- 广告图片 a.img
- 广告区域 bottom
- 广告图片 a
- -->
- <body>
- <section id="box">
- <div class="content">
- <nav class="navigate">
- <a href="">吾皇驾到</a>
- <a href="">巴扎黑</a>
- <a href="">滚粗去</a>
- <a href="">养的啥</a>
- </nav>
- <div class="left-content">
- <ul class="ul">
- <li class="li">
- <div class="bg-box">
- <div class="img">
- <a href="" class="img"><img src="../img/1-1.png" /></a>
- <div class="bg"></div>
- <div class="text">
- <a href="">吾皇驾到</a>
- </div>
- </div>
- <div class="tags">
- <a href="" class="bold">家庭保洁</a>
- <a href="" class="red">洗衣</a>
- <a href="">私厨</a>
- <a href="">催乳师</a>
- </div>
- <div class="tags">
- <a href="" class="bold">万能缴费</a>
- <a href="">物业</a>
- <a href="">宽带</a>
- <a href="" class="red">水电煤</a>
- </div>
- </div>
- </li>
- <li class="li">
- <div class="bg-box">
- <div class="img">
- <a href="" class="img"><img src="../img/1-3.png" /></a>
- <div class="bg"></div>
- <div class="text">
- <a href="">吾皇驾到</a>
- </div>
- </div>
- <div class="tags">
- <a href="" class="bold">家庭保洁</a>
- <a href="" class="red">洗衣</a>
- <a href="">私厨</a>
- <a href="">催乳师</a>
- </div>
- <div class="tags">
- <a href="" class="bold">万能缴费</a>
- <a href="">物业</a>
- <a href="">宽带</a>
- <a href="" class="red">水电煤</a>
- </div>
- </div>
- </li>
- <li class="li">
- <div class="bg-box">
- <div class="img">
- <a href="" class="img"><img src="../img/1-2.png" /></a>
- <div class="bg"></div>
- <div class="text">
- <a href="">吾皇驾到</a>
- </div>
- </div>
- <div class="tags">
- <a href="" class="bold">家庭保洁</a>
- <a href="" class="red">洗衣</a>
- <a href="">私厨</a>
- <a href="">催乳师</a>
- </div>
- <div class="tags">
- <a href="" class="bold">万能缴费</a>
- <a href="">物业</a>
- <a href="">宽带</a>
- <a href="" class="red">水电煤</a>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="right-content">
- <a href="">
- <img src="../img/1-4.png" />
- </a>
- </div>
- </div>
- <div class="bottom">
- <img src="../img/1-5.png" />
- </div>
- </section>
- </body>
- </html>
来源: http://www.qdfuns.com/notes/48012/55667974ea25c2677598d6587f4064ec.html