页面的圣杯布局和内容添加-2019年9月5日 - 作业

实例

body {
    margin: 0;
}


/* 导航标签 */

.header {
    background: #000;
}

.header .content {
    width: 90%;
    background-color: black;
    margin: 0 auto;
    height: 60px;
}

.header .content .nac {
    padding: 0;
    margin: 0;
}

.header .content .nac li {
    list-style: none;
}

.header .content .nac li a {
    float: left;
    text-decoration: none;
    min-width: 80px;
    min-height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
}

.header .content .nac li :hover {
    background: rgb(182, 180, 180);
    color: rgb(255, 196, 0);
    font-size: 1.1rem;
}

.header .content .gg {
    overflow: hidden;
}

.header .content .gg li {
    float: left;
    line-height: 60px;
}

.header .content .gg .txt {
    margin-left: 180px;
}

.header .content .gg .txt input {
    height: 23px;
    width: 200px;
    border-radius: 8px;
}

.header .content .gg .butt {
    width: 35px;
    height: 35px;
    margin-top: 15px;
    margin-left: 5px;
}

.header .content .gg .butt img {
    width: 100%;
    height: 100%;
}

.header .content .gg .butt img:hover {
    width: 110%;
    height: 110%;
}

.header .content .gg .us {
    margin-left: 200px;
    margin-right: 50px;
}

.header .content .gg .tx {
    height: 50px;
    width: 50px;
    border: 2px solid #888;
    border-radius: 25px;
}

.header .content .gg .tx img {
    width: 92%;
    height: 92%;
}


/* 内容主题标签 */


/* 圣杯布局 */

.main {
    width: 90%;
    margin: 0 auto;
}

.box1 {
    width: 100%;
    min-height: 800px;
    background: rgb(236, 235, 216);
    border: 1px solid #888;
}

.box2 {
    width: 200px;
    min-height: 800px;
    border: 1px solid #888;
}

.box3 {
    width: 200px;
    min-height: 800px;
    border: 1px solid #888;
}

.box1,
.box2,
.box3 {
    float: left;
}

.main {
    overflow: hidden;
}

.box1 {
    box-sizing: border-box;
    padding-left: 200px;
    padding-right: 200px;
}

.box2 {
    box-sizing: border-box;
    margin-left: -100%;
}

.box3 {
    box-sizing: border-box;
    margin-left: -200px;
}

***gz {
    padding: 0;
    border: 1px solid #000;
    width: 90%;
    height: 360px;
    margin: 0 auto;
}


/* 尾部标签 */

.footer {
    /* background: #777; */
}

.footer .content {
    width: 90%;
    background: #000;
    margin: 0px auto;
}

.footer .content p {
    margin: 0;
    text-align: center;
    line-height: 40px;
}

.footer .content p a {
    color: #888;
    text-decoration: none;
}

.box2 h3 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: -20px;
}

.box2 ul {
    list-style: none;
    padding: 0;
}

.box2 ul li {
    text-align: center;
    margin-top: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid #888;
}

.box3 h3 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: -20px;
}

.box3 ol li {
    margin: 15px auto;
    padding-bottom: 15px;
}

.box1 table {
    margin: 0;
    padding: 0;
    width: 100%;
}

.box1 table tbody tr td {
    width: 25%;
    border: 1px solid #000;
    /* margin: 50px; */
}

.zst {
    width: 90%;
    height: 100px;
    /* background-color: aquamarine; */
    margin: 6px auto;
}

.zst img {
    width: 100%;
    height: 100%;
    margin: 0;
}

.zst1,
.zst2,
.zst3,
.zst4 {
    margin: 0;
    padding: 0;
}

.zst1,
.zst2 {
    text-align: center;
}

.zst2 {
    text-decoration: line-through;
}

.zst6 {
    color: red;
    font-style: oblique;
}

