纯手工制作一个网页 -- html css结构分析

徐亦快

已于 2022-03-15 15:07:47 修改

阅读量507

点赞数

分类专栏：前端

于 2021-05-22 15:21:37 首次发布

本文链接：https://blog.csdn.net/weixin_42280517/article/details/117161638

版权

HTML结构 CSS样式网页布局图片轮播响应式设计

关键词由CSDN通过智能技术生成

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

header

header头导航栏

login-banner

search

content

先写html
content部分结构划分

main

先来看看main区域
main区域html结构划分
由两部分组成，左边的aside和右边的banner。其中aside的li里面有个hover效果，会出来一个dl。banner里有一个ul放很多li图片，一个div放左右btn，一个ol放很多小圆点li。

这是一眼瞟过去要有的html的结构。

写代码，确定main区域的大结构。

<div class="content">
        <div class="inner-c">
            <!-- main 区域 -- >
            <div class="main">
                <div class="aside">
                    <ul class="classify">
                        <li>
                            <h2>技术</h2>
                            <p>
                                <a href="#">Java</a>
                                <a href="#">PHP</a>
                                <a href="#">C++</a>
                                <a href="#">区块链</a>
                            </p>
                            <b></b>
						</li>
                    </ul>
                </div>
                <div class="banner">
                    <ul>
                        <li><a href="#"><img src="01.jpg" alt=""></a></li>
                        <li><a href="#"><img src="02.jpg" alt=""></a></li>
                        <li><a href="#"><img src="03.jpg" alt=""></a></li>
                    </ul>
					<div class="btn">
                        <span class="left-btn"></span>
                        <span class="right-btn"></span>
                    </div>
                    <ol>
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

确定这个区域的css。
- 首先，是content的width是100%，还有个border-bottom，background-color。
- inner-c之前写过
- 最后比较麻烦的是main的css。
  - main这个盒子的高度（aside）。

- padding计算

.content .main {
    width: 100%;
    height: 376px;
    padding-top: 33px;
}

然后是右边的banner区域。

给ul设置一个特别长的宽度，这样float就不会掉下来。然后切换的原理是，ul带着里面的一堆li左右移动。然后banner的大小是固定好的，且设置了overflow:hidden。

.content .main .banner {
    float: right;
    width: 840px;
    height: 346px;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}
.content .main .banner ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 6000px;
    height: 346px;
}
.content .main .banner li {
    float: left;
    width: 840px;
    height: 346px;
}

btn和banner下面的ol采用绝对定位的方式

.content .main .banner .btn span {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    background: url(../images/banner_arrow_left.png) no-repeat center center;
    cursor: pointer;
}
.content .main .banner .btn .right-btn {
    right: 0;
    background-image: url(../images/banner_arrow_right.png);
}
.content .main .banner ol {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 75px;
    height: 6px;
    margin-left: -37.5px;
}
.content .main .banner ol li {
    float: left;
    width: 7px;
    height: 6px;
    margin: 0 4px;
    border-radius: 3px;
    background-color: rgba(255,255,255,0.4);
}

hot-recruit

hot_recruit结构分析
把分析结果写出html

观察在这一个区域里面有没有跟别的区域所共用的公用样式。发现有，集成到module-tabs去。其余更个性化的东西，放入hot-recruit。
量取height有一些经验。特别是有line-height的地方。

hot-company

hot-company结构分析

hot-links

hot-links结构分析

footer

footer结构分析
通过确定字号和line-height，再去量取高度。可以减少工作量。

copyright

copyright结构分析

对于这样的一个盒子
关于举报的div

width和height区域指的是右边的文字部分。而左边的图片则是通过绝对定位放进去的。是盒子的padding-left部分。

backtop

backtop小火箭
固定定位position: fixed;

.backtop {
    position: fixed;
    /* 先拉到正中间 */
    left: 50%;
    bottom: 88px;
    width: 28px;
    height: 46px;
    /* 版心的一半距离 + 30px */
    margin-left: 630px;
    background: url(../images/backtop.png) no-repeat 0 0;
}
.backtop:hover {
    background-position: -38px 0;
}