黑马前端——days16_js

胆怯与勇敢

于 2024-08-18 08:37:24 发布

阅读量358

点赞数 4

分类专栏：黑马前端文章标签：前端

本文链接：https://blog.csdn.net/qq_52652401/article/details/141286353

版权

黑马前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

案例 1

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style1.css">
</head>

<body>
  <h2>学生信息</h2>
  <p>将数据渲染到页面中...</p>
  <table>
    <caption>学生列表</caption>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>
    <script src="index1.js"></script>
  </table>
</body>

</html>

格式文件

table {
  width: 600px;
  text-align: center;
}

table,
th,
td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}

/* 标题 */
caption {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 700;
}

tr {
  height: 40px;
  /* 鼠标显示为手 */
  cursor: pointer;
}

/* 标题行 */
table tr:nth-child(1) {
  background-color: #000;
  color: white;
}

/* 数据行鼠标经过时 */
table tr:not(:first-child):hover {
  background-color: #eee;
  color: blue;
}

事件文件

let students = [
  { name: '小明', age: 18, gender: '男', hometown: '河北省' },
  { name: '小红', age: 19, gender: '女', hometown: '河南省' },
  { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
  { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
  { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
]
for (let i = 0; i < students.length; i++) {
  document.write(`
    <tr>
      <td>${i + 1}</td>
      <td>${students[i].name}</td>
      <td>${students[i].age}</td>
      <td>${students[i].gender}</td>
      <td>${students[i].hometown}</td>
    </tr>
  `)
}

案例 2

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style2.css">
</head>

<body>
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">
        <script src="index2.js"></script>
      </ul>
    </div>
  </div>
</body>

</html>

格式文件

* {
    margin: 0;
    padding: 0;
}

.w {
    width: 1200px;
    margin: auto;
}

body {
    background-color: #f3f5f7;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    overflow: hidden;
}

/* 主体内容 */
.box {
    margin-top: 30px;
}

/* 头部 */
.box-hd {
    height: 45px;
}

.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}

.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}

/* 一行放 5 个 li */
.box-bd ul {
    width: 1225px;
}

.box-bd ul li {
    position: relative;
    top: 0;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    /* 过渡动画 hover */
    transition: all .3s;
}

.box-bd ul li a {
    display: block;
}

.box-bd ul li:hover {
    top: -8px;
    box-shadow: 0 15px 30px rgb(0, 0, 0, 0.2);
}

.box-bd ul li img {
    width: 100%;
}

.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}

.box-bd .info span {
    color: #ff7c2d;
}

事件文件

let data = [
  {
    src: 'images/course01.png',
    title: 'Think PHP 5.0 博客系统实战项目演练',
    num: 1125
  },
  {
    src: 'images/course02.png',
    title: 'Android 网络动态图片加载实战',
    num: 357
  },
  {
    src: 'images/course03.png',
    title: 'Angular2 大前端商城实战项目演练',
    num: 22250
  },
  {
    src: 'images/course04.png',
    title: 'Android APP 实战项目演练',
    num: 389
  },
  {
    src: 'images/course05.png',
    title: 'UGUI 源码深度分析案例',
    num: 124
  },
  {
    src: 'images/course06.png',
    title: 'Kami2首页界面切换效果实战演练',
    num: 432
  },
  {
    src: 'images/course07.png',
    title: 'UNITY 从入门到精通实战案例',
    num: 888
  },
  {
    src: 'images/course08.png',
    title: 'Cocos 深度学习你不会错过的实战',
    num: 590
  }
]
for (let i = 0; i < data.length; i++) {
  document.write(`
    <li>
      <a href="#">
        <img src="${data[i].src}" title="${data[i].title}">
        <h4>
          ${data[i].title}
        </h4>
        <div class="info">
          <span>高级</span> • <span>${data[i].num}</span>人在学习
        </div>
      </a>
    </li>
  `)
}