其他分享
首页 > 其他分享> > 【ZHYP003】子涵优品开发日志

【ZHYP003】子涵优品开发日志

作者：互联网

------------恢复内容开始------------

# 编写静态页面

尚品汇这个项目的静态页面是老师已经写好了，所以我现在自己思考一下怎么写这个静态页面。

清除默认样式

在我们编写静态网页开始，编写静态页面时，我们应该首先把浏览器的默认样式清除，我们可以在这里下载reset.css，通过引入这个样式文件，把浏览器的默认样式清除掉。

三明治布局

遇到第一个问题总布局设计，我们打开尚品汇官网观察一下，总布局是由页眉，主体部分，页脚组成的，那我们可以用header、main、footer这三个标签去表示，说实话，这个三明治布局，之前没有遇到过，但是之前面试的时候，面试官问过我一个问题，如何实现三栏布局。额，这个三明治布局不就是竖过来的三明治布局吗？然后，我就查看之前的博客，做了以下实验：

三明治布局的源码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子涵优品</title>
    <link type="text/css" rel="stylesheet" href="reset.css" />
    <style>
        body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        header {
            width: 1343px;
            height: 30px;
            background-color: red;
        }

        main {
            width: 1343px;
            height: 2486px;
            background-color: yellow;
        }

        footer {
            height: 362px;
            width: 1343px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

</html>

三明治布局设计的思考过程

  1. 把整个页面设置为弹性盒子，也就是display: flex;，这个用起来比较方便，所以就只记得这个，但是这个方法就是W3C最新出的，所以浏览器兼容是个问题，由于是个人网站，就先不考虑这么多，先用了再说。

  2. 一般来说弹性盒子这个布局默认的主轴方向是横着来的，但是三明治布局是竖着来的，所以我们在设置弹性盒子主轴的方向是竖着来的，也就是按照列来排，就要用到flex-direction: column;

  3. 关键的是，要把这三个区域显示出来，应该设置一下容器的宽度和高度，因为我们清除了浏览器的默认样式，所以就不用考虑这么多，直接设置容器的宽度和高度分别是：width: 100%;和height: 100%;，然后把三个区域的宽度和高度写死，开发的时候UI设计师会把设计稿给我们，这里我是用了软件手动去量的。

三明治布局的效果

三明治布局

header部分

大体的框架有了，我们先解决掉header部分的样式，我们打开尚品汇官网观察一下，通过修改字体大小、背景颜色的一系列操作，可以得到这张图的效果：

image

清除列表默认样式

用列表去实现的话，li前面应该有黑色的小圆点的，但是去哪里了呢？忘记我们之前清除浏览器的默认样式引进的一个样式表吗？在这里呢，打开这个样式文件reset.css你会发现这样一段代码，就是清除列表的默认样式的，也就是清除小圆点：

ol, ul {
	list-style: none;
}

鼠标悬停文字颜色的改变

因为鼠标悬停到文字上有颜色，所以我就加了以下代码：

a:hover {
    color: rgb(130, 130, 255);
}

文字链接

因为li元素里面是一个文字链接，所以我在li元素中再嵌套一个a元素。

列表行排列

为了让这两个列表横着来，我们可以故技重施，又用到上面的弹性盒子的一些代码：

display: flex;
flex-direction: column;
flex-wrap: wrap;

li元素单独行排列

经过上面的一系列操作，现在的页面是这样的：

image

这就有点奇怪了，加上上面的弹性盒子的代码，为什么没有全部横着来呢？|这个符号还在文字的下方，明明我设置了flex-wrap: wrap;这条代码了啊！它为什么还是会换行呢？会不会是因为li的高度问题，会不会是因为li的高度太小，相邻的元素跟在它后面呢？根据这个疑问，我为li元素设置了高度和文字居中：

li {
    height: 30px;
    text-align: center;
}

加完上面这段代码之后，页面的效果是这样的：

image

好像和尚硅谷官网的差不多了。

外边距

其实，我们这个顶部样式和官网的，还差一点外边距，我们尝试加一下边距给它：

#header-ul-left {
     width: 241.5px;
     height: 30px;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     margin-left: 31px;
     margin-right: 296px;
}

header部分源码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子涵优品</title>
    <link type="text/css" rel="stylesheet" href="reset.css" />
    <style>
        body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        header {
            width: 1343px;
            height: 30px;
            font-size: 12px;
            background-color: #EAEAEA;
            color: #666666;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }

        #header-ul-left {
            width: 241.5px;
            height: 30px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            margin-left: 31px;
            margin-right: 296px;
        }

        #header-ul-right {
            width: 633px;
            height: 30px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }

        li {
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        main {
            width: 1343px;
            height: 2486px;
            background-color: yellow;
        }

        footer {
            height: 362px;
            width: 1343px;
            background-color: blue;
        }

        a:hover {
            color: rgb(130, 130, 255);
        }
    </style>
</head>

<body>
    <header>
        <ul id="header-ul-left">
            <li>广州 子涵优品欢迎您！</li>
            <li>
                <a>请登录</a>
            </li>
            <li>|</li>
            <li>
                <a>免费注册</a>
            </li>
        </ul>

        <ul id="header-ul-right">
            <li>
                <a>我的订单</a>
            </li>
            <li>|</li>
            <li>
                <a>我的购物车</a>
            </li>
            <li>|</li>
            <li>
                <a>我的子涵优品</a>
            </li>
            <li>|</li>
            <li>
                <a>子涵优品会员</a>
            </li>
            <li>|</li>
            <li>
                <a>企业采购</a>
            </li>
            <li>|</li>
            <li>
                <a>关注子涵优品</a>
            </li>
            <li>|</li>
            <li>
                <a>合作招商</a>
            </li>
            <li>|</li>
            <li>
                <a>商家后台</a>
            </li>
        </ul>
    </header>
    <main></main>
    <footer></footer>
</body>

</html>

header部分实现效果

header部分

标签：flex,子涵,优品,header,height,width,wrap,li,ZHYP003
来源： https://www.cnblogs.com/Huang-zihan/p/16085017.html