day03：静态网页的练习

最新推荐文章于 2022-09-27 21:12:54 发布

dongys_z

最新推荐文章于 2022-09-27 21:12:54 发布

阅读量355

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_44248980/article/details/119276921

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文记录了一次通过实践制作网站静态首页的学习过程，重点在于加深对margin、border、float和清除浮动的理解。实践中遇到标签属性记忆模糊的问题，强调了理论与实践相结合的重要性。通过布局和板块构建，提升空间想象能力，认识到只要有耐心，复杂问题也能迎刃而解。代码示例展示了整个页面的结构和样式设置。

摘要由CSDN通过智能技术生成

今天通过跟学做某网站的首页，主要学习其静态网页的制作，巩固往日所学知识。

“不就几个div嘛有嘛了不起的！”

此次练习对margin的运用 border的利用 float浮动和清楚浮动有了更深的认识，之前听知识只是当时听懂了然而在自己亲身独自动手的时候遇到很多问题。标签属性记不清，虽然见了知道，但是不见想不起来。这就是没有理论结合实际的具体表现。

通过此次练习，让我对web有了一定认识，让自己拥有了足够的勇气，只要塌下心来慢慢来,

静静想想，一切都是小问题。对！一定要先主要排版布局，可以先使用border进行简单轮廓的构造，然后再往里面填东西。把他们看成一个板块一个板块，解决的方法不止一种，甚至你可以使用最基础的知识来解决他们，需要你不断锻炼自己的空间能力，拥有足够好的空间想象力，web很简单。

世上无难事，只怕有心人。加油！！！

（附上本次练习代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <title>Title</title>
</head>
<body>
<div class="main">
    <!-- 顶部导航栏 -->
    <div class="top">
        <div class="left">
            <img src="img/a.png" alt="">
        </div>
        <div class="right">
            <span>首页</span>
            <span>招投标</span>
            <span>机械加盟</span>
            <span>行业资讯</span>
            <span>关于我们</span>
        </div>
    
    </div>
    <!-- 歌剧院照片 -->
    <div class="photo">
        <div>
            <img src="img/k.png" alt="">
        </div>
    </div>
    <!-- 最新招标 -->
    <div class="title">
        <h2>最新招标</h2>
    </div>
    <!-- 招标介绍 -->
    <div class="photo_1">
        <div class="one">
            <div>
                <img src="img/j.png" alt="" style="width: 420px; height: 300px;">
            </div>
            <div class="page">
                <h3>关雎</h3>
                <p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
                <p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
                <p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
                <p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
                <p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
            </div>
        </div>
        <div class="two">
            <div>
                <img src="img/g.png" alt="" style="width: 420px; height: 300px;">
            </div>
            <div class="page">
                <h3>关雎</h3>
                <p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
                <p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
                <p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
                <p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
                <p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
            </div>
        </div>
        <div class="three">
            <div>
                <img src="img/f.png" alt="" style="width: 420px; height: 300px;">
            </div>
            <div class="page">
                <h3>关雎</h3>
                <p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
                <p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
                <p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
                <p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
                <p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
            </div>
        </div></div>
    </div>
    <!-- 招标titile -->
    <div class="title_1">
        <div>
            <h2>招标信息</h2>
        </div>
    </div>
    <!-- 招标信息 -->
    <div class="message">
        <div class="message_1">
            <div>
                <img src="img/i.png" alt="">
            </div>
            <div class="text">
                <h3>科技出手，功力双收</h3>
                <p>李某闭目听箜篌，只因天下无敌手。</p>
                <p>笔落才气惊星斗，龙骧凤翥势难收。</p>
                <p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p>
                <p>满堂花醉七千客，一剑霜寒十九州。</p>
<!--                <p>鼓角揭天嘉气冷，风涛动地海山秋。</p>-->
<!--                <p>请君暂上滕王阁，若个书生镇国侯。</p>-->
<!--                <p>东南永作金天柱，谁羡当年万户侯。</p>-->
<!--                <p>李某不愿留姓名，恐压天下十九州。</p>-->
            </div>
        </div>
        <div class="message_1">
            <div>
                <img src="img/h.png" alt="" style="margin-top: 10px">
            </div>
            <div class="text" >
                <h3>科技出手，功力双收</h3>
                <p>李某闭目听箜篌，只因天下无敌手。</p>
                <p>笔落才气惊星斗，龙骧凤翥势难收。</p>
                <p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p>
                <p>满堂花醉七千客，一剑霜寒十九州。</p>
            </div>
        </div>
        <div class="message_1">
            <div>
                <img src="img/d.png" alt="">
            </div>
            <div class="text" >
                <h3>科技出手，功力双收</h3>
                <p>李某闭目听箜篌，只因天下无敌手。</p>
                <p>笔落才气惊星斗，龙骧凤翥势难收。</p>
                <p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p>
                <p>满堂花醉七千客，一剑霜寒十九州。</p>
            </div>
        </div>
        <div class="message_1">
            <div>
                <img src="img/c.png" alt="">
            </div>
            <div class="text" >
                <h3>科技出手，功力双收</h3>
                <p>李某闭目听箜篌，只因天下无敌手。</p>
                <p>笔落才气惊星斗，龙骧凤翥势难收。</p>
                <p>兴酣落笔摇五岳，诗成笑傲凌千秋。</p>
                <p>满堂花醉七千客，一剑霜寒十九州。</p>
            </div>
        </div>
    </div>
    <!--中标告示-->
    <div class="title_2">
        <h2>中标告示</h2>
        <div class="photo_2">
            <img src="img/hover5.png" alt="">
        </div>
    </div>
    <!--修饰-->
    <div class="modify">
        <div class="left_2"></div>
        <div class="mid_2">
        </div>
        <div class="bottom_2"></div>
    </div>
    <!--底部-->
    <div class="bottom">
        <div class="left_1">
            <img src="img/logo.png" alt="">
        </div>
        <div class="mid" >
            <div style="text-align: center;color: white;margin-top: 35px">
                <span>工程客户端&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                <span>机械客户端</span>
            </div>
            <div class="download">
                <div class="download_1">
                    <p style="text-align: center;color: white;margin-top: 5px">Appstore下载</p>
                </div>
                <div class="download_1">
                    <p style="text-align: center;color: white;margin-top: 5px">Appstore下载</p>
                </div>
                <div class="download_1">
                    <p style="text-align: center;color: white;margin-top: 5px">Android下载</p>

                </div>
                <div class="download_1">
                    <p style="text-align: center;color: white;margin-top: 5px">Android下载</p>

                </div>
            </div>

        </div>
        <div class="right_1">
            <div class="photo_3">
                <img src="img/b.png" alt="">
            </div>
        </div>
    </div>
    <!--备案-->
    <div class="safe">
        <p>Copyright © 2015-2020 轰隆隆honglonglong. All Rights Reserved.</p>
        <p>京ICP备20002211号</p>
    </div>

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