.zst4 {
    margin-left: 30%;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style7.css">
</head>

<body>
    <div class="header">
        <div class="content">
            <ul class="nac">
                <li><a href="">首页推荐</a></li>
                <li><a href="">生活用品</a></li>
                <li><a href="">数码产品</a></li>
                <li><a href="">零食***</a></li>
                <li><a href="">珠宝首饰</a></li>
            </ul>
            <!-- 以下部分添加一个搜索按钮和文本框 -->
            <ul class="gg" style="margin: 0; padding: 0; list-style:none;">
                <li class="txt"><input type="text" placeholder="请输入关键字"></li>
                <li class="butt"><img src="1.png"></li>
                <li class="us">
                    <p style="color: beige; margin: 0; padding: 0;">hgr麦片</p>
                </li>
                <li class="tx"><img src="12.png"></li>
            </ul>
        </div>

    </div>
    <div class="imgz">
        <img src="timg.jpg" style="width: 100%;  height: 100%; margin: 0 auto">
    </div>

    <div class="main">
        <div class="box1">
            <h2 style="text-align: center;">推荐商品</h2>
            <hr width="90%" style="margin: 0 auto;">
            <table cellspacing="20em">
                <!-- 构建展示格式行-->
                <tbody>
                    <tr>

                        <td>
                            <div class="zst"><img src="timg.jpg">
                            </div>
                            <h5 class="zst1">商品名称</h5>
                            <h6 class="zst2">原价：￥99</h6>
                            <em class="zst6">现价：￥59</em>
                            <button class="zst4">***</button>
                        </td>
                        <td>
                            <div class="zst"><img src="timg.jpg">
                            </div>
                            <h5 class="zst1">商品名称</h5>
                            <h6 class="zst2">原价：￥99</h6>
                            <em class="zst6">现价：￥59</em>
                            <button class="zst4">***</button>
                        </td>
                        <td>
                            <div class="zst"><img src="timg.jpg">
                            </div>
                            <h5 class="zst1">商品名称</h5>
                            <h6 class="zst2">原价：￥99</h6>
                            <em class="zst6">现价：￥59</em>
                            <button class="zst4">***</button>
                        </td>
                        <td>
                            <div class="zst"><img src="timg.jpg">
                            </div>
                            <h5 class="zst1">商品名称</h5>
                            <h6 class="zst2">原价：￥99</h6>
                            <em class="zst6">现价：￥59</em>
                            <button class="zst4">***</button>
                        </td>
                    </tr>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    </tr>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    <td>
                        <div class="zst"><img src="timg.jpg">
                        </div>
                        <h5 class="zst1">商品名称</h5>
                        <h6 class="zst2">原价：￥99</h6>
                        <em class="zst6">现价：￥59</em>
                        <button class="zst4">***</button>
                    </td>
                    </tr>
                </tbody>


            </table>


        </div>
        <div class="box2">
            <h3>商品列表</h3>
            <hr>
            <ul>
                <li>展示商品1</li>
                <li>展示商品2</li>
                <li>展示商品3</li>
                <li>展示商品4</li>
                <li>展示商品5</li>
                <li>展示商品6</li>
                <li>展示商品7</li>
                <li>展示商品8</li>
            </ul>
        </div>
        <div class="box3">
            <h3>热销商品</h3>
            <hr>
            <ol>
                <li>热销商品</li>
                <li>热销商品</li>
                <li>热销商品</li>
                <li>热销商品</li>
                <li>热销商品</li>
                <li>热销商品</li>
                <li>热销商品</li>
                <li>热销商品</li>
                <li>热销商品</li>
            </ol>
        </div>
    </div>

    <div class="footer">
        <div class="content">
            <p>
                <a href="">© XXXX网版本所有</a>   |  
                <a href="">0756-666***999</a>   |  
                <a href="">粤ICP备18***666</a>
            </p>
        </div>
    </div>



</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

个人总结：前端其实是第一次接触，说实话很迷不知道***才能能把页面做的和***，以前是分不清HTML和CSS的作用的，现在我知道到了，HTML可以创造一个个页面元素，然后通过CSS去选择对应的元素加工，描述，在用HTML+CSS对页面进行布局的时候，挺抽象的，不像以前玩魔兽地图编辑器一样，可以拖动组件，然后设置属性就好，它需要从上到下先把你需要的元素通过html先写出来，然后在通过CSS去调整它的位置，样式，达到具体想要的效果；

常用的CSS属性记得比较容易记得住，但是一些不常用通过看手册知道有这个功能可是目前只能是想用到就去查手册，多练习才能记得

在做商品推荐区的时候我在想可不可以用表格来做，因为表格有个单元格与单元格之间的距离这个属性，能很好的让展示框与展示框之间进行隔开，在一个单元格里在填充想要的元素组件，此时元素组件的定位就是相对于单元格了，那么只要控制好块元素和内联元素的属性通过内外边距来挤位置，可以很容易做好样式的定位，先写规定好一个单元格内的需要什么元素，在复制成一列4个排列，调整好样式距离，然后按单元格元素格式直接增加行列就好了。也不知这样写是好还是不好，上课时记得老师说，前端是八仙过海，各显神通，于是就试一下。

作为前端的新手，代码有些地方还写得很乱，一些是原生属性，一些又直接写在标签里！这些以后要多注意，最后前端真是个抽象的东西需要多加练习才行。

批改状态：合格

老师批语：用表格制作商品展示, 不如作嵌套的无序列表, 当然, 表格也非常适合的还有, 你的购买按钮是真的丑