POS机网页版之主页制作

最新推荐文章于 2022-08-14 21:42:08 发布

QQ654097375

最新推荐文章于 2022-08-14 21:42:08 发布

阅读量442

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/QQ654097375/article/details/84716315

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

host_page.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<link  rel="stylesheet" type="text/css" href="../host_css/title.css">//引入css
<link  rel="stylesheet" type="text/css" href="../host_css/first.css">
</head>

<body>
<div class="nav">
  <ul>
      <li><a href="item_list.html">Les'Go</a></li>//链接进入页面
      <li><a href="host_page.html">主页</a></li>
      <li><a href="item_list.html">商品列表</a></li>
  </ul>
<table>
    <tr>
    <td><img src="../image/cart.png"></td>
    <td><a href="cart.html">购物车</a></td>
    <td>(0)</td>
</tr></table>

</div>

<div class="content">
    <h1>
        Welcome to Let'Go!
    </h1>
    <p>
        商店里进行购物结算时会使用收银机（POS）系统，这台收银机会在结算时根据客户的购物车<br>
        （Cart)中的商品（Item）和商店正在进行的优惠活动（Promotion）进行结算和打印购物清单。<br>
        已知该商店正在对部分商品进行“买三送一”的优惠活动， 我们需要实现一个名为printInventory函<br>
        数，该函数能够将指定格式的数据作为参数输入，然后在浏览器的控制台中输出结算清单的文本。
    </p>
    <input type="button" value="Les'Go" οnclick="window.location.href='item_list.html'"/>//创建button按钮并通过事件改当变前页面


</div>
</body>
</html>

title.css

.nav ul li a{
    text-decoration: none;//去掉下划线
    font-size:30px;//字体大小
    color: cornsilk;内容颜色

}
.nav ul li{
    display: inline-block;//生成框内型行内块元素
   padding-left: 2.5%;//元素左内边距
}
.nav {
    background-color: black;//背景颜色

}
.nav table  {
    margin-top: -4%;//上外边距
    margin-left: 80%;//左外边距
    background-color: #000000;
    border-color: #000000; //4个边框颜色
}
.nav table a{
    text-decoration: none;
    font-size: small;
    color:cornsilk;
}
.nav table img{
    height: 20%;
   padding-right: 10%;

}
.nav table tr td {
    color: cornsilk;
}

body {
    margin: 0;padding: 0;
}

ul {
    margin: 0;padding: 0;
}

first.css

.content h1{
    font-size: 80px;
    color: black;
    margin-left: 2.5%;
    margin-top:2.5% ;
    margin-bottom: 2.5%;
}
.content p {
    font-size: 25px;
    color: black;
    margin-left: 2.5%;

}
.content{
    background-color: rgba(43, 99, 135, 0.55);
    margin-left:3%;
    margin-right: 3%;

}
.content input{
    border: blue;
    font-size: 20px;
    background-color: blue;
    color: white;
    width: 80px;
    height: 40px;
    margin-left: 2.5%;
    margin-bottom: 2.5%;
}