body{
    margin: 0;
}

/* 1354 88 */

.main .top{
    min-width: 1388px;
    background-color: #324880;
    height: 88px;
    overflow: hidden;
}

.top .left{
    width: 50%;
    float: left;
    margin-top: 20px;
}
.top .right{
    margin-top: 35px;
}
.top .right span{
    color: white;
    margin-left: 80px;
}

.main .top img{
    width: 177px;
    height: 51px;
    margin-left: 175px;
    margin-bottom: 30px;
}

/*.photo div {
    height: 360px;
    background-image: url("../img/k.png");
    background-size: cover;
    background-position: center center;
}*/
.photo img{
    width: 100%;
    height: 360px;
}

.title{
    margin: 0;
    text-align: center;
}

.photo_1{
    margin: 0 auto;
    /*text-align: center;*/
    width: 1100px;
    height: 960px;
}

.one{
    width: 1100px;
    height: 300px;
    margin-bottom: 10px;
    border-radius: 15px;
    background-color: #f3f7fb;
    border: 1px solid black;
}

.two{
    width: 1100px;
    height: 300px;
    margin-bottom: 10px;
    border-radius: 15px;
    background-color: #f3f7fb;
    border: 1px solid black;
}
.three{
    width: 1100px;
    height: 300px;
    border-radius: 15px;
    background-color: #f3f7fb;
    border: 1px solid black;
}


.photo_1 .one img{
    border-radius: 15px;
    float: left;
    margin-bottom: 30px;
}
.photo_1 .two img{
    border-radius: 15px;
    float: right;
}
.photo_1 .three img{
    border-radius: 15px;
    float: left;
}


.one .page{
    margin-left: 30px;
    width: 600px;
    float: right;
    line-height: 15px;
    font-size: 28px;
}

.two .page{
    margin-left: 30px;
    width: 600px;
    float: left;
    line-height: 15px;
    font-size: 28px;
}

.three .page{
    margin-left: 30px;
    width: 600px;
    float: right;
    line-height: 15px;
    font-size: 28px;
}

.title_1{
    text-align: center;
}

.message {
    margin: 0 auto;
    width: 1200px;
    height: 550px;
    overflow: hidden;
}

.message .message_1{
    float: left;
    width: 600px;
    height: 250px;
}

.message .message_1 img{
    float: left;
    margin-bottom: 30px;
}

.message_1 .text{
    width: 350px;
    height: 250px;
    margin-top: 20px;
    margin-left: 20px;
    line-height: 20px;
    font-size: 20px;
    float: right;
}

.title_2{
    text-align: center;
    margin-bottom: 35px;
}

.title_2 .photo_2{
    width: 1300px;
    height: 430px;
    margin: 0 auto;
}

.title_2 .photo_2 img{
    width: 1300px;
    height: 430px;
}

.bottom{
    background-color: #233059;
    height: 210px;
    overflow: hidden;
}
.bottom .left_1{
    width: 320px;
    height: 210px;
    float: left;
}

.bottom .mid{
    width: 520px;
    height: 210px;
    border: 1px solid #233059;
    float: left;
}

.modify {
    height: 40px;
    overflow: hidden;
}

.modify .left_2{
    width: 950px;
    height: 40px;
    float: left;
    background-color: white;
}

.modify .mid_2{
    height: 40px;
    float: left;
    width: 40px;
    border-left: 40px solid white;
    border-right: 40px solid #171e2E;
    border-top: 40px solid white;
    border-bottom: 40px solid #171e2E;
}

.modify .bottom_2{
    height: 40px;
    float: left;
    width: 213px;
    background-color: #171e2E;
}



.bottom .left_1 img{
    width: 145px;
    height: 45px;
    margin-left: 170px;
    margin-top: 85px;
}

.download{
    width: 380px;
    height: 100%;
    float: left;
    margin-left: 100px;
    margin-top: 25px;
}

.download .download_1{
    width: 150px;
    height: 40px;
    margin-bottom: 22px;
    margin-right: 30px;
    border: 1px solid white;
    float: left;
}


.right_1 {
    width: 210px;
    height: 160px;
    float: left;
    margin-left: 230px;
    background-color: #171e2E;
}

.right_1 .photo_3 img{
    margin-left: 50px;
}

.safe{
    margin: 0;
    background-color: #171e2E;
    text-align: center;
    color: #575c67;
    border: 5px solid #171e2E;
}

.safe p{
    text-align: center;
